环境配置相关

■ 在还未手动安装 TypeScript 的情况下，操作系统或 IDE 很可能已经自带了 TypeScript。此时在手动安装了 TypeScript 之后如果不做相应的配置，系统命令行及 IDE 可能依旧使用原有的 TypeScript。

系统命令行的配置

▲Windows 系统默认在“C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0”目录下安装了 Typescript，且将此路径配置到了系统 path。导致问题：
（1）即使 npm -g 全局安装了最新 Typescript，运行“tsc –version”返回的仍然是老旧版本号。
（2）tsc 命令误报：”error TS1005: ‘;’ expected”
▲ 解决办法是将上述目录文件和系统 path 里配置的路径都删掉。

IDE 的配置

● 在任何一个”*.ts”文件中查看与跳转到某个原生 JS 对象成员函数定义所在的文件，如 Array 的 find()函数。默认跳转到的类型定义文件位于 VSCode 的安装目录下。
(MacOS 环境是”/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/lib.es2015.core.d.ts”)

● 因为通常我们在各项目范围内安装与使用特定版本的 TypeScript，所以需要指定上述 TypeScript 目录到当前项目的 node_modules 文件夹。通过为 VSCode 添加如下配置实现，保存 Reload 下窗口再次查看跳转函数定义所在文件跳转的就是当前项目的 node_modules 文件夹了，且在 VSCode 打开 ts 文件窗口的右下方状态栏可以看到当前 TypeScript 的版本号。

1
"typescript.tsdk": "node_modules/typescript/lib",

项目配置相关

Node 项目

○ tsconfig.json 内容样例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "compilerOptions": {
    "target": "es5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./lib",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

○ 安装@types/node 以支持 Node 的 ts 类型定义。

Web 项目

○ tsconfig.json 内容样例。

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "target": "es5",                                     /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "lib": ["dom", "esnext"]                             /* Specify library files to be included in the compilation. */,
    "jsx": "react"                                       /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
    "declaration": true,                                 /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

○ react 项目安装@types/react 和@types/react-dom。
○ts 书写格式参考。
○react 各场景的 ts 书写格式参考（react-typescript-cheatsheet）

webpack 项目的配置

◻︎ 支持 ts 语法的两种方式。
方式一：通过”ts-loader”实现对 ts 文件的类型检查与编译。
方式二：”babel-loader”通过配置“@babel/preset-typescript”presets 也可以解析与编译 ts 语法。

◻︎ 两种方式的区别是：第二种方式，由于 babel 仅做解析和编译，不会做 ts 类型检查，进而不会在 webpack 命令行输出中报出类型检查错误。官方详细说明。

第三方库的引入

▲ 第三方库的 ts 类型定义通常在名为“@types/库名”的 npm 包中，可通过命令”npm view @types/库名”查看该 npm 包是否存在。这种方式无需额外配置，TypeScript 会自动读取“node_modules/@types”目录下的声明文件。

▲ 当没有对应第三方库的类型声明 npm 包的时候，需要手动书写*.d.ts 文件。然后有两种配置方式。
（1）在 tsconfig.json 配置中的 “include” 字段数组中增加文件完整路径。注意这里添加的路径不能是”node_modules”目录下的，会被 TypeScript 忽略。
（2）通过三斜线语句引入类型定义文件，示例如下。这种方式的配置与上一种不同，它仅对当前文件有效，当别的文件缺少这个声明时也需要书写引入语句。

1
2
3
4
5
6
7
8
9
10

// 类型定义文件 "./types/one.d.ts"
declare module 'Module_Name' {
  export default (...)=>any;
  export class ...;
}

// 引入类型定义文件
/// <reference path="./types/one.d.ts" />