一、前言
TypeScript相当于JavScript的升级版，但是在实际开发完成之后，在文件编译的时候会自动的把TypeScript格式转化为JavaScript格式，这个时候我们就需要对TypeScript的编译进行设置。
二、ts文件编译称js文件
我们编写TypeScript文件之后会通过tsc xx.ts将文件编译为JavaScript文件，但是我们每次都要重新执行这个命令才可以令我们的TypeScript格式转换为JavaScript格式，很麻烦，也很不友好
编译某个文件夹下的所有ts文件
使用本功能的前提条件是，要编译的文件夹下必须要有一个tsconfig.json文件，哪怕里面什么都没写，只有一对大括号也可以
执行命令tsc生成相应的 js文件
单文件自动编译
输入命令 tsc xxx.ts -w 会使得我们的 xxx.ts文件自动编译
当输入我们的 *tsc xxx.ts 命令后终端出现如下信息， 表示我们的ts自动编译开启成功了
当我修改我们的 ts文件的时候， js文件也会做相应的修改
这个时候问题也来了，我们的tsc xxx.ts -w命令只会监视一个ts文件，但是我们的一个项目肯定是不会只有一个ts文件的，要是为每一个ts文件都开启一个监视的话也太麻烦了
更何况现在vue这么流行，每一个vue+TypeScript项目的vue文件里面都有相应的ts代码。所以能够监视整个项目的话就更好了
相应的如果想要自动编译一个文件夹下的所有文件， 那么只要执行命令 tsc -w就可以了， 这里就不进行演示了
tsconfig.json文件配置
tsconfig.json是我们ts编译器的配置文件，我们的ts编译器可以根据tsconfig.json的相关配置来对我们的 ts文件进行编译
include（包含）
用来指定你想要编译的ts文件
{ "indlude": [ // 这里的 ./代表的是根目录 src代表的是文件夹 /**代表的是文件夹下的所有文件夹 /*代表的是文件夹下的所有文件 // 多个路径用 ， 分隔 "./src/**/*" ] } 复制代码
exclude(不包含)
表示跳过哪些文件， 不对其进行编译
{ "exclude": [ // 根目录下的test目录下的所有文件都不进行编译 "./src/test/*" ] } 复制代码
extends（继承）
继承个json文件, 或者叫做引入一个外部文件
{ "extends": "./config/base" } 复制代码
files（文件）
设置编译某个文件，但是很少用
{ "file": [ "core.ts", "sys.ts", "type.ts" ] } 复制代码
compilerOptions(编译器选项)
决定了我们的编译器如何对我们的ts进行编译， 下图的例子是以Vite构建Vue3-TypeScript项目自动生成的tsconfig.json
{ "compilerOptions": { // 用来指定ts被编译为ES的版本 "target": "ESNext", // 将 class 声明中的字段语义从 【set】 变更为 【Define】 "useDefineForClassFields": true, // 指定要使用的模块化解决方案 "module": "ESNext", // 指定模块解析策略 "moduleResolution": "Node", // 开启严格模式 "strict": true, // JSX是一种嵌入式的类似XNL的语法，它可以被转换成合法的JavaScript，jsx是设置转换模式的 "jsx": "preserve", // 是否开启sourceMap "sourceMap": true, // 是否语序我们在TypeScript模块中导入 json文件 "resolveJsonModule": true, // 是否把每个文件堪称单独的模块 "isolatedModules": false, // 支持使用 "import a from 'cjs'"的方式引入commonjs包 "esModuleInterop": true, // library 管理库的， 一般不用设置 "lib": ["ESNext", "DOM"], // 跳过所有声明文件的类型检查 "skipLibCheck": true， // 以下如果在VsCode中会自动判断，不用声明 // 当有错误时不生成编译后的文件 "noEmitOnError": true， // 不允许隐式any类型 "noImplicitAny": true， // 不允许不明确类型的this "noImplicitThis": true } } 复制代码
target可以传递的参数如下：'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
moudle可以传递的参数如下："CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "ES2022", "Node16", "NodeNext"
moduleResolution可选的参数如下：'node', 'classic', 'node16', 'nodenext'
lib可以传递的参数如下："ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Core", "ES2015.Generator", "ES2015.Iterable", "ES2015.Promise", "ES2015.Proxy", "ES2015.Reflect", "ES2015.Symbol.WellKnown", "ES2015.Symbol", "ES2016", "ES2016.Array.Include", "ES2017", "ES2017.Intl", "ES2017.Object", "ES2017.SharedMemory", "ES2017.String", "ES2017.TypedArrays", "ES2018", "ES2018.AsyncGenerator", "ES2018.AsyncIterable", "ES2018.Intl", "ES2018.Promise", "ES2018.Regexp", "ES2019", "ES2019.Array", "ES2019.Object", "ES2019.String", "ES2019.Symbol", "ES2020", "ES2020.BigInt", "ES2020.Promise", "ES2020.String", "ES2020.Symbol.WellKnown", "ESNext", "ESNext.Array", "ESNext.AsyncIterable", "ESNext.BigInt", "ESNext.Intl", "ESNext.Promise", "ESNext.String", "ESNext.Symbol", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts", "Webworker.Iterable", "ES7", "ES2021", "ES2020.SharedMemory", "ES2020.Intl", "ES2021.Promise", "ES2021.String", "ES2021.WeakRef", "ESNext.WeakRef", "es2021.intl", "ES2022", "ES2022.Array", "ES2022.Error", "ES2022.Intl", "ES2022.Object", "ES2022.String".
references
{ "references": [ { "path": "./tsconfig.node.json" } ] } 复制代码
三、遇到的一些问题
执行 tsc xxx.ts时报错
当我在终端执行tsc xxx.ts命令时，报出以下错误
- 在终端执行：get-ExecutionPolicy，显示Restricted
- 在终端执行：set-ExecutionPolicy
- 根据提示 ExecutionPolicy输入: RemoteSigned
- 在终端执行：get-ExecutionPolicy，显示RemoteSigned
- 在重新输入命令 tsc xxx.ts就可以正常生成 js文件了
具体操作如图所示
执行 tsc xxx.ts -w报错
当你执行tsc xxx.ts -w报以下错误的时候，稳住不慌，你可能是把ts敲成了js
四、总结
至此, TypeScript的基本数据类型介绍和简单使用就到这里结束了, 如果文中有不对的地方欢迎评论区指教, 毕竟我也是初学者
