TypeScript基礎(chǔ)類型與聯(lián)合類型

Awbeci 發(fā)布于2019-08-23 18:39 / 3185人閱讀

摘要：在使用的過程中，它最大的特點其實就是數(shù)據(jù)類型的定義。聯(lián)合類型定義實際項目中，數(shù)據(jù)類型肯定是各種各樣的，為我們提供了各種組合類型的定義。

TypeScript對它的學習其實是在前年就開始了，后面一直沒有機會在項目中使用，直到最近我司開發(fā)小程序，使用京東的taro才
算真正了。使用的過程中，發(fā)現(xiàn)對其基本知識點并沒有通透，所以才想到要記錄學習的過程。

在使用的過程中，它最大的特點其實就是數(shù)據(jù)類型的定義。

基礎(chǔ)類型的定義

字符串類型

let name: string = "Mondo"

布爾類型

let isDone: boolean = true

數(shù)字類型

let dec: number = 1

數(shù)組

let list: number[] = [1, 2]
or
let list: Array = [1, 2]

元組Tuple

定義一個已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同

let list: [string, number]
list = ["1", 2]

枚舉

enum Animal { dog = "hei", cat, pig }
let dor: Animal = Animal.dog

Any

定義一個未知數(shù)據(jù)類型的變量

let nothing: any = 2

Void

表示沒有類型，通常用于一個函數(shù)沒有任何返回值

function warnUser(): void {
    console.log("This is void");
}

Null 和 Undefined

默認情況下null和undefined是所有類型的子類型，你可以把他們賦值給任何類型的變量

let u: undefined = undefined
let n: null = null
let dec: string = null

類型斷言

類型斷言好比語言里的類型轉(zhuǎn)換，但是不進行特殊的數(shù)據(jù)檢查和解構(gòu)

let dec: string = "Mondo"
let len: number = (dec).length
or 
let len: number = (dec as string).length

以上是我們在實際運用中常見的幾種基本類型，當然還有其他類型，比如Never，Object。

聯(lián)合類型定義

實際項目中，數(shù)據(jù)類型肯定是各種各樣的，TypeScript為我們提供了各種組合類型的定義。

let list = [
{
    name: "Mondo",
    age: 29
]

以上是我們常見的數(shù)據(jù)格式，上面說了定義數(shù)組let list: number[]，可是在這條數(shù)據(jù)中數(shù)組里面元素是Object，這里要使用TypeScript的接口來定義

接口

關(guān)鍵詞interface來定義一個接口

interface IPerson {
    label: string
}
function getPerson(person:IPerson): void {
    console.log(person.label);
}
let obj = { size: 10, label: "mondo" };
getPerson(obj); // mondo

可選屬性

interface Iperson {
    name: string;
    cap?: string;
}
function getPerson(person:IPerson): void {
    console.log(person.name);
}
let obj = { name: "mondo" };
getPerson(obj); // mondo

只讀屬性

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

interface Iperson {
    readonly name: string;
    age: number;
}
let obj: Iperson = { name: "mondo", age: 29 };
obj.name = "Imondo" // error

函數(shù)類型

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

上接口的方法是在項目中常用的Object定義。

回到最初的定義數(shù)組，我們可以這么定義

interface Iperson {
    name: string;
    age?: number|string;
}
let list: Iperson[] = [
 {
    name: "Mondo" 
 },
 {
    name: "Imondo",
    age: 29
 },
 {
    name: "IMondo",
    age: "29"
 }
]

總結(jié)

TypeScript只是粗淺的了解它的一些用法，還有很多高級的用法暫時還沒有接觸到，這篇文章也是本人結(jié)合項目中用到的一些常規(guī)用法而寫的總結(jié)文章而已，感謝各位指正。