TypeScript 映射类型

ts 映射类型

• Product 类型
• MyReadOnly 类型
• MyOptional 类型
• MyNullable 类型
• MyWritable 类型
• MyNecessary 类型

映射类型是指基于现有类型产生新的类型
通过遍历语法拷贝原有类型 在拷贝类型的基础上进行修改从而产生新的类型

如何拷贝原有类型？
拷贝原有类型主要拷贝的是两部分 原有类型中有哪些属性 属性的值是什么类型？

interface Product {
	name: string;
	price: number;
}

type NProduct = {
	// 如何拷贝原有类型中的属性
	// keyof Product => name | price
	// k in (name | price)
	// name
	// price

	// 如何获取属性（name, price） 值原有的类型
	// 类型[属性名称] 得到的结果就是属性值得类型
	// Product[K] => Product[name] => string
	// Product[K] => Product[price] => number
	
	[k in keyof Product]: Product[k];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Product 类型

目标：基于 Product 类型，创建新类型，新类型中的属性都是只读的。

interface Product {
	name: string;
	price: number;
}

type ReadOnlyProduct = {
	readonly name: string;
	readonly price: number;
};
1
2
3
4
5
6
7
8
9

type ReadOnlyProduct = {
	readonly [K in keyof Product]: Product[K];
};

let product: ReadOnlyProduct = {
	name: "test",
	prie: 100,
};

peoduct.name = "hello";
1
2
3
4
5
6
7
8
9
10

MyReadOnly 类型

目标：创建 MyReadOnly 类型，通过泛型参数接收旧的类型，返回新类型，新类型中的属性都是只读的。

type MyReadOnly<T> = {
	readonly [K in keyof T]: T[K];
};

let product: MyReadOnly<Product> = {
	name: "test",
	price: 100,
}

product.name = "hello"
1
2
3
4
5
6
7
8
9
10

MyOptional 类型

目标：创建 MyOptional 类型，通过泛型参数接收旧的类型，返回新类型，新类型中的属性都是可选的。

type MyOptional<T> = {
	[K in keyof T]?: T[K];
};
1
2
3

MyNullable 类型

目标：创建 MyNullable 类型，通过泛型参数接收旧的类型，返回新类型，新类型中的属性都是可以为 null 的。

type MyNullable<T> = {
	[K in keyof T]: T[K] | null;
}
1
2
3

MyWritable 类型

目标：创建 MyWritable 类型，通过泛型参数接收旧的类型，返回新类型，新类型中的属性都是可写的。

interface User {
	readonly username: string;
	
}
type MyWritable<T> = {
	-readonly [K in keyof T]: T[K];
}
const userCanWrite: MyWritable<User> = {
	username: "李四",
}

userCanWrite.username = "王五"
1
2
3
4
5
6
7
8
9
10
11
12

MyNecessary 类型

目标：创建 MyNecessary 类型，通过泛型参数接收旧的类型，返回新类型，新类型中的属性都是必选的。

interface User {
	username?: string;
}

tyoe MyNecessary<T> = {
	[K in keyof T]-?: T[K];
};

const user: MyNecessary<User> = {}
1
2
3
4
5
6
7
8
9