TypeScript

[yaofly2012]

学习路线

1. TypeScript 首页DEMO
2. TypeScript Get Started
3. TypeScript for JavaScript Programmers
4. TypeScript Handbook
5. 熟悉TSConfig

TS = JS + Type system

TS和Babel

职责不同

tsc可以把TS转成JS，但是转成哪个版本的JS呢？答案是TS不关心JS版本（起码默认是这样的），在TS官网首页有描述这个过程：

TypeScript becomes JavaScript via the delete key.

说白了只是脱去TS外衣，JS的写法并没有改变。

// TS 
function dis(...args: string[]) {
  console.log(args.length);
}

// 转JS
function dis(...args) {
    console.log(args.length);
}

但是TS也可以指定转成哪个版本的JS。见：

• importHelpers
• downlevelIteration
• noEmitHelpers

所以TS可以替换Babel么？

职责重叠部分

1. jsx/tsx转成React.createElement
2. ESNext转ES5，ES3

[yaofly2012]

Type System

1. 类型推理

2. 定义类型

3. Describe the shape of objects and functions
   主要Coding量就是定义对象和函数的描述。

声明类型：

1. 基本类型：在JS基础上新增了any, unknow, never
2. 对象类型: interface
3. 类型组合

• unions: 类型的集合
• generics: 类型变量

Structural Type System

类型检查就是检查变量值的结构。如果两个值的结构是一样的，则认为这两个值是相同类型的，即使他们没有显示的声明相同的类型。

[yaofly2012]

tsconfig.json

tsconfig.json所在的目录视为TypeScript项目的根目录。利用tsconfig.json可以方便的配置tsc编译的文件和编译选项。

如何寻找tsconfig.json文件

1. tsc -p ./config/tsconfig.json: 直接指定tsconfig.json文件；
2. tsc: 在当前目录查找tsconfig.json文件，如果没有则根据父目录结构继续查找。

TSConfig指南

顶层字段（Root fileds）没几个。

1. files
2. extends
3. include
4. exclude
5. references
6. compilerOptions

配置共同点：

1. 好些配置（files/extends/includes/exclueds）的值是个路径，这些路径是以tsconfig.json所在的目录作为根目录。

files

指定具体的TS文件。

include

除了可以指定具体的TS文件，还可以指定匹配模式（这也是常用的模式）。

exclude

指定include的跳过的文件。只有即匹配exclude规则又匹配include规则的文件才会被过滤掉，该文件还不能在files配置里。

references ???

compilerOptions

tsconfig.json核心配置。属性也很多。

0配置

TSDX:

Zero-config CLI for TypeScript package development

推荐配置

PK jsconfig.json