TypeScript 入门
参考：https://ts.xcatliu.com/introduction/what-is-typescript
参考：https://ts.xcatliu.com/

什么是 TypeScript

TypeScript 是 JavaScript 的类型超集，主要提供了类型系统和对 ES6 的支持，它可以编译成纯 JS,编译出来的 JS 代码可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。 ###优点

增强代码的的可读性和可维护性
- 类型系统是最好的文档，大部分函数通过查看参数类型的定义就知道如何使用
- 可以在编译阶段发现错误
- 增强了编译器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等
非常包容
- TypeScript 是 JavaScript 的超集，将.js 文件直接重命名为.ts 即可
- 即使不显示的定义类型，也能够自动做出类型推论（没有明确定义类型时，TS 会根据值推测出一个类型）
- 可以定义从简答到复杂的几乎一切类型
- 即使 TS 编译报错也能生成 JS 文件
- 兼容第三方库，即使第三方库不是 TS 写的，也可以编写单独的类型文件功 TS 读取
拥有活跃的社区
- 大部分第三方库都提供给 TS 的类型定义文件
- Google 开发的 Angular2 就是 TS 编写的
- TS 支持 ES6 规范，也支持部分 ESNext 草案的规范

缺点

学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等
短期内增加开发成本，需要多些一下类型的定义，不过对于需要长期维护的项目，TS 能够减少其维护成本
集成到构建流程需要一些工作量
可能和一些库结合的不是很完美

安装

1	sudo npm install -g typescript

编译 TS 文件

1	tsc hello.ts

约定使用 TypeScript 编写的文件以.ts 为后缀，用 TypeScript 编写的 React 时，以.tsx 为后缀。

Hello TypeScript

hello.ts


function sayHello(person: string){
    return 'Hello,' + person
}
let user = 'Tom';
console.log(sayHello(user))

编译

1	tsc hello.ts

会生成 hello.js 文件

function sayHello(person) {
    return 'Hello,' + person;
}
var user = 'Tom';
console.log(sayHello(user));

TypeScript 中，使用 :指定变量的类型，:前后有没有空格都可以。

TypeScript 只会进行静态检查，如果发现错误编译的时候就会报错。

上面的例子中做如下修改

function sayHello(person: string){
    return 'Hello,' + person
}
let user = [1,2,3];
console.log(sayHello(user));

编译的时候会报错

1	hello.ts:6:22 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

但是还是会生成 js 文件：

function sayHello(person) {
    return "Hello, " + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));

如果想要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。tsconfig.json 参考官方手册

编译项目使用 tsconfig.json 的两种方式：

不显示指定tsconfig.json，此时，编译器会从当前路径开始寻找tsconfig.json文件，如果没有找到，则继续往上级路径逐步寻找，直到找到为止；
通过–project(-p)指定一个包含 tsconfig.json 的路径，或者包含配置信息的.json文件路径。
注意，tsc的命令行选项具有优先级，会覆盖tsconfig.json中的同名选项
compilerOptions 编译选项配置
指定带编译的文件
files

{
    "compilerOptions": { //配置编译选项
        "noEmitOnError": true ,//编译出错时不生成js文件
    },
    "files": [ //指定带编译的文件，特指入口文件，不需要入口文件的依赖文件
        "hello.ts"
    ]
}

files 属性是一个数组，数组元素可以是相对文件路径和绝对文件路径

include 和 exclude

{
    "compilerOptions": { //配置编译选项
        "noEmitOnError": true ,//编译出错时不生成js文件
    },
     "include":[
         "src/**/*"
     ],
     "exclude":[
         "node_modules",
         "**/*.spec.ts"
    ]
}

include 和 exclude 属性也是一个数组，但数组是类似glob的文件模式，支持的通配符glob:

*:匹配 0 或多个字符（注意：不包含路径分隔符）
?:匹配任意单个字符（注意：不包含路径分隔符）
**/:递归匹配任何子路径

TS 文件指拓展名为.ts,.tsx,.d.ts的文件。
如果开启了allowJs选项，那么.js和.jsx文件也属于 ts 文件。
如果同时设置了 files 和 include 编译器会把两者包含的文件都引入。
如果同时没有设置 files 和 include，会排除 exclude 包含的文件，其他文件都编译。
任何被 files 或 include 引入的文件依赖会被自动引入。

编译选项（compilerOptions）

选项字段	类型	默认值	说明
`allowJs`	`boolean`	`false`	是否运行编译 `JS` 文件
`checkJs	boolean`	`false`	报告 JS 文件中存在的类型错误，需要配合`allowJs`使用
`declaration	boolean`	`false`	生成对应的`.d.ts`文件
`declarationDir`	`stringv`	-	生成的`.d.ts`文件存放路径，默认与`.ts`文件相同
`experimentalDecorators`	`boolean`	`false`	启用实验功能-ES 装饰器
`jsx`	`string`	`Preserve`	在`.tsx`中支持 `JSX:React`、`Preserve`、`React-native`
`jsxFactory`	`string`	`React.createElement`	`jsx` 设置 `React` 时使用的创建函数
`lib`	`string[]`	-	编译时引入 ES 功能库，包含`es5`、`es6`、`es7`、`dom`等。如未设置，则默认为：`target` 为`es5`时：`["dom","es5","scripthost"]`，`target`为`es6`时：`["dom","es6","dom.iterable","scripthost"]`
module	string	target === “es3” or “es5”?”commonjs”:”es6”	生成的模块形式：`none`、`commonjs`、`amd`、 `system`、 `umd`、`es6`、`es2015`或`esnext`，只有`amd`和`system`能和`outFile`一起使用`target`为`es5`或更低时可用`es6`和`es2015`
`moduleResolution`	`string`	`module === "amd" or "system" or "es6" ? "classic":"node"`	模块解析方式
`noImplicitAny`	`boolean`	`false`	存在隐士`any`是抛错
`noImplicitReturns`	`boolean`	`false`	不存在`return`时抛错
`noImplicitThis`	`boolean`	`false`	`this`可能为`any`时抛错
`outDir`	`string`	-	编译生成的文件存放路径默认与`.ts`文件相同
`sourceMap`	`boolean`	`false`	生成`.map`文件
`target`	`string`	`es3`	生成`.js`文件版本
`strictNullChecks`	`boolean`	`false`	是否禁止 null 和 undefined 赋值给除他们自身和 void 以外类型的变量

附件：官方完整的编译选项列表