一桃笙、泛型是什么?有什么作用
當我們定義一個變量不確定類型的時候有兩種解決方式:
1.使用any
使用any定義時存在的問題:雖然 以 知道傳入值的類型但是無法獲取函數(shù)返回值的類型岔霸;另外也失去了ts類型保護的優(yōu)勢
2.使用泛型
泛型指的是在定義函數(shù)/接口/類型時保檐,不預(yù)先指定具體的類型锋拖,而是在使用的時候在指定類型限制的一種特性街夭。
二焊切、泛型用法
1.在函數(shù)中使用泛型
function test <T> (arg:T):T{
console.log(arg);
return arg;
}
test<number>(111);// 返回值是number類型的 111
test<string | boolean>('hahaha')//返回值是string類型的 hahaha
test<string | boolean>(true);//返回值是布爾類型的 true
使用方式類似于函數(shù)傳參扮授,傳什么數(shù)據(jù)類型,T就表示什么數(shù)據(jù)類型专肪, 使用表示刹勃,T也可以換成任意字符串。
2.在接口中使用泛型
// 注意嚎尤,這里寫法是定義的方法哦
interface Search {
<T,Y>(name:T,age:Y):T
}
let fn:Search = function <T, Y>(name: T, id:Y):T {
console.log(name, id)
return name;
}
fn('li',11);//編譯器會自動識別傳入的參數(shù)荔仁,將傳入的參數(shù)的類型認為是泛型指定的類型
- 在類中使用泛型
class Animal<T> {
name:T;
constructor(name: T){
this.name = name;
}
action<T>(say:T) {
console.log(say)
}
}
let cat = new Animal('cat');
cat.action('mimi')
三、泛型約束
1.使用接口約束泛型
interface Person {
name:string;
age:number;
}
function student<T extends Person>(arg:T):T {
return arg;
}
student({name:'lili'});//類型 "{ name: string; }" 中缺少屬性 "age"芽死,但類型 "Person" 中需要該屬性
student({ name: "lili" , age:'11'});//不能將類型“string”分配給類型“number”
student({ name: "lili" , age:11});
2.數(shù)組泛型
let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]
四乏梁、泛型工具類型
1.Partial
partial<T>的作用就是將某個類型中的屬性全部變?yōu)榭蛇x項?
示例:
interface Person {
name:string;
age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
return arg;
}
2.Record
Record<K extends keyof any, T>的作用是將K中所有的屬性轉(zhuǎn)換為T類型;示例:
interface PageInfo {
title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
home: { title: "xxx" },
about: { title: "aaa" },
other: { title: "ccc" },
};
3.Pick
Pick<T, K extends keyof T>的作用是將某個類型中的子屬性挑出來关贵,變成包含這個類型部分屬性的子類型遇骑,示例:
interface Todo {
title:string,
desc:string,
time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
title:'吃飯',
time:'明天'
}
4.Exclude
Exclude<T,U>的作用是將某個類型中屬于另一個類型的屬性移除掉,示例:
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
const t:T0 ='b';
5.ReturnType
returnType<T>的作用是用于獲取函數(shù)T的返回類型揖曾,示例:
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error