一、類(lèi)型推論

類(lèi)型推論，顧名思義就是指類(lèi)型在哪里如何被推斷。在TS語(yǔ)法中，如果有些沒(méi)地方有明確指出類(lèi)型，類(lèi)型推論就會(huì)幫助提供類(lèi)型，即聲明變量時(shí)，不賦給類(lèi)型，就會(huì)觸發(fā)類(lèi)型推論。

1、最佳通用類(lèi)型

最佳通用類(lèi)型就是指，在一個(gè)或者多個(gè)表達(dá)式中，變量的類(lèi)型會(huì)從這些表達(dá)式中的所有類(lèi)型來(lái)推斷出一個(gè)最合適的通用類(lèi)型。

舉個(gè)例子：

let brand = 'YSL'
brand = 123

當(dāng)定義一個(gè)變量brand，變量brand的類(lèi)型被推斷為字符串，但是后來(lái)修改值為另外一種類(lèi)型，如number，boolean等，TS就會(huì)很貼心的提示不能將其他類(lèi)型分配給字符串。然而這只是從單個(gè)表達(dá)式里面推斷，如果是多個(gè)表達(dá)式呢？又會(huì)如何推斷呢？例如：

let money = [1, 'yuan', null]
money = [123]
money = ['hello']
money = [null]?
?
money = [{ name: 'ducky' }]//錯(cuò)誤提示

可見(jiàn)，當(dāng)需要從幾個(gè)表達(dá)式中推斷類(lèi)型時(shí)候，會(huì)使用這些表達(dá)式的類(lèi)型來(lái)推斷出一個(gè)最合適的通用類(lèi)型---稱(chēng)為最佳通用類(lèi)型。當(dāng)有多個(gè)表達(dá)式時(shí)，為了推斷money的類(lèi)型，必須要考慮所有元素的類(lèi)型。 這里有三種選擇： number，string和null。 計(jì)算通用類(lèi)型算法會(huì)考慮所有的候選類(lèi)型，并給出一個(gè)兼容所有候選類(lèi)型的類(lèi)型。那如果想要的類(lèi)型不在候選名單上，又該如何推論呢？例如：

function Animal() {
    console.log('animal');
}
function Food() {
    console.log('food');
}
function Fruit() {
    console.log('fruit');
}
let target= [new Animal(), new Food(), new Fruit()]

如果想讓terget的類(lèi)型被推斷為People[]類(lèi)型，但是數(shù)組里的候選類(lèi)型有三種，沒(méi)有People[]類(lèi)型，這肯定是不能推斷出結(jié)果的。那怎么辦呢？這種情況下，當(dāng)候選類(lèi)型不能使用的時(shí)候，我們必須明確地指出類(lèi)型：

let target:People[]= [new Animal(), new Food(), new Fruit()]

此時(shí)，如果沒(méi)有找到最佳通用類(lèi)型的話，target會(huì)被推斷為聯(lián)合數(shù)組類(lèi)型：(Animal|Food|Fruit)[]

2、上下文類(lèi)型

上下文類(lèi)型取決于表達(dá)式的類(lèi)型和其所處的位置，例如：

window.onclick = function(e) {
    console.log(e);  //報(bào)錯(cuò)提示
};

會(huì)出現(xiàn)這樣的報(bào)錯(cuò)提示：[ts] Parameter :'e' implicitly has an 'any' type， but a better type may be inferred from usage.，TS類(lèi)型檢查器使用window.onclick函數(shù)的類(lèi)型來(lái)推斷右邊函數(shù)表達(dá)式的類(lèi)型，從而推出e參數(shù)的類(lèi)型，如果函數(shù)表達(dá)式不是在上下文類(lèi)型的位置，則參數(shù)e具有any類(lèi)型。我們知道，any表示任意類(lèi)型， 可以被任何類(lèi)型分配，也可以分配給任何類(lèi)型;任意類(lèi)型，是所有類(lèi)型的子類(lèi)型，當(dāng)被賦予any類(lèi)型的時(shí)候，就意味著跟JS運(yùn)行一樣了。那這里怎么改呢？既然已經(jīng)提示了e具有any類(lèi)型，那就明確e的類(lèi)型為any就好了。一旦這個(gè)函數(shù)表達(dá)式有了明確的參數(shù)類(lèi)型注解，上下文類(lèi)型就會(huì)被忽略。

二、類(lèi)型斷言

類(lèi)型斷言是指：當(dāng)不確定一個(gè)聯(lián)合類(lèi)型的變量到底是哪種類(lèi)型的時(shí)候，我們只能訪問(wèn)這個(gè)聯(lián)合類(lèi)型的所有類(lèi)型里共有的屬性或者方法，但是有的時(shí)候就是需要在還不確定類(lèi)型的情況下就訪問(wèn)其中一個(gè)類(lèi)型的屬性和方法。類(lèi)型斷言可以用來(lái)手動(dòng)指定一個(gè)值的類(lèi)型。

類(lèi)型斷言不是類(lèi)型轉(zhuǎn)換，斷言成一個(gè)聯(lián)合類(lèi)型中不存在的類(lèi)型毫無(wú)疑問(wèn)是不被允許的。

語(yǔ)法：<類(lèi)型>值或者值 as 類(lèi)型。

舉個(gè)例子：

function getFullName(fullname: string | number): number {
    if (fullname.length) {
        return fullname.length;
    } else {
        return fullname.toString().length;
    }
}
getFullName('hhhhhhhhh')

如上代碼，看上去邏輯好像一點(diǎn)問(wèn)題也沒(méi)有，但是就是會(huì)給你報(bào)錯(cuò)Property 'length' does not exist on type 'string | number' 。這個(gè)時(shí)候，肯定不是換成JS來(lái)寫(xiě)，而是通過(guò)類(lèi)型斷言來(lái)讓代碼順利執(zhí)行，改造如下：

function getFullName(fullname: string | number): number {
    // if ((<string>fullname).length) {
    if (fullname as string) {
        return (<string>fullname).length
    } else {
        return fullname.toString().length
    }
}
getFullName('hhhhhhhhh')

那么理解下面的代碼，對(duì)你來(lái)說(shuō)肯定就是小菜一碟啦~：

let greet: any = 'hello'
let greetLength1: number = (<string>greet).length
let greetLength2: number = (<string>greet).length
console.log(greetLength1);//5
console.log(greetLength2);//5
?
interface Ob1 {
    name: string,
}
interface Ob2 {
    name: number,
}
let myOb: Ob1 | Ob1 = {
    name: '123'
}
let obLength: number = (<string>myOb.name).length
console.log(obLength);//3

附：類(lèi)型別名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

總結(jié)

到此這篇關(guān)于TypeScript類(lèi)型推論與類(lèi)型斷言的文章就介紹到這了,更多相關(guān)TS類(lèi)型推論與類(lèi)型斷言?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論