一、TypeScript 是什么
TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
// TypeScript 代码有明确的数据类型let age1: number = 18，// JavaScript 代码没有let age2 = 18
为什么要为 JS 添加类型支持?
JS的缺陷
- JS 的类型系统是弱类型的，没有类型的概念
- 可读性和可维护性较差，没有类型校验，在开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率
- JavaScript 属于动态类型的编程语言，边解释边执行，错误在运行阶段才能发现。
TS优点
- 静态类型检查，编译阶段就发现类型错误。
- 提供更好的可读性和可维护性，降低代码理解成本。
- 提供更好的面向对象编程，使得代码更加结构化和可扩展。
- 完善的生态系统，第三方库丰富，三大框架对TS都提供良好支持。
TS生态React： TS + Hooks、Vue： TS + Vue3
TypeScript快速上手
全局安装编译 TS 的工具包
安装包：npm i -g typescript
typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
验证是否安装成功：tsc –v
注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript
编译并运行 TS 代码步骤：
创建hello.ts文件
将 TS 编译为 JS：tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
执行 JS 代码：node hello.js
扩展：ts-node 简化运行 TS 的步骤【自行了解】
二、TypeScript 语法
1、TS类型注解
背景：TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
TS中定义变量(常量)可以指定类型了。
A类型的变量不能保存B类型的数据
可以显示标记出代码中的意外行为，从而降低了发生错误的可能性
类型注解
- 格式
let 变量名: 类型 = 初始值 - 示例代码:
let age: number = 18
说明：代码中的 : number 就是类型注解，为变量添加类型约束。
上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错 - 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'
2、类型推论
目标：了解类型推论的场景
类型推论：
在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
发生类型推论的 2 种常见场景
- 声明变量并初始化时
- 决定函数返回值时
// 变量 age 的类型被自动推断为：number
let age = 18
// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
return num1 + num2
}
3、TS的数据类型
常用基础类型
将 TS 中的常用基础类型分为两类：原始类型和对象类型
- JS 已有类型
a. 原始类型：number/string/boolean/null/undefined/symbol
b. 对象类型：object（包括，数组、对象、函数等对象） - TS 新增类型
联合类型
自定义类型(类型别名)
接口
元组
字面量类型
枚举
void
any 等
注意：
原始类型在 TS 和 JS 中写法一致
对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法
4、原始类型
原始类型：number/string/boolean/null/undefined/symbol
特点：简单，这些类型，完全按照 JS 中类型的名称来书写
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
5、联合类型 |
如何定义一个变量可以是null也可以是 number 类型?
let arr: (number | string)[] = [1, 'a', 3, 'b']
联合类型的格式：let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释：|（单竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
应用场景：定时器id
// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2
// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]
arr[0] = '1'
arr[2] = true
6、数组类型
两种写法
let 变量: 类型[] = [值1，...]
let 变量: Array<类型> = [值1，...]
// 基本示例
// 写法一：
let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串
拓展示例
如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。
分析，结合联合类型来使用
let arr: (number | string) [] = ['1', 1]
这里有个有优先级的问题，推荐使用 number[] 写法
7、类型别名 type 【重要】
给类型起别名。
格式：type 别名 = 类型
使用
type Str = string // 定义
const str1:Str = 'abc'
const str2:string = 'abc'
作用
- 给类型起别名
- 定义了新类型
给复杂类型起别名
// type NewType = string | number
// let a: NewType = 1
// let b: NewType = '1'
// let arr: NewType[] = [1, '1']
type MyArr = (number | string) []
const arr:MyArr = [1, '1']
别名可以是任意的合法字符串，一般首字母大写
8、TS函数的类型
8.1 函数-单个定义
目标：对函数中涉及的类型进行约定
函数的类型：实际上指的是：函数参数和返回值的类型
格式
// 普通函数
function 函数名(形参1： 类型=默认值, 形参2：类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名 = (形参1： 类型=默认值, 形参2：类型=默认值): 返回值类型 => { }
示例
// 函数声明式
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
return num1 + num2
}
add（1,'1') // 报错
8.2 函数-统一定义函数格式
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
const add = (a:number,b:number):number =>{
return a + b
}
const sub = (a:number,b:number):number =>{
return a - b
}
把拥有相同形参和实参的函数当做一个整体，来定义
const add1 : (n1:number,n2:number)=>number = (a,b)=>{return a+b }
提炼自定义类型
type Fn = (n1:number,n2:number) =>number
const add1 : Fn = (a,b)=>{return a+b }
总结：
分别指定参数和返回值的类型
统一指定函数类型(类型别名来优化， 试用于函数表达式)
8.3 函数返回值是void
目标：掌握函数的返回值是void的情况
void 类型
如果函数没有返回值，那么，函数返回值类型为：void
function greet(name: string): void {
console.log('Hello', name)
//
}
如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足
- 不写return
- 写return ，但是后面不接内容
- 写return undefined
// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}
// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显式的 return undefined 才可以
const add = (): undefined => {
// 此处，返回的 undefined 是 JS 中的一个值
return undefined
}
- void和undefined的区别
a. 如果函数没有指定返回值，调用结束之后，值是undefined
b. 当不能直接声明返回值是undefinedfunction add(a:number, b:number): undefined { // 这里的会报错 console.log(a,b) }
8.4 函数-可选参数 ?
使用函数实现某个功能时，参数可以传也可以不传。
写法：在可选参数名的后面添加 ?（问号）
function mySlice(start?: number, end?: number): void {
console.log('起始索引：', start, '结束索引：', end)
}
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
面试题：可选参数 和 参数默认值的区别？
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。
注意：它们不能一起使用。优先使用默认值
9、对象类型
9.1 单独使用
给对象指定类型
const 对象名: { // 注意：冒号
属性名1：类型1，
属性名2：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2 }
// 可选属性用 ?
const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }
// 示例
const goodItem:{name: string, price: number, func: ()=>string } = {
name: '手机',
price: 2000,
func:function(){ return '打电话' }
}
说明:
- 使用
{}来描述对象结构 - 属性采用属性名: 类型的形式，如果是多行，可以省略,
- 方法采用
方法名(): 返回值类型的形式 - 可选使用
?
9.2 对象类型-类型别名 type
目标：用类型别名来简化定义对象的类型的方式
思路：把类型注解封装一下，定义类型
示例
// 创建类型别名
type Person = {
name: string，
age: number
sayHi(): void
}
// 使用类型别名作为对象的类型：
let person: Person = {
name: '小花',
age: 18
sayHi() {}
}
function f1 (p: Persion) :void {
}
10、对象类型-接口 【重要】
10.1 interface
目标：掌握接口的使用
场景：当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。
类型别名， Type
接口, interface
格式
interface 接口名 {
属性1: 类型1,
属性2: 类型2,
}
示例
interface IGoodItem {
name: string, price: number, func: ()=>string
}
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
const good2: IGoodItem = {
name: '手机',
price: 2000,
func: function() {
return '打电话'
}
}
解释：
- 使用 interface 关键字来声明接口
- 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
- 声明接口后，直接使用接口名称作为变量的类型
10.2 interface接口 和 type类型别名 的对比
- 相同点：都可以给对象指定类型
- 不同点:
接口，只能为对象指定类型。它可以【继承】。
类型别名，可以为任意类型指定别名
推荐：能使用 type 就使用 type
// 接口的写法-------------
interface IPerson {
name: string,
age: number
}
const user1：IPerson = {
name: 'a',
age: 20
}
// type的写法-------------
type Person = { // 注意：=
name: string,
age: number
}
const user2：Person = {
name: 'b',
age: 20
}
10.3 接口继承 extends
目标：掌握接口的继承
背景：比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }
分析：将多个接口之间有相同的属性或方法抽离出来，通过继承来实现复用。
// 继承格式
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
...
}
// 接口继承的示例
interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
z: number
}
解释：
使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)
11、元组 Tuple 【了解】
使用场景：经纬度、使用x,y来记录鼠标的位置、可以使用数组来记录坐标。
元组是另一种特殊的数组：
- 它约定了的
元素个数 - 它约定了特定
索引对应的数据类型
let position: [number, number] = [39.5427, 116.2317]
示例：模拟定义useState。
useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
n = n1
}
return [n, setN]
}
const [num ,setNum] = useState(10)
12、字面量类型
单个字面量没有什么用处，它一般和联合类型 一起使用， 用来表示一组明确的可选值列表。
个人理解：更精确、严谨的字符串类型。
例如：约定 Gender类型只能取girl和boy这两个字符串其中之一。
type Gender = 'girl' | 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误
18.2 示例
- redux 中的actionType。它只能取固定值
type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
if(type === 'ADD_TODO')
}
- 游戏中，游戏的方向键值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，写上''，就会有类型提示：
changeDirection('up')
优势：相比于 string 类型，使用字面量类型更加精确、严谨
13、枚举enum 【了解】
定义：
enum，枚举。它用来描述一个值，该值只能是 一组命名常量中的一个。
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。
定义格式：enum 枚举名 { 可取值1,可取值2,.. }
说明：使用格式：枚举名.可取值
// 定义枚举类型
enum Direction { Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)
注意事项：
- 约定枚举名称以大写字母开头
- 枚举中的多个值之间通过 ,（逗号）分隔
- 定义好枚举后，直接使用枚举名称作为类型注解
枚举-枚举的值
枚举的值：枚举类型和ts中其他的类型不一样，枚举类型不仅仅是类型，还是一个值。
枚举enum和 类型别名type的区别
type定义的类型是没有值的
type NewType = number | string
console.log(NewType) // 输出类型是没有意义的
枚举定义的类型是有值的。
// 创建枚举
enum Direction { Up, Down, Left, Right }
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
console.log(Direction.Up)
也可以使用tsc给编译一下来做对比
数字枚举
默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值
当然，也可以给枚举中的成员初始化值
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }
字符串枚举
字符串枚举：枚举成员的值是字符串
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值
小结
枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效
枚举类型的应用
用后端用0,1来标识性别，但是0，1在代码中不好读。
enum Gender {
girl,
boy
}
type User = {
name: string,
gender: Gender
}
const u1: User = {
name: '小花',
gender: Gender.girl
}
console.log(u1)
14、any 类型
any: 任意的。当类型设置为 any 时，就取消了类型的限制。
let obj: any = { x: 0 }
obj.bar = 100
obj()
const n: number = obj
解释: 不会有任何类型错误提示，即使可能存在错误（编译时不报错，可是运行时会报错）
使用any的场景
函数就是不挑类型。 例如，console.log() ； 定义一个函数，输入任意类型的数据，返回该数据类型
临时使用 any 来“避免”书写很长、很复杂的类型
隐式 any：
- 声明变量不提供类型也不提供默认值
- 定义函数时，参数不给类型
原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
15、类型断言【重要】
两种执行类型断言的方法：值 as 类型或 <类型>值
type User = {
name: string,
age: number
}
const u1 = {} as User
// const u1 = <User>{}
console.log(u1.name) // 这里就会有提示
链接: 类型断言详细参考地址
16、类型查询 typeof
TS 提供 typeof 操作符：可以在类型上下文中引用变量或属性的类型（）
个人理解：逆向解析数据类型
const res = { name: '小花', city: '武汉', skills: ['js', 'css'] }
function fn(obj) {
// 这里写obj.没有提示
// obj.
}
fn(res)
怎么解决？
typeof
JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型
console.log(typeof ‘Hello world’) // ?
使用场景：根据已有变量的值，反向推断出获取该值的类型，来简化类型书写
格式：type 类型 = typeof 常量
const res = { name: '小花', city: '武汉', skills: ['js', 'css'] }
type Stu = typeof res
function fn(obj:Stu) {
// 这里写 obj. 就会有提示
obj.skills
}
fn(res)
注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）
17、泛型
创建一个 fn 函数，它的特点是： 传入什么类型的数据就返回什么类型的数据。 也就是说，参数和返回值类型相同。
function fn(value: number): number { return value }
比如，fn(10) 调用以上函数就会直接返回 10 本身。但是，该函数声明只接收数值类型，无法用于其他类型
思考：any 能做到么？
function fn(value: any): any { return value }
不能。它没有了类型保护，也没有严格限制返回值的类型和输入值的类型一致。
泛型概念：就是可以适用于多个类型，使用类型变量比如T帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。
本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数
泛型-泛型函数
创建泛型函数的格式
function fn<Type>(value: Type): Type { return value }
// 上面的Type只是一个名字而已，可以改成其他的
function fn<T>(value: T): T { return value }
语法：在函数名称的后面写 <>(尖括号)，尖括号中添加类型变量，比如此处的 Type。
类型变量 Type，是一种特殊类型的变量，它处理类型而不是值
该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)
因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
类型变量 Type，可以是任意合法的变量名称
调用泛型函数的格式
const num = fn<number>(10)
const str = fn<string>('a')
语法：在函数名称的后面添加 <>(尖括号)，尖括号中指定具体的类型，比如，此处的 number
当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到
此时，Type 的类型就是 number，所以，函数fn参数和返回值的类型也都是 number
同样，如果传入类型 string，函数 id 参数和返回值的类型就都是 string
这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全
小结
- 泛型的格式？
function fn(valueType):Type {return value} - 泛型的作用？
代码复用与类型安全
泛型-类型推断简化函数调用
function fn<T>(value: T): T { return value }
// 省略 <number> 调用函数
let num = fn(10)
let str = fn('a')
在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用
此时，TS 内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量 Type 的类型
比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型
推荐：使用这种简化的方式调用泛型函数，使代码更短，更易于阅读
说明：当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数
案例
下面的react代码对我们理解泛型有帮助
// js
const [num, setNum] = useState(10)
// ts, 用泛型指定类型
const [num, setNum] = useState<number>(10)
cont inputRef = useRef(null)
const onClick = () => {
console.log(inputRef.current.value) // ts在这里会报错
}
<input type="text" ref={inputRef} />
// 改正
cont inputRef = useRef<HTMLInputElement>(null)
const onClick = () => {
console.log(inputRef.current.value) // 正确
}
泛型-练习
模拟实现useState的声明
// useState它接收一个任意类似的数据，返回一个数组。数组的第一个元素的类型与入参一致； 数组的第二个元素是一个函数，函数的入参类型和返回值类型与useState的入参一致
function useState() {}
const arr1 = useState('123')
const arr2 = useState(123)
要求： 鼠标放上去有对应的提示
function useState<T>(p:T): [T,(p:T)=>T] {
const t = (p: T):T => {
return p
}
return [p, t]
}
泛型-泛型约束
默认情况下，泛型函数的类型变量 T 可以代表多个类型，这导致无法访问任何属性
比如，fn(‘a’) 调用函数时获取参数的长度：
function fn<T>(value: T): T {
// 这里value. 不会有提示
console.log(value.length)// 这里会报错
return value
}
fn('a')
解释：Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length
此时，就需要为泛型添加约束来收缩类型(缩窄类型取值范围)
添加泛型约束收缩类型，主要有以下两种方式：
- 指定更加具体的类型
- 添加约束
指定更加具体的类型
比如，：可以接收任意类型的数组。
将类型修改为 Type[](Type 类型的数组)，因为只要是数组就一定存在 length 属性，因此就可以访问了
function fn<Type>(value: Type[]): Type[] {
console.log(value.length)
return value
}
添加约束
比如，要求传入T类型必须要有length属性。
// 创建一个接口
interface ILength { length: number }
// T extends ILength 添加泛型约束
function fn<T extends ILength>(value: T): T {
console.log(value.length)
return value
}
fn('abc') // Ok
fn([1,2,3]) // Ok
解释:
创建描述约束的接口 ILength，该接口要求提供 length 属性
通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
该约束表示：传入的类型必须具有 length 属性
注意:传入的实参(比如，数组)只要有 length 属性即可（类型兼容性)
示例
function setElement<Type extends HTMLElement>(element:Type):Type {
console.log(element.innerText) // 这里的.会有语法提示
return element
}
泛型-多个类型变量
泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')
解释:
添加了第二个类型变量 Key，两个类型变量之间使用 , 逗号分隔。
keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是：‘name’ | ‘age’
类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性
// Type extends object 表示： Type 应该是一个对象类型，如果不是 对象 类型，就会报错
// 如果要用到 对象 类型，应该用 object ，而不是 Object
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key]
}
getProperty({a:1, b:2}, 'a')
泛型接口
泛型接口：在接口中使用泛型来使用，以增加其灵活性，增强其复用性
interface MyArray {
length: number,
push(n: number):void,
pop():number,
reverse():number[]
}
let obj: MyArray = {
id(value) { return value },
ids() { return [1, 3, 5] }
}
定义
interface 接口名<类型变量> {
}
在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。
接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。
使用泛型接口时，需要显式指定具体的类型
拓展
实际上，JS 中的数组在 TS 中就是一个泛型接口。
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach
const nums = [1, 3, 5]
// 鼠标放在 forEach 上查看类型
nums.forEach
解释:当我们在使用数组时，TS 会根据数组的不同类型，来自动将类型变量设置为相应的类型
技巧:可以通过 Ctrl + 鼠标左键(Mac：Command + 鼠标左键)来查看具体的类型信息
泛型工具类型
泛型工具类型:TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作
说明:它们都是基于泛型实现的(泛型适用于多种类型，更加通用)，并且是内置的，可以直接在代码中使用。 这些工具类型有很多，先来学习以下3个:
Partial
Readonly
Pick<Type, Keys>
Partial
Partial用来基于某个Type来创建一个新类型，新类型中所有的属性是可选的。
格式
type OldType = {}
type newType = Partial(OldType)
示例
用来构造(创建)一个类型，将 Type 的所有属性设置为可选。
type Props = {
id: string
children: number[]
}
type PartialProps = Partial<Props>
解释:构造出来的新类型 PartialProps 结构和 Props 相同，但所有属性都变为可选的。
Readonly
Readonly 用来构造一个类型，将 Type 的所有属性都设置为 readonly(只读)。
type Props = {
id: string
children: number[]
}
type ReadonlyProps = Readonly<Props>
解释:构造出来的新类型 ReadonlyProps 结构和 Props 相同，但所有属性都变为只读的。
let props: ReadonlyProps = { id: '1', children: [] }
// 错误演示
props.id = '2'
当我们想重新给 id 属性赋值时，就会报错:无法分配到 “id” ，因为它是只读属性。
Pick
Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。
type Props = {
id: string
title: string
children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
解释:
Pick 工具类型有两个类型变量:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。
以下内容：查看原文
原文链接：https://blog.csdn.net/weixin_46185369/article/details/121512287
React-配合TS-创建新项目、 tsconfig的介绍、类型声明文件
其他学习：declare、声明函数的方式、函数的6大类型
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
