目錄

implements字句

泛型基本使用

泛型約束

泛型接口

泛型類

補(bǔ)充類型

unknown類型

map對象

條件類型

映射類型

---

implements字句

類可以實(shí)現(xiàn)接口，使用笑鍵字implements

可以使用一個(gè)implements子句來檢查一個(gè)類，是否滿足了一個(gè)特定的接口。如果一個(gè)類不能正確地實(shí)現(xiàn)它,就會(huì)發(fā)出一個(gè)錯(cuò)誤

注意點(diǎn):

實(shí)現(xiàn)一個(gè)帶有可選屬性的接口并不能創(chuàng)建該屬性

只要一個(gè)接口繼承了某個(gè)類.那么就會(huì)繼承這個(gè)類中所有的屬性和方法,但是只會(huì)繼承屬性和方法的聲明,不會(huì)繼承屬性和方法實(shí)現(xiàn)

與extends的區(qū)別

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

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

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);

泛型基本使用

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

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

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

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

泛型約束

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

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);

泛型接口

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

泛型也可以使用默認(rèn)值

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);

補(bǔ)充類型

unknown類型

unknown類型代表任何值。這與any類型類似，但更安全，因?yàn)閷ξ粗猽nknown值做任何事情都是不合法的。unknown類型被稱作安全的any

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

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

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

let val:unknown = 18; let num:number; // num=val; //報(bào)錯(cuò)

適用類型斷言

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以外，與其他任何類型組成的聯(lián)合類型最后都是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對象保存鍵值對，并且能夠記住鍵的原始插入順序。

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

Map 是ES6中引入的一種新的數(shù)據(jù)結(jié)構(gòu)

可以使用for of進(jìn)行迭代

Map相關(guān)的函數(shù)與屬性:

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

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

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

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

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

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

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

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

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

條件類型

條件類型的形式看起來有點(diǎn)像JavaScript中的條件表達(dá)式

T extends U ? TrueType : FalseType

應(yīng)用場景:解決函數(shù)重載問題

條件類型

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

應(yīng)用場景 解決函數(shù)重載問題

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 映射類型

它會(huì)將一個(gè)類型的所有屬性值都映射到另一個(gè)類型上并創(chuàng)造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);

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。