typescript配置与设定

yueran
775 阅读7分钟

安装 node.js 与检查与TypeScript

在安装 TypeScript 执行环境前，我们先来确认是否已安装好 node.js，如果还没安装，可以到node.js 官方网站 官方网站进行下载安装，建议是使用左边 LTS 版本唷，相对比较稳定。如果想要管理不同版本的 node 及 npm 也可以使用 nvm来安装。

安装 node.js 时自动会安装 npm，安装成功后，可以输入指令来检查版号，看是否安装成功。

node -v
npm -v

在全域环境安装 TypeScript 指令，之后就可以在任何地方执行 tsc 指令了。

npm install -g typescript
tsc -v

建立第一个 TypeScript 档案的配置

ts2.gif

步骤：
  1. 新增 2 个资料夹 src 及dist， 在 src 档案新增index.ts, 并写入：
function sayHello(person: string) {
  return "Hello, " + person;
}

let user = "iris";
console.log(sayHello(user));
  1. npm 与ts初始化
npm init -y
tsc --init
  1. 配置ts出入口：打开 tsconfig.json，设定 outDir 及 rootDir 的路径，并执行tsc，会看见编译后的 index.js 在 dist 的资料夹
"outDir": "./dist", //完成编译后生成 js 文件的路径                           
"rootDir": "./src",   //代表 ts 文件的入口路径

tsc
  1. 配置自动化启动： 安装 nodemon 及 concurrently，在 package.json 修改 script 的指令。执行npm start就OK了
npm i nodemon concurrently --save-dev

  "scripts": {
    "start:build": "tsc -w",  //watch src的ts档并自动编译js档
    "start:run": "nodemon ./dist/index.js", //当有新的js档产生则去执行
    "start": "concurrently npm:start:*" //执行全部含有start的指令（包含 start:build 及 start:run）
  },
  
 npm start

TS常用设定

用noEmitOnError : true终止错误js文件产生

TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。特别注意，TypeScript 编译的时候即使报错了，但还是会产生 js 档案。

  • noEmitOnError：true，在报错的时候终止 js 档案的产生* ts-config-obj.gif

用strictNullChecks：on提醒使用了null，undefined

ts-config.gif

在 TypeScript 中， 这两个值的运用取决于 tsconfig 中是否设定了严格检查 strictNullChecks。而 strictNullChecks 的预设是 false。

  • strictNullChecks:false，可以赋值给其他型别为 null 或 undefined。

  • strictNullChecks：on，在严格检查下，null和undefined是不能赋值给其他型别的

用 noImplicitAny，strict来提醒我使用了any

ts-config-any.gif unknow比any好用，应该避免使用any

unknow与any，never区别：

  1. unknow ：会报错没有XXX的属性， 只能赋值给 any/unknow 。
  2. any ：不会报错没有XXX的属性，可以赋值给任何型别，
  3. never：表示不应该存在的状态的型别，一般用于错误处理函式。使用 Union Types (联合型别)，当参数被判断没有其他型别时，也会被视为never ts-config-never.gif

TS全部设定中英对照查阅表

提示：不用着急全部记住，用于不知道就回来查一下

{
    "compilerOptions": {
        "target": "es5",  //指定编译生成的JS版本
        "module": "commonjs", //指定生成哪种模组
        "strict": true,  //启用所有严格类型检查选项
        "esModuleInterop": true,  //兼容模组导入的方式
        "skipLibCheck": true,     // 不会检查引入的函式库档案       
        "forceConsistentCasingInFileNames": true //确保档案的大小写一致
    }
}

