目錄

implements字句

泛型基本使用

泛型約束

泛型接口

泛型類

補充類型

unknown類型

map對象

條件類型

映射類型

---

implements字句

類可以實現接口，使用笑鍵字implements

可以使用一個implements子句來檢查一個類，是否滿足了一個特定的接口。如果一個類不能正確地實現它,就會發出一個錯誤

注意點:

實現一個帶有可選屬性的接口并不能創建該屬性

只要一個接口繼承了某個類.那么就會繼承這個類中所有的屬性和方法,但是只會繼承屬性和方法的聲明,不會繼承屬性和方法實現

與extends的區別

extends:繼承某個類,繼承之后可以使用父類的方法，也可以重寫父類的方法

implements:繼承某個類，必須重寫才可以使用

interface IPerson{name:stringage:numbersex?:stringshow():void } interface Imusic{music:string } class Person implements IPerson,Imusic{name: string='許嵩'age:number=20sex:string='男'music:string='廬州月'show(){console.log(`我是${this.name}，今年${this.age}歲了，我唱過${this.music}`);} } let a = new Person() a.show()interface Ipon extends Person{aaa:string } class IPon extends Person implements IPon{aaa: string='周杰倫' } let b = new IPon() console.log(b.aaa);

泛型基本使用

泛型可以理解為寬泛的類型，通常用于類和函數。使用的時候我們再指定類型

泛型不僅可以讓我們的代碼變得更加健壯,還能讓我們的代碼在變得健壯的同時保持靈活性和可重用性

通過用<T>來表示，放在參數的前面

let getArray = <T>(value:T,items:number):T[]=>{return new Array(items).fill(value) } let a = getArray<string>('周杰倫',10) console.log(a);

泛型約束

在TS中，我們需要嚴格的設置各種類型，我們使用泛型之后，將會變得更加靈活，但同時也將會存在一些問題我們需要對泛型進行約束來解決這些問題

interface Iaa{length:number } function aa<T extends Iaa>(arr:T):number{return arr.length } aa('大家撒') aa([1,2,5,8,9,6,3])let p = aa(['請求','王五']) console.log(p);

泛型接口

將泛型與接口結合起來使用，可以大大簡化我們的代碼，增加我們的代碼可讀性。

泛型也可以使用默認值

interface IPerson<T1=string,T2=number>{name:T1age:T2}let p:IPerson={name:'王五',age:20}console.log(p);

泛型類

泛型類看上去與泛型接口差不多。泛型類使用(）括起泛型類型，跟在類名后面。

class Person<T1,T2>{name:T1age:T2sex:T1constructor(name:T1,age:T2,sex:T1){this.name = namethis.age = agethis.sex = sex} }let p = new Person('周杰倫',20,'男') console.log(p); let p1 = new Person<string,number>('許嵩',20,'男') console.log(p1); let p2:Person<string,number> = new Person('林俊杰',20,'男') console.log(p2);

補充類型

unknown類型

unknown類型代表任何值。這與any類型類似，但更安全，因為對未知unknown值做任何事情都是不合法的。unknown類型被稱作安全的any

任何類型都可以賦值給unknown類型

let str:unknown str = 18 str = '王五' str = true

不能將unknown類型賦值給其他類型

let val:unknown = 18; let num:number; // num=val; //報錯

適用類型斷言

num = val as number

使用類型縮小

if(typeof val == 'number'){num == val }

unknown與其他任何類型組成的交叉類型最后都是其他類型

type MyType = number & unknown type MyType2 = unknown & boolean let a:MyType = 18 let b:MyType2 = true

unknown除了與any以外，與其他任何類型組成的聯合類型最后都是unknown類型

type MyType3 = unknown | any type MyType4 = unknown | number type MyType5 = unknown | string | boolean

never類型是unknown類型的子類型

type MyType6 = never extends unknown ? true:false

map對象

Map對象保存鍵值對，并且能夠記住鍵的原始插入順序。

任何值(對象或者原始值)都可以作為一個鍵或一個值。

Map 是ES6中引入的一種新的數據結構

可以使用for of進行迭代

Map相關的函數與屬性:

map.clear()-移除Map對象的所有鍵/值對。

map.set()-設置鍵值對，返回該Map對象。

map.get()-返回鍵對應的值，如果不存在，則返回undefined。

map.has()-返回一個布爾值，用于判斷Map中是否包含鍵對應的值。

map.delete()–刪除Map中的元素，刪除成功返回true，失敗返回false。

map.size -返回Map對象鍵/值對的數量。

map.keys()-返回一個lterator對象，包含了Map對象中每個元素的鍵。

map.values()-返回一個新的Ilterator對象，包含了Map對象中每個元素的值。

// 創建map對象 let aa = new Map(); // 設置map對象 aa.set("周杰倫",1) aa.set("許嵩",1) aa.set("林俊杰",1) // 獲取map對象的值 console.log(aa.get('許嵩')); // 清空map對象 // aa.clear() // console.log(aa); // 判斷map對象中是否包含鍵對應的值 返回true或false console.log(aa.has('許嵩')); // 刪除map對象中的元素 返回true或false console.log(aa.delete('許嵩')); // 返回map對象鍵/值的數量 console.log(aa.size); // 循環map對象中的鍵 for(let a of aa.keys()){console.log(a); } // 循環map對象中的值 for(let a of aa.values()){console.log(a); } // 對象解析 for(let [a,b] of aa){console.log(a,b); }

條件類型

條件類型的形式看起來有點像JavaScript中的條件表達式

T extends U ? TrueType : FalseType

應用場景:解決函數重載問題

條件類型

interface Ia{name:string } interface Ib{age:number } type c<T>=T extends string?string:any type res = c<string>

應用場景 解決函數重載問題

type Cond<T> = T extends string?Ia:Ib function reLoad<T extends number|string>(idOr:T):Cond<T>{throw "" } let res1 = reLoad('王世鑫') let res2 = reLoad(20)

映射類型

Record 映射類型

它會將一個類型的所有屬性值都映射到另一個類型上并創造ige新的類型

type Name ="person"|"animal" type Person={name:stringage:number } type NewType=Record<Name,Person> let res :NewType ={person:{name:"克蘭",age:18},animal:{name:"小小",age:3}}console.log(res);

總結

以上是生活随笔為你收集整理的ts泛型和补充类型基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。