携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

一、前言

TypeScript相当于JavScript的升级版，但是在实际开发完成之后，在文件编译的时候会自动的把TypeScript格式转化为JavaScript格式，这个时候我们就需要对TypeScript的编译进行设置。

二、ts文件编译称js文件

我们编写TypeScript文件之后会通过tsc xx.ts将文件编译为JavaScript文件，但是我们每次都要重新执行这个命令才可以令我们的TypeScript格式转换为JavaScript格式，很麻烦，也很不友好

编译某个文件夹下的所有ts文件

使用本功能的前提条件是，要编译的文件夹下必须要有一个tsconfig.json文件，哪怕里面什么都没写，只有一对大括号也可以

新建好了 tsconfig.json文件之后，我们在当前目录下执行 tsc命令，就会给当前目录下的所有ts文件都生成相应的 js文件了

执行命令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命令时，报出以下错误这个时候我们需要关闭你的VsCode, 然后以管理员权限重新启动VS Code，在终端界面输入以下命令

在终端执行：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的基本数据类型介绍和简单使用就到这里结束了, 如果文中有不对的地方欢迎评论区指教, 毕竟我也是初学者

TypeScript之编译