[TS手册学习] 01_基础、常见类型与概念

我爱牛皮糖

TS官方Handbook: TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org)

基础

相关概念

• 运行时错误：JS 的大多数错误都只能在运行的过程中被发现。
  
• 静态类型系统：TS 可以在运行代码之前发现错误。
  
• 非异常失败：例如在 JS 中访问一个对象不存在的属性，不会导致异常，而是返回undefined，这种情况就是非异常失败，容易被忽略。
  
• 类型工具：TS 可以通过类型声明，在访问变量或者其它属性的时候提供代码补全和错误信息提示。
  

TypeScript编译器 tsc

使用npm全局安装

1. npm install -g typescript

复制代码

执行tsc demo.ts可以将ts文件编译为js文件，并及时发现错误，而不是等待 JS 代码执行时。
报错时仍产出文件

TypeScript 的核心原则：大多数时候，开发人员比 TypeScript 更了解代码。
当tsc编译过程中检测到报错，仍会产出js文件。
这一特性可以方便将 JS 项目迁移到 TS，原先的 JS 项目本就是可以运行的，不需要完全更改到符合 TS 的标准（工作量太大了）。
如果需要更严格的编译，可以使用noEmitOnError编译选项。

1. tsc --noEmitOnError demo.ts

复制代码

显示类型与类型标注

通过冒号加类型的方式给变量标注类型。

1. function greet(person: string, date: Date) {
2.   console.log(`Hello ${person}, today is ${date.toDateString()}!`);
3. }

复制代码

擦除类型与降级

• 擦除类型： 在编译过程中，类型标注会被擦除，因为类型标注不是 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。
对象

简单的对象可以：（复杂的对象用interface声明）

1. function printCoord(pt: { x: number; y: number }) {
2.   console.log("The coordinate's x value is " + pt.x);
3.   console.log("The coordinate's y value is " + pt.y);
4. }
5. printCoord({ x: 3, y: 7 });

复制代码

联合类型

使用|分隔多种允许的类型。
类型别名

使用type声明。

1. type Point = {
2.   x: number;
3.   y: number;
4. };
6. type ID = number | string;

复制代码

接口

1. interface Point {
2.   x: number;
3.   y: number;
4. }

复制代码

类型别名和接口之间的区别
类型别名和接口非常相似，在大多数情况下可以在它们之间自由选择。 几乎所有的 interface 功能都可以在 type 中使用，关键区别在于不能重新开放类型以添加新的属性，而接口始终是可扩展的。

类型断言 Type Assertions

考虑到多态的情况，有时候 TS 只能推断出父类，假如我们明确知道具体的子类，可以使用类型断言。
如果断言错误，会及时报错。

1. // 使用 as 关键字
2. const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
4. // 使用<>，这种写法不能出现在tsx中，会被误判
5. const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
7. // 报错
8. const x = "hello" as number;

复制代码

文字类型 Literal Type

使用var或let声明的量是变量，因此对应的类型是指定的数据类型。
而使用const声明的量是常量，本身就不能再改变，TS 将其值作为类型(只适用于string和number)。

字符串可以作为类型，于是联合类型可以联合多个字符串形成枚举类型：

1. let alignment: "left"|"center"|"right" = "center";

复制代码

使用const声明对象，对象的内部字段不会被当作文字类型：

1. // 这里的 obj.num 会被推断为number类型
2. const obj = {num: 0};

复制代码

一个较详细的例子

1. const req = {url:"https://example.com", method: "GET"};
2. // 这里会报错，因为req.method是string类型，不是"GET"或"POST"类型
3. handleRequest(req.url, req.method);
5. // 函数类型声明
6. function handleRequest(url:string, method:"GET"|"POST"){...}

复制代码

修正方法1：使用类型断言

1. // Change 1:
2. const req = { url: "https://example.com", method: "GET" as "GET" };
3. // Change 2
4. handleRequest(req.url, req.method as "GET");

复制代码

change1意味着断言req.method的类型为"GET"，这可以在类型推断的时候将其视为"GET"，而不是更广泛的string。
change2用于断言传入的参数的类型为"GET"，确保没有意料之外的错误。
修正方法2：使用 as const

1. const req = { url: "https://example.com", method: "GET" } as const;
2. handleRequest(req.url, req.method);

复制代码

req.url和req.method都会变成文字类型，req.method的类型变成"GET"，而req.url的类型变成了"https://example.com"，看起来很奇怪，但是这种类型可以视作string类型的子类型，也可以被函数匹配到。
对于null和undefined的处理

建议开启strictNullChecks，在传递值的时候手动检查是否为null或undefined，或者使用!断言一个变量非空：

1. function doSomething(x: string | null) {
2.   if (x === null) {
3.     // do nothing
4.   } else {
5.     console.log("Hello, " + x.toUpperCase());
6.   }
7. }
9. function liveDangerously(x?: number | null) {
10.   // No error
11.   console.log(x!.toFixed());
12. }

复制代码

来源:https://www.cnblogs.com/feixianxing/p/typescript-handbook-basis-type-concept.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！