什么是TypeScript 泛型？

• 在定義函數(shù)，接口，類的時候不能預(yù)先確定使用的數(shù)據(jù)類型，而是在調(diào)用使用這些函數(shù)，接口，類的時候才能確定的數(shù)據(jù)類型；

1，單個泛型的參數(shù)

例如通過使用any這種方式，value1的類型隨著傳入的類型數(shù)據(jù)而變化：

function myfunction01(value1: any, value2: number): any[]{
	let arr: any[] = [value1, value2]
	return arr
}
myfunction01('123456', 111);
myfunction01(123456, 111);

改為泛型之后：

function myfunction01<T>(value1: T, value2: T): T[]{
	// let arr: T[] = [value1, value2]
	let arr: Array<T> = [value1, value2]
	return arr
}
myfunction01<string>('123456', '1111');
myfunction01<number>(123456, 111);

2，多個泛型的參數(shù)

function myfunction01<T, X>(value1: T, value2: X): [T, X]{
	return [value1, value2]
}
myfunction01<string, number>('123456', 1111);

3，泛型接口

泛型接口：接口也可以配合泛型來使用，以增加其靈活性，增強(qiáng)其復(fù)用性

interface 接口名<類型變量1,類型變量2> {
  變量:類型變量1,
  變量:類型變量2
}

使用：

interface MyArray<T> {
    length: T,
    data:string[]
    push(n: T): T,
    pop(): void,
    reverse(): T[]
}
const obj: MyArray<number> = {
  length: 11,
  push (o){ return o },
  pop: function () {},
  reverse: () => [1, 2],
  data: ['1', '1']
}

1. 在接口名稱的后面添加 <類型變量>，那么，這個接口就變成了泛型接口。
2. 接口的類型變量，對接口中所有其他成員可見，也就是接口中所有成員都可以使用類型變量。
3. 使用泛型接口時，需要顯式指定具體的類型。

4，泛型工具類型

泛型工具類型:TS 內(nèi)置了一些常用的工具類型，來簡化 TS 中的一些常見操作

說明:它們都是基于泛型實現(xiàn)的(泛型適用于多種類型，更加通用)，并且是內(nèi)置的，可以直接在代碼中使用。 這些工具類型有很多，先來學(xué)習(xí)以下3個:

① Partial

將一個對象類型中的所有屬性變?yōu)榭蛇x屬性；

type User = {
	id: number;name: string;age: number;
}
type UpdatedPerson = Partial<User>;

得到的 UpdatedPerson 類型與下面的類型定義是相同的：

type UpdatedPerson = {
	id?: number;name?: string;age?: number;
}

② Readonly

將Type 所有屬性都設(shè)置為 readonly(只讀)。

type Props =  {
  id: string
  children: number[]
}
type ReadonlyProps = Readonly<Props>

構(gòu)造出來的新類型 ReadonlyProps 結(jié)構(gòu)和 Props 相同，但所有屬性都變?yōu)橹蛔x的。不可修改

③ Pick

Pick<Type, Keys> 從 Type 中選擇一組屬性來構(gòu)造新類型。文章來源地址http://www.zghlxwxcb.cn/news/detail-635716.html

type Props = {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

1. Pick 工具類型有兩個類型參數(shù):1 表示選擇誰的屬性 2 表示選擇哪幾個屬性。 2. 其中第二個類型變量，如果只選擇一個則只傳入該屬性名即可。
2. 第二個類型變量傳入的屬性只能是第一個類型變量中存在的屬性。
3. 構(gòu)造出來的新類型 PickProps，只有 id 和 title 兩個屬性類型。

到了這里，關(guān)于TypeScript 泛型的概念和基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！