TypeScript 学习笔记 —— （一）TS 类型

2022-03-08 415 阅读4分钟

此笔记记录的是尚硅谷TypeScript教程（李立超老师TS新课）课程笔记

简介

TypeScript 是以 JavaScript 为基础构建的语言
TypeScript 是一个 JavaScript 的超集
TypeScript 扩展了 JavaScript，并添加了类型
TypeScript 可以在任何支持 JavaScript 的平台中执行
TS 不能被 JS 解析器直接执行
TS 需要使用编译器编译成 JS，然后才能在浏览器里执行
LTS (Long-term support) 长期支持版本
npm i -g typescript 安装的其实是一个 typescript 的编译器，安装好之后就可以使用 tsc 命令了
tsc typescript compiler
下面图中，使用 tsc 命令编译 ts 文件，得到编译后的 js 文件

图片.png

TS 的类型声明

通过类型声明可以指定 TS 中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
可以给变量进行类型声明，语法如下：
1. 单独声明变量，未赋值
```
// let 变量: 类型;
let a: number;
```
1. 对变量的声明和赋值同时进行，TS 编译器会自动判断变量的类型，所以此时可以省略掉类型声明
```
// let 变量: 类型 = 值;
let b: boolean = false;
// 可以简写为
let b = false;
```
声明也可以在函数当中应用，主要用在函数的参数和返回值上

// function fn(参数: 类型, 参数: 类型): 类型 = {}
function sum(a: number, b: number): number {
    return a + b;
}
sum(123, 456); // 579

TS 中的类型

图片.png

字面量

直接使用字面量进行类型声明
- 使用 10 声明 a 变量之后，a 的类型只能是数字，且不能赋值其它的数字

图片.png

可以使用 | 来连接多个类型（联合类型）

图片.png

any

any 表示的是任意类型，一个变量设置类型为 any 后，相当于对该变量关闭了 TS 的类型检测
使用 TS 时，不建议使用 any 类型
显示 any：声明变量之后，显示定义 any 类型

let d: any;
d = 10;
d = 'hello';

隐式 any：声明变量之后，没有指定变量的类型，则 TS 解析器会自动判断变量的类型为 any

let d;
d = 10;
d = 'hello';

unknown

unknown 表示未知类型的值
unknown 其实就是一个类型安全的 any

let e: unknown;
e = 10;
e = 'hello';

any 和 unknown 类型的区别

any 类型的变量可以赋值给其它变量
unknown 类型的变量不可以赋值给其它变量

let s: string;
s = 'hello';
let d: any;
d = 'world1';
s = d; // 不会报错
let e: unknown;
e = 'world2';
s = e; // 会报错

图片.png

unknown 类型的变量，如果想要赋值给另一个变量，需要使用类型断言，可以用来告诉解析器变量的实际类型
1. 语法一：变量 as 类型
2. 语法二：<类型>变量

图片.png

void

void 可以用作函数的返回值类型
void 用来表示空，以函数为例，就表示没有返回值的函数
如果一个函数没有明确标出返回值的类型，函数里也没有返回值语句，那么会被默认返回 void 类型

图片.png

never

never 表示永远不会返回结果

图片.png

Object

object 表示一个 js 对象，可以是 {} 字面量形式，也可以是 function(){} 函数

{} 用来指定对象中可以包含哪些属性
语法：{属性名: 属性值, 属性名: 属性值}
在属性名后面加上 ? 表示属性是可选的

[propName: string]: any 表示任意类型的属性

设置函数结构的类型声明语法：(形参: 类型, 形参: 类型 ...) => 返回值

array

数组的类型声明
1. 类型[ ]
2. Array<类型>

tuple

元组：就是固定长度的数组
语法：[类型, 类型, 类型]

enum

枚举
下图中的 Gender 就是一个枚举类型，通过关键字 enum 定义的

&

& 表示同时，下面图中表示，需要有两个属性 name 和 age，每个属性的类型也必须符合要求

类型的别名

可以给一个比较复杂的类型起一个别名，这样就可以在后面直接使用这个类型的别名