1.将部分属性转为可选属性
type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>
interface WindowState {
isMaximized: boolean;
isFullScreen: boolean;
data: string;
count: number;
}
type CreateWindowState = Optional<WindowState, 'isMaximized' | 'isFullScreen'>;
//CreateWindowState相当于如下的OptionalWindowState
interface OptionalWindowState {
isMaximized?: boolean;
isFullScreen?: boolean;
data: string;
count: number;
}
2.联合转交叉类型
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
type A = UnionToIntersection<{ a: (v: number) => void } | { b: (v: string) => void }>;
type B = UnionToIntersection<{a:string} | {b:number}>
3.提取出可选属性
interface ComplexObject{
mandatory:string;
option1?:number;
option2?:boolean;
}
type GetOptional<T> = {
[P in keyof T as T[P] extends Required<T>[P] ? never : P] : T[P];
}
let keys: GetOptional<ComplexObject>
4.泛型函数
//原声函数
function identity<T>(arg: T): T {
return arg;
}
// 使用泛型函数
let output = identity<string>("hello");
console.log(output); // 输出 "hello"
//箭头函数
const identity = <T>(arg: T): T => {
return arg;
}
// 使用泛型箭头函数
let output = identity<string>("hello");
console.log(output); // 输出 "hello"
5.联合,交叉类型
联合类型(Union Types)和交叉类型(Intersection Types)是 TypeScript 中用于组合类型的两种重要概念。
1.联合类型(Union Types): 联合类型表示一个值可以是多种类型之一。使用 |
符号将多种类型列在一起,表示该值可以是这些类型中的任意一种。
// 定义一个变量,可以是 string 或 number 类型
let myVar: string | number;
myVar = "hello";
console.log(myVar); // 输出 "hello"
myVar = 123;
console.log(myVar); // 输出 123
2.交叉类型(Intersection Types): 交叉类型表示将多个类型合并为一个新的类型。使用 &
符号连接多个类型,表示新类型具有所有连接类型的属性。
// 定义一个类型,同时具有 Person 和 Serializable 接口的属性
interface Person {
name: string;
age: number;
}
interface Serializable {
serialize: () => string;
}
type PersonSerializable = Person & Serializable;
const person: PersonSerializable = {
name: "Alice",
age: 30,
serialize: () => JSON.stringify({ name: this.name, age: this.age })
};
console.log(person.serialize()); // 输出 "{"name":"Alice","age":30}"
通过使用联合类型和交叉类型,可以更灵活地组合现有的类型,以满足不同情况下的需求。希望这个简单的介绍能帮助你理解 TypeScript 中的联合类型和交叉类型。如果有任何疑问,请随时提出。
6.MyPick
type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
手写MyPick泛型工具函数,从zhihu文章可以看出他和自带Pick函数是一样的
7.pick
function pick<T,U extends keyof T>(data:T,keys:U[]):{[K in U]:T[K]} {
const temp:any ={}
for(const key of keys){
temp[key] = data[key]
}
return temp
}
interface User {
id: number;
name: string;
age: number;
email: string;
}
const user: User = {
id: 1,
name: 'Alice',
age: 25,
email: 'alice@example.com'
};
const pickedData = pick<User, ('name' | 'age')>(user, ['name', 'age']);
console.log(pickedData); // 输出:{ name: 'Alice', age: 25 }