TypeScript

[scarcat]

最近项目都是使用 TypeScript，自从用上 TypeScript 后，项目中的 js 都想换成 TypeScript，比如 Webpack 配置，因此决定认真梳理一下 TypeScript 相关的知识点。

TypeScript

0202 年

0202 年还在用 JavaScript <_>

什么是 TypeScript ？

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

简单说，TypeScript是JavaScript的类型化超集，可编译为普通JavaScript。

安装使用

全局安装

npm install -g typescript  或者 yarn global add  typescript

安装好后就可以使用 tsc 命令（另外一个是tsserver命令），比如：

tsc hello.ts

本地安装

npm install typescript -D  或者 yarn add  typescript --dev

安装好后，即可通过以下方式使用（或者 npm script 方式）：

node_modules/typescript/bin/tsc hello.ts

[scarcat]

tsconfig.json

生成 tsconfig.json 文件

tsconfig.json 是 TypeScript 的配置文件，用于指定编译选型和文件包含关系，初始化方式如下：

tsc --version
Version 3.7.2

tsc --init

tsconfig.json 的大概结构如下：

{
    "extends": "./base.json",
    "compileOnSave": false,
    "compilerOptions": {
        /* 配置选项*/
    },
    "files": [
        "dir/core.ts",
        "sys.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

生成的 tsconfig.json 文件注释非常详细，可以参考修改配置。

tsconfig.json 使用

• 如果使用 tsc 没有指定输入文件

  • tsc 会在当前目录，然后父级、父级的父级... 查找 tsconfig.json；
  • --project 或者 -p 可指定包含 tsconfig.json 的目录或者包含配置的 .json 的配置文件；

• 如果指定了输入文件，则忽略 tsconfig.json 文件

files、include、exclude 配置

files、include、exclude 用于指定包含和排除的文件，其中 files 指定具体的文件列表，include 和 exclude 是 glob 风格文件匹配，glob 格式如下：

• * 表示零个或者零个以上（不包含目录分隔符）；
• ? 表示单个字符可有可无（不包含目录分隔符）；
• **/ 表示递归目录；

如果没有指定具体文件格式，比如 * 或者 .* 时，默认包含支持的格式，默认是 .ts、.tsx和 .d.ts(如果指定 allowJs 同时包含 .js 和 .jsx)

• files和include 都没有指定，则包含除 exclude 指定目录外的全部 .ts、.tsx和 .d.ts(如果指定 allowJs 同时包含 .js 和 .jsx)；
• files和include 都指定了，则取并集；
• include 指定的目录文件，可以通过 exclude 排除，files 指定文件不能被 exclude；
• exclude 默认排除了node_modules,bower_components,jspm_packages 和 <outDir>；
• files或include 包含的文件 A.ts， 引用了文件 B.ts，则 B.ts 不能被 exclude，除非 A.ts 也被 exclude；
• 编译输出的文件也会被排除，比如 index.ts 的输出 index.d.ts 和 index.js；
• 命令参数优先级高于 tsconfig.json 配置；

@types 、typeRoots、types

默认项目也包含了类型定义包（@types packages） ，即当前目录、父级、父级父级 .. 目录下的node_modules/@types。

当设置了 typeRoots 时，则只包含 typeRoots 指定目录下的，不包含 node_modules/@types;

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

当设置 types 时，则只包含指定包的类型定义，不包含其他类型定义包；

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express"]
   }
}

"types": [] 可禁用自动包含类型定义包；

类型定义包（@types packages）：目录下包含 index.d.ts 或者 package.json 指定了 types 字段；

extends

配置文件可继承，优先加载继承的配置文件，每个文件也可以覆盖响应的配置。

compileOnSave

告诉 IDE 保存编辑，Visual Studio Code 不支持。

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

[scarcat]

TypeScript 中使用 jsx

• 使用 .tsx 扩展名
• 开启 compilerOptions.jsx 配置

compilerOptions.jsx 的提供3中模式，具体如下：

模式	输入	输出	扩展名	默认值
preserve	<div />	<div />	.jsx	Y
react	<div />	React.createElement("div")	.js	N
react-native	<div />	<div />	.js	N

• preserve 输出为 jsx，扩展名为 .jsx，剩下由其他转化步骤处理；
• react 输出处理好的 js 文件，可通过 jsxFactory 控制输出的代码；
• react-native 同 preserve，只是扩展名为 .js；

**注意：jsx 配置修改了需要重启 VS Code ^_^ **