TypeScript ~ TS 掌握编译文件配置项 ⑥

@作者 : SYFStrive

 

@博客首页 : HomePage

📜： TypeScript ~ TS

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

📌：觉得文章不错可以点点关注 👉：专栏连接🔗

👉 微信小程序（🔥） 👉 UNIAPP开发（🔥）

---

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示：以下是本篇文章正文内容

$TypeScript$ 简介

---

1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
3. TS代码需要通过编译器编译为 → JS，然后再交由JS解析器执行。
4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

$TypeScript$ 开发环境搭建

0. 官方 https://www.tslang.cn/index.html

1. 下载Node.js

   • 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
   • 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
     –

2. 安装Node.js

3. 使用npm全局安装typescript

   • 进入命令行
   • 输入：npm i -g typescript
     –

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   • 进入命令行

   • 进入ts文件所在目录

   • 执行命令：tsc xxx.ts

$CompilerOptions$ $Compiler$ $Config$ $Options$

• $CompilerOptions$ $Compiler$ $Config$ $Options$

• 编译选项是配置文件中非常重要也比较复杂的配置选项

• 在compilerOptions中包含多个子选项，用来完成对编译的配置

11、 严格检查

• strict
  • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
• alwaysStrict
  • 总是以严格模式对代码进行编译
• noImplicitAny
  • 禁止隐式的any类型
• noImplicitThis
  • 禁止类型不明确的this
• strictBindCallApply
  • 严格检查bind、call和apply的参数列表
• strictFunctionTypes
  • 严格检查函数的类型
• strictNullChecks
  • 严格的空值检查
• strictPropertyInitialization
  • 严格检查属性是否初始化

12、 额外检查

• noFallthroughCasesInSwitch
  • 检查switch语句包含正确的break
• noImplicitReturns
  • 检查函数没有隐式的返回值
• noUnusedLocals
  • 检查未使用的局部变量
• noUnusedParameters
  • 检查未使用的参数

13、 高级

• allowUnreachableCode
  • 检查不可达代码
  • 可选值：
    true，忽略不可达代码
    false，不可达代码将引起错误
• noEmitOnError
  • 有错误的情况下不进行编译
  • 默认值：false

14、 $Ts$$ConfigJson$ $Script$

代码 ↓

{
  //→→→→→→ tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译 ←←←←←←
  /*
    "include" 用来指定哪些ts文件需要被编译
      路径: ** 表示任意目录
            * 表示任意文件
    "exclude" 不需要被编译的文件目录
      默认值: ["node_modules", "bower_components", "jspm_packages"]
*/
  "include": [
    "./src/**/*" //→ src 下的所有目录文件都不会被编译解析
  ],
  // "exclude": [
  //   "./src/hello/**/*"   //→ src/hello 下的所有目录文件都不会被编译解析
  // ],
  // →→→→→→ compilerOptions 编译器的选项 
  "compilerOptions": {
    // →→→→→→ target 用来指定ts被编译为的ES的版本 → 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es2015",
    // →→→→→→ module 指定要使用的模块化的规范 → 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",
    // →→→→→→ lib用来指定项目中要使用的库 ↓ ↓ 
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es
    //2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scri
    //pthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.r
    //eflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.st
    //ring', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', '
    //es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.s
    //haredmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable
    //', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
    //    "lib": ["es6", "dom"]
    // →→→→→→ outDir 用来指定编译后文件所在的目录 ↓ 
    "outDir": "./dist",
    // →→→→→→ outFile，所有的全局作用域中的代码会合并到同一个文件中
    //  "outFile": "./dist/app.js"
    // →→→→→→ 是否对js文件进行编译，默认是false
    //  "allowJs": true,
    // →→→→→→ 是否检查js代码是否符合语法规范，默认是false
    //  "checkJs": true,
    // →→→→→→ 是否移除注释
    "removeComments": true,
    // →→→→→→不生成编译后的文件 → 做检测使用
    "noEmit": false,
    // →→→→→→当有错误时不生成编译后的文件
    "noEmitOnError": true,
    // →→→→→→所有严格检查的总开关 为True 默认开启以下所有配置
    "strict": true,
    // →→→→→→用来设置编译后的文件是否使用严格模式，默认false → 当js代码 执行了export js会自动开启严格模式 
    "alwaysStrict": true,
    // →→→→→→不允许隐式的any类型
    "noImplicitAny": true,
    // →→→→→→不允许不明确类型的this
    "noImplicitThis": true, 
    // →→→→→→严格的检查空值 → 如绑定获取元素 绑定按钮 实现点击 → 但是获取的元素不存在这时会提示出来
    "strictNullChecks": true
  }
}

总结

以上是个人学习TypeScript的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波