1. 程式人生 > 其它 >TypeScript之簡單型別&複雜型別

TypeScript之簡單型別&複雜型別

簡單型別

let my_name: string = '333';

void => 返回空值

function getName(str: string): void {
    // 使用void 即 沒有返回值
}
getName('222')

any => 任意型別,這裡當型別不確定的時候,就可以使用 any 任意型別,不到萬不得已不使用

let abc: any
abc = {}

字面量 => 定義什麼,就只能賦值什麼

let animal: 'dog' | 'cat';
animal = 'dog';
animal = 'cat';

複雜型別

陣列 array => 宣告單一指定型別的陣列
let arr: number[] = [1, 2, 3]

元組 tuple => 宣告多個型別的陣列,但長度要一致
let tuple: [number, string] = [2, '4']

介面 interface => 它能很方便的幫我們定義 Object 型別,它是非常的靈活可以描述物件的各種型別

interface device {
    readonly id: 1, // readonly => 不可更改的
    type: string,
    width: number,
    height?: number, // ? => 可以省略
}

let phone: device = {
    id: 1,
    type: 'xiaomi',
    width: 40,
}

函式 funtion => 我們要規定函式的 輸入型別 和 返回型別; 在形參後面接冒號宣告 形參的型別,在 ()後面冒號宣告 返回值型別

function sum(num1: number, num2: number, num3?: number): number {
    return num1 + num2;
}
sum(2, 3) // 傳入多餘的引數,或非指定型別的引數均會報錯
sum(2, 3, 4)

const sum2 = (num1: number, num2: number): number => {
    return num1 + num2;
}

const sum3 = (num1: any, num2: any) => {
    return num1 + num2;
}
interface sum {
    (num1: number, num2: number): number
}

let mySum: sum = sum3

聯合型別 union types => 可以指定哪幾種類型

let union: number | string;
union = '3';
union = 'aaa';

物件 object => let a: object; 是不是沒有什麼意義,因為 js 中物件太多了

let object: { name: string, age: number }
object = {
    name: 'zhangsan',
    age: 18
} // 屬性必須在型別 { name: string; age: number; } 中

斷言 type inference => 我們聲明瞭這個型別為 number | string 它不能呼叫 length 方法,因為不知道到底是number型別還是string型別

  • 寫法一:as => 通過 as 來指定某種具體的型別
function getLength1(params: number | string): number {
    const str = params as string;
    if (str.length) {
        return str.length
    }
    return str.toString().length
}
getLength1('345');
  • 寫法二:<型別>
function getLength2(params: number | string): number {
    const str = <string>params;
    if (str.length) {
        return str.length
    }
    return str.toString().length
}

型別守衛 type guard => 遇到聯合型別的時候,使用 型別守衛可以 縮小範圍
型別守衛 除了 typeof 之外 ,還有 instanceof、 in

function getLength3(params: number | string): number {
    if (typeof params === 'string') {
        return params.length
    }
    return params.toString().length
}