TypeScript基礎類型與聯合類型

TypeScript對它的學習實際上是在前年就開始了，後面一直沒有機會在項目中使用，直到最近我司開發小程序，使用京東的taro才
算真正了。使用的過程當中，發現對其基本知識點並無通透，因此纔想到要記錄學習的過程。

在使用的過程當中，它最大的特色其實就是數據類型的定義。

基礎類型的定義

• 字符串類型

let name: string = 'Mondo'

• 布爾類型

let isDone: boolean = true

• 數字類型

let dec: number = 1

• 數組

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

• 元組Tuple

定義一個已知元素數量和類型的數組，各元素的類型沒必要相同

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

• 枚舉

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

• Any

定義一個未知數據類型的變量

let nothing: any = 2

• Void

表示沒有類型，一般用於一個函數沒有任何返回值

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

• Null 和 Undefined

默認狀況下null和undefined是全部類型的子類型，你能夠把他們賦值給任何類型的變量

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

• 類型斷言

類型斷言比如語言裏的類型轉換，可是不進行特殊的數據檢查和解構

let dec: string = 'Mondo'
let len: number = (<string>dec).length
or 
let len: number = (dec as string).length

以上是咱們在實際運用中常見的幾種基本類型，固然還有其餘類型，好比Never，Object。

聯合類型定義

實際項目中，數據類型確定是各類各樣的，TypeScript爲咱們提供了各類組合類型的定義。

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

以上是咱們常見的數據格式，上面說了定義數組let list: number[]，但是在這條數據中數組裏面元素是Object，這裏要使用TypeScript的接口來定義

接口

關鍵詞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

• 函數類型

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

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

回到最初的定義數組，咱們能夠這麼定義

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

總結

TypeScript只是粗淺的瞭解它的一些用法，還有不少高級的用法暫時尚未接觸到，這篇文章也是本人結合項目中用到的一些常規用法而寫的總結文章而已，感謝各位指正。