cms大型门户网站 源码,网页设计实训报告任务书,云主机网站的空间在哪,网页升级访问自动文章目录 一、TypeScript简介二、TypeScript 开发环境搭建三、编译方式1. 自动编译单个文件2. 自动编译整个项目 四、配置文件1. compilerOptions基本选项严格模式相关选项#xff08;启用 strict 后自动包含这些#xff09;模块与导入相关选项 2. include 和 excludeinclude… 文章目录 一、TypeScript简介二、TypeScript 开发环境搭建三、编译方式1. 自动编译单个文件2. 自动编译整个项目 四、配置文件1. compilerOptions基本选项严格模式相关选项启用 strict 后自动包含这些模块与导入相关选项 2. include 和 excludeincludeexclude 3. files4. extends5. 总结 五、Vue3 Vite 项目中引入 Typescript1. 初始化 TypeScript安装 TypeScript生成 tsconfig.json 2. 替换文件扩展名3. 添加类型定义文件4. 配置构建工具支持 TypeScript5. 在项目中使用 TypeScript6. 构建和运行项目编译 TypeScript运行项目 六、报错处理1. .ts 文件中引入 .vue 文件报错问题解决方法 一、TypeScript简介
TypeScript 是 JavaScript 的超集。它对 JS 进行了扩展向 JS 中引入了类型的概念并添加了许多新的特性。TS 代码需要通过编译器编译为 JS然后再交由 JS 解析器执行。TS 完全兼容 JS换言之任何的 JS 代码都可以直接当成 TS 使用。相较于 JS 而言TS 拥有了静态类型更加严格的语法更强大的功能TS 可以在代码执行前就完成代码的检查减小了运行时异常的出现的几率TS 代码可以编译为任意版本的 JS 代码可有效解决不同 JS 运行环境的兼容问题同样的功能TS 的代码量要大于 JS但由于 TS 的代码结构更加清晰变量类型更加明确在后期代码的维护中 TS 却远远胜于 JS。
二、TypeScript 开发环境搭建
下载Node.js 64位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi32位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi 安装 Node.js使用 npm 全局安装 typescript 进入命令行输入npm i -g typescript 创建一个 ts 文件使用 tsc 对 ts 文件进行编译 进入命令行进入 ts 文件所在目录执行命令tsc xxx.ts
三、编译方式
1. 自动编译单个文件
编译文件时使用 -w 指令后TS 编译器会自动监视文件的变化并在文件发生变化时对文件进行重新编译。
tsc xxx.ts -w2. 自动编译整个项目
如果直接使用 tsc 指令则可以自动将当前项目下的所有 ts 文件编译为 js 文件。但是能直接使用 tsc 命令的前提是要先在项目根目录下创建一个 ts 的配置文件 tsconfig.json。 tsconfig.json 是一个 JSON 文件添加配置文件后只需 tsc 命令即可完成对整个项目的编译
四、配置文件
tsconfig.json 是 TypeScript 的核心配置文件用于指定编译器选项、文件范围以及类型检查的规则。下面是 tsconfig.json 中常用配置项及其含义的详细解释 主要配置项
1. compilerOptions
compilerOptions 是 TypeScript 编译器选项的核心部分控制编译行为。
基本选项
配置项含义常见值target指定编译后的 JavaScript 目标语言标准ES5ES6ES2017ESNextmodule指定模块系统CommonJSESNextAMDUMDmoduleResolution模块解析策略nodeclassiclib指定要包含的库文件DOMES2015ESNextallowJs是否允许编译 .js 文件truefalsecheckJs是否对 .js 文件进行类型检查truefalseoutDir指定编译后输出文件的目录例如 ./distrootDir指定输入文件的根目录例如 ./srcstrict启用所有严格类型检查选项开启后相当于开启多种子选项truefalsesourceMap是否生成 .map 文件方便调试truefalsedeclaration是否生成 .d.ts 类型声明文件truefalse
严格模式相关选项启用 strict 后自动包含这些
配置项含义默认值strictNullChecks严格检查空值null 和 undefinedtruenoImplicitAny禁止隐式的 any 类型truenoImplicitThis禁止隐式的 this 类型truealwaysStrict在每个文件中添加 “use strict”;true
模块与导入相关选项
配置项含义默认值esModuleInterop允许 CommonJS 和 ESModule 之间的兼容导入truefalseresolveJsonModule是否允许导入 .json 文件truefalseisolatedModules启用模块的隔离编译模式适用于工具链如 BabeltruefalsebaseUrl设置模块解析的根目录结合 paths 配置别名路径例如 ./srcpaths设置模块路径别名例如 { /*: [src/*] }
2. include 和 exclude
include
定义希望被编译文件所在的目录。默认值[“**/*”]。** 表示任意目录* 表示表示任意文件
// 所有src目录和tests目录下的文件都会被编译
include:[src/**/*, tests/**/*] exclude
定义需要排除在外的目录。默认值[“node_modules”, “bower_components”, “jspm_packages”] // src下hello目录下的文件都不会被编译exclude: [./src/hello/**/*]❗❗❗注意如果 include 和 exclude 都未设置默认包含所有非 node_modules 的文件。 3. files
指定被编译文件的列表只有需要编译的文件少时才会用到。列表中的文件都会被 TS 编译器所编译。 files: [core.ts,sys.ts,types.ts,scanner.ts,parser.ts,utilities.ts,binder.ts,checker.ts,tsc.ts]4. extends
定义继承另一个配置文件的选项便于共享和复用配置。可覆盖部分选项。
// 当前配置文件中会自动包含config目录下base.json中的所有配置信息
extends: ./configs/base5. 总结
compilerOptions控制编译器行为是核心配置。include 和 exclude决定编译器处理哪些文件。extends 和 references支持配置复用和多项目架构。根据项目需求调整配置既可以提升开发效率也能保证代码质量
五、Vue3 Vite 项目中引入 Typescript
1. 初始化 TypeScript
安装 TypeScript
在项目目录下安装 TypeScript
npm install typescript --save-dev生成 tsconfig.json
运行以下命令生成 TypeScript 配置文件
npx tsc --init这会生成一个默认的 tsconfig.json 文件。可以根据需要修改配置比如
{compilerOptions: {// 基本选项target: ESNext, // 编译的 js 版本useDefineForClassFields: true, // 此标志用于迁移到即将推出的类字段标准版本target is ES2022 or higherlib: [ESNext, DOM], // 编译过程中需要引入的库文件的列表skipLibCheck: true, // 跳过默认库声明文件的类型检查module: ESNext, // 指定生成哪个模块系统代码moduleResolution: Node, // 决定如何处理模块noEmit: true, // 不生成输出文件jsx: preserve, // 在 .tsx文件里支持JSX// types: [vitest/globals, element-plus/global], // 要包含的类型声明文件名列表// 严格模式相关strict: true, // 启用所有严格类型检查选项strictPropertyInitialization: false, // 确保类的非 undefined 属性已经在构造函数里初始化// 模块导入相关isolatedModules: false, // 将每个文件作为单独的模块esModuleInterop: true, // 允许 CommonJS 和 ESModule 之间的兼容导入resolveJsonModule: true, // 是否允许导入 .json 文件baseUrl: ., // 解析非相对模块名的基准目录paths: {: [src],/*: [src/*],tests/*: [tests/*]} // 设置基于 baseUrl 的模块别名},include: [src/**/*.ts,**/*.d.ts,src/**/*.vue,src/types,types/*.ts,auto-imports.d.ts,], // 包含目录 references: [{ path: ./tsconfig.node.json }]
}2. 替换文件扩展名
将项目中的文件扩展名从 .js 改为 .ts或者 .tsx如果是 React 项目。
3. 添加类型定义文件
为了确保第三方库在 TypeScript 中工作正常需要安装类型定义包
npm install types/node --save-dev
npm install types/react types/react-dom --save-dev # 如果是 React 项目对于使用的其他库也可以安装对应的类型定义包通常以 types/库名 的形式存在
npm install types/lodash --save-dev # Lodash 的类型定义4. 配置构建工具支持 TypeScript
Vite 项目 Vite 原生支持 TypeScript无需额外配置只需确保文件扩展名为 .ts 或 .tsx。
5. 在项目中使用 TypeScript
6. 构建和运行项目
编译 TypeScript
运行以下命令使用 TypeScript 编译器进行构建
npx tsc运行项目
如果你的项目包含打包工具如 Webpack 或 Vite运行相关命令即可
npm run build
npm run dev六、报错处理
1. .ts 文件中引入 .vue 文件报错
问题 解决方法
创建一个 env.d.ts 文件对 .vue 文件进行类型声明 在全局 tsconfig.json 中包含该 env.d.ts 文件
