- A+
TS官方Handbook: TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org)
基础
相关概念
-
运行时错误:JS 的大多数错误都只能在运行的过程中被发现。
-
静态类型系统:TS 可以在运行代码之前发现错误。
-
非异常失败:例如在 JS 中访问一个对象不存在的属性,不会导致异常,而是返回
undefined
,这种情况就是非异常失败,容易被忽略。 -
类型工具:TS 可以通过类型声明,在访问变量或者其它属性的时候提供代码补全和错误信息提示。
TypeScript编译器 tsc
使用npm
全局安装
npm install -g typescript
执行tsc demo.ts
可以将ts
文件编译为js
文件,并及时发现错误,而不是等待 JS 代码执行时。
报错时仍产出文件
TypeScript 的核心原则:大多数时候,开发人员比 TypeScript 更了解代码。
当tsc编译过程中检测到报错,仍会产出js文件。
这一特性可以方便将 JS 项目迁移到 TS,原先的 JS 项目本就是可以运行的,不需要完全更改到符合 TS 的标准(工作量太大了)。
如果需要更严格的编译,可以使用noEmitOnError
编译选项。
tsc --noEmitOnError demo.ts
显示类型与类型标注
通过冒号加类型的方式给变量标注类型。
function greet(person: string, date: Date) { console.log(`Hello ${person}, today is ${date.toDateString()}!`); }
擦除类型与降级
-
擦除类型: 在编译过程中,类型标注会被擦除,因为类型标注不是 JS 的语法特性,不被浏览器支持,这也是使用 TS 需要使用编译器将代码编译为 JS 的原因。
-
降级:TS 可以将高版本 ECMAScript的代码重写为低版本(ES3或者ES5)的代码。默认降级到ES3,可以使用
target
选项指定版本转换,例如:tsc --target es2015 demo.ts
.
虽然默认的目标代码采用的是 ES3 语法,但现在浏览器大多数都已经支持 ES2015 了。
所以,大多数开发者可以安全地指定目标代码采用 ES2015 或者是更高的 ES 版本,除非你需要着重兼容某些古老的浏览器。
严格性
TS 的严格性是在一个区间内调节的。
可以在tsconfig.json
中通过设置strict: true
一次性开启全部严格性设置。
也可以单独开启或者关闭某个设置,其中:
-
noImplicitAny
:当有变量被隐式地被推断为any
时报错。也就是说需要显性的指定
any
(不推荐),或者隐式推断可以推断出具体类型,或者手动指定明确的类型(最好)。 -
strictNullCheck
:严格地处理null
和undefined
。
常见类型与概念
基本类型
与 JS 中一致的:string
,number
,boolean
。
数组
使用type[]
或者泛型Array<type>
。
对象
简单的对象可以:(复杂的对象用interface
声明)
function printCoord(pt: { x: number; y: number }) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } printCoord({ x: 3, y: 7 });
联合类型
使用|
分隔多种允许的类型。
类型别名
使用type
声明。
type Point = { x: number; y: number; }; type ID = number | string;
接口
interface Point { x: number; y: number; }
类型别名和接口之间的区别
类型别名和接口非常相似,在大多数情况下可以在它们之间自由选择。 几乎所有的
interface
功能都可以在type
中使用,关键区别在于不能重新开放类型以添加新的属性,而接口始终是可扩展的。
类型断言 Type Assertions
考虑到多态的情况,有时候 TS 只能推断出父类,假如我们明确知道具体的子类,可以使用类型断言。
如果断言错误,会及时报错。
// 使用 as 关键字 const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement; // 使用<>,这种写法不能出现在tsx中,会被误判 const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas"); // 报错 const x = "hello" as number;
文字类型 Literal Type
使用var
或let
声明的量是变量,因此对应的类型是指定的数据类型。
而使用const
声明的量是常量,本身就不能再改变,TS 将其值作为类型(只适用于string
和number
)。
字符串可以作为类型,于是联合类型可以联合多个字符串形成枚举类型:
let alignment: "left"|"center"|"right" = "center";
使用const
声明对象,对象的内部字段不会被当作文字类型:
// 这里的 obj.num 会被推断为number类型 const obj = {num: 0};
一个较详细的例子
const req = {url:"https://example.com", method: "GET"}; // 这里会报错,因为req.method是string类型,不是"GET"或"POST"类型 handleRequest(req.url, req.method); // 函数类型声明 function handleRequest(url:string, method:"GET"|"POST"){...}
修正方法1:使用类型断言
// Change 1: const req = { url: "https://example.com", method: "GET" as "GET" }; // Change 2 handleRequest(req.url, req.method as "GET");
change1意味着断言req.method
的类型为"GET"
,这可以在类型推断的时候将其视为"GET"
,而不是更广泛的string
。
change2用于断言传入的参数的类型为"GET"
,确保没有意料之外的错误。
修正方法2:使用 as const
const req = { url: "https://example.com", method: "GET" } as const; handleRequest(req.url, req.method);
req.url
和req.method
都会变成文字类型,req.method
的类型变成"GET"
,而req.url
的类型变成了"https://example.com"
,看起来很奇怪,但是这种类型可以视作string
类型的子类型,也可以被函数匹配到。
对于null和undefined的处理
建议开启strictNullChecks
,在传递值的时候手动检查是否为null
或undefined
,或者使用!
断言一个变量非空:
function doSomething(x: string | null) { if (x === null) { // do nothing } else { console.log("Hello, " + x.toUpperCase()); } } function liveDangerously(x?: number | null) { // No error console.log(x!.toFixed()); }