2020你應(yīng)該知道的TypeScript學(xué)習(xí)路線【聯(lián)合類(lèi)型-接口】

公眾號(hào)：前端微服務(wù)
GitHub：https://github.com/yongbolu
作 ?者：子奕

一、概述

TypeScript中除了es5中的string、boolean、number、array、null和undefined之外還多了元組類(lèi)型tuple、枚舉類(lèi)型enum、任意類(lèi)型any、void類(lèi)型、never類(lèi)型，除此之外還有一種特殊的類(lèi)型聯(lián)合類(lèi)型，學(xué)過(guò)Java的小伙伴應(yīng)該并不陌生接口這個(gè)名詞，今天小編帶著大家認(rèn)識(shí)下Typescript中的接口是什么樣的，學(xué)完這個(gè)是不是都對(duì)后端的Java又有了更近一步認(rèn)識(shí)，距離全棧開(kāi)發(fā)又近了一步，如果大家覺(jué)得有幫助，記得給小編點(diǎn)個(gè)贊，如果想獲取更多干貨請(qǐng)關(guān)注前端微服務(wù)公眾號(hào)，不定期為大家?guī)?lái)干貨。

二、聯(lián)合類(lèi)型（Union Types）

聯(lián)合類(lèi)型（Union Types）可以通過(guò)管道(|)將變量設(shè)置多種類(lèi)型，賦值時(shí)可以根據(jù)設(shè)置的類(lèi)型來(lái)賦值（注意：只能賦值指定的類(lèi)型，如果賦值其它類(lèi)型就會(huì)報(bào)錯(cuò)）用一句話概括就是聯(lián)合類(lèi)型表示取值可以為多種類(lèi)型中的一種。

三、創(chuàng)建聯(lián)合類(lèi)型的語(yǔ)法格式

Type1|Type2|Type3

四、使用案例

4.1 聲明一個(gè)聯(lián)合類(lèi)型

/**
 * 聯(lián)合類(lèi)型
 */
let type:string|number 
type = 12 
console.log("數(shù)字為 "+ type) 
type = "xunzhaotech" 
console.log("字符串為 " + type)

//錯(cuò)誤代碼
type = true
console.log("布爾類(lèi)型 " + type)

4.2 將聯(lián)合類(lèi)型作為函數(shù)參數(shù)使用

/**
 * 聯(lián)合類(lèi)型參數(shù)
 */
function getName(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else {  
        		let i:number;
                for(i = 0;i                console.log(name[i])
                } 
        } 
} 
getName("xunzhaotech") 
console.log("輸出數(shù)組參數(shù)....") 
getName(["張三","李四"])

4.3 聯(lián)合類(lèi)型數(shù)組

/**
 * 聯(lián)合類(lèi)型數(shù)組
 */
let arr:number[]|string[]; 
let i:number; 
arr = [1,2,4] 
console.log("**數(shù)字?jǐn)?shù)組**")  
 
for(i = 0;i   console.log(arr[i]) 
}  
 
arr = ["張三","李四"] 
console.log("**字符串?dāng)?shù)組**")  
 
for(i = 0;i   console.log(arr[i]) 
}

4.4 接口

關(guān)鍵詞interface來(lái)定義一個(gè)接口

interface Person {
    name: string
}
function getPerson(person:Person): void {
    console.log(person.name);
}
let obj = { age: 10, name: 'xunzhaotech' };
getPerson(obj); // xunzhaotech

4.4.1 可選屬性

interface Person {
    name: string;
    age?: string;
}
function getPerson(person:Person): void {
    console.log(person.name);
}
let obj = { name: 'xunzhaotech' };
getPerson(obj); // xunzhaotech

4.4.2 只讀屬性

擁有只讀屬性不可改變它的值

interface Iperson {
    readonly name: string;
    age: number;
}
let obj: Person = { name: 'zunzhaotech', age: 29 };
obj.name = 'xunzhaotech' // error

4.4.3 函數(shù)類(lèi)型

interface Person {
    (name: string, age: number): boolean;
}
let getPerson:Person = (name, age) => {
    return age > 20;
}
getPerson('xunzhaotech', 29)

4.4.4 常用的Object定義

interface Person {
    name: string;
    age?: number|string;
}
let list: Person[] = [
 {
    name: '王麻子' 
 },
 {
    name: '張三',
    age: 29
 },
 {
    name: '李四',
    age: '29'
 }
]

五、關(guān)注我們

點(diǎn)擊下方關(guān)注我???