除了预设 compilerOptions 的设定外， 还有：

  • compileOnSave : 在最上层设定 compileOnSave 属性，可已让 IDE 编辑器在储存档案的时候根据 tsconfig.json 重新产生编译档案。

  • compilerOptions : 所有的编译设定都会写在 compilerOptions 里， 我们一开始取得的预设设定就在 compilerOptions 。

  • include : 指定编译需要编译的文件或目录。

  • exclude : 指定编译器需要排除的文件或文件夹。如默认排除 node_modules 文件夹。

    • include 及 exclude 最常见的万用字元包括：
    • *- 表示匹配 0 至多个字元 (不包含分隔符号)
    • ?- 匹配一个相符字元（不包含分隔符号）
    • **/- 表示匹配所有子资料夹

  • extends : 引入其他配置档案，继承配置。default 包含当前目录和子目录下所有 TypeScript 文件。

  • files : files 的值为包含相对或绝对文件路径的 list，表示需要编译的文件。default 包含当前目录和子目录下所有 TypeScript 文件。若指定 files，则只会编译指定的档案。

  • references : 指定要引用的专案。有时候为了方便将前端项目和后端 node 项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件。

  • typeAcquisition : 设置自动引入函式库相关定义文件。包含 3 个子属性：

    • enable : 布林类型，是否开启自动引入库类型定义文件 (.d.ts)，默认为 false；
    • include : 数组类型，允许自动引入的函式库名，如：["jquery", "lodash"]；
    • exculde : 数组类型，排除的函式库名。
{
  "compileOnSave": false,    //编辑器在储存档案的时候根据tsconfig.json重新产生编译档案
  "compilerOptions": {

    /* 基本选项 */
    "target": "es5",    // 指定编译生成的JS版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs", // 指定生成哪种模组: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],          // 编译需要引入的特定函式库档案
    "allowJs": true,    // 允许编译 javascript 文件
    "checkJs": true,    // 报告 javascript 文件中的错误
    "jsx": "preserve",  // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,  // 生成相应的 '.d.ts' 文件
    "declarationMap": true,   //生成宣告档案的 sourceMap
    "sourceMap": true,   // 生成相应的 '.map' 文件
    "outFile": "./",     // 将输出文件合并为一个文件
    "outDir": "./",      // 指定输出目录
    "rootDir": "./",     // 档案应该要被放置的位置
    "composite": true,       // 是否编译构建引用项目
    "tsBuildInfoFile": "./", // 指定文件存储增量编译信息，默认为 tsconfig.tsbuildinfo
    "removeComments": true,  // 删除编译后的所有的注释
    "noEmit": true,          // 不产生输出档案
    "importHelpers": true,   // 从 tslib 导入辅助工具函数
    "isolatedModules": true,  // 将每个文件做为单独的module（与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */
    "strict": true,           // 启用所有严格类型检查选项                    
    "noImplicitAny": true,    // 在表达式和声明上有隐含的 any类型时报错                   
    "strictNullChecks": true,  // 启用严格的 null 检查                  
    "strictFunctionTypes": true,    //启用检查function型别        
    "strictBindCallApply": true,   //启用对 bind, call, apply 更严格的型别检查           
    "strictPropertyInitialization": true,     //启用class实例属性的赋值检查
    "noImplicitThis": true,    //当 this 表达式值为 any 类型的时候，生成一个错误                
    "alwaysStrict": true,     // 以严格模式检查每个module，并在每个文件里加入 'use strict'                  

    /* 额外的检查 */
    "noUnusedLocals": true,   // 有未使用的变数时，抛出错误
    "noUnusedParameters": true,  // 有未使用的参数时，抛出错误
    "noImplicitReturns": true, // 并不是所有function里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 fallthrough 错误。 （即，不允许 switch 的 case 语句贯穿）
    "noUncheckedIndexedAccess": true,       //检查 index signature 属性是否是undefined     

    /* 模组选项 */
    "moduleResolution": "node",  // 选择模组解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",         // 用于解析非相对模组名称的基目录
    "paths": {},            // 模组名到基于 baseUrl 的路径映射的列表
    "rootDirs": [],        // 根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [],       // 包含类型声明的文件列表
    "types": [],          // 需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模组中默认导入。

    /* Source Map Options */
    "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

    /* 其他选项 */
    "experimentalDecorators": true,        // 启用装饰器
    "emitDecoratorMetadata": true,          // 为装饰器提供元数据的支持
        
    /* 进阶选项 */
    "skipLibCheck": true,                     //不会检查引入的函式库档案
    "forceConsistentCasingInFileNames": true // 确保档案的大小写一致
  },
  "files":[
        "hello.ts"                           //若指定 files，则只会编译指定的 hello.ts 档案。
  ],
  "exclude": [                               //指定编译器需要排除的文件或文件夹
    "node_modules"
  ],
  "extends": "./tsconfig.base.json",         //把基础配置抽离成tsconfig.base.json档案，然后引入
  
  "references": [                             // 指定依赖的程式路径
     {"path": "./common"}
  ],
  "typeAcquisition": {                       //自动引入函式库相关定义文件(.d.ts)。
      "enable": false,
      "exclude": ["jquery"],
      "include": ["jest"]
  }
}

结语

下一期讲解typescript的类型并配合练习~

avatar
文章
阅读
粉丝