Typescript 數組類型

數組類型定義方式有多種,可見靈活性很強,一塊兒來看看吧。javascript

招式一和招式二

// 招式一
類型[]

// 招式二:泛型
Array<number>
複製代碼

用熟悉的斐波那契數列(Fibonacci sequence)舉例java

// arrayFibonacci.ts
let arrayFibonacci: number[] = [1, 1, 2, 3, 5, 8];
複製代碼

問:上面賦值的數組中有多種類型會怎樣?git

// arrayFibonacci2.ts
let arrayFibonacci2: number[] = [1, 1, '2', false, 5, 8];

// array.ts:1:5 - error TS2322: Type '(string | number | boolean)[]' is not assignable to type 'number'.
複製代碼

錯誤 ❌ 緣由在於 '2', false 是不能分配給純數字類型,要想兼容得用聯合類型(錯誤提示中已給出)?github

// arrayFibonacci3.ts
let arrayFibonacci3: (number | string | boolean)[] = [1, 1, '2', false, 5, 8];
複製代碼

問:給數組定義數字類型,咱們知道數組有不少方法,那 push 一個字符串行不行?typescript

// arrayPush.ts
let arrayPush: Array<number> = [1, 2, 3];
arrayPush.push(5);
arrayPush.push('1');

// 0.0.5/arrayPush.ts:3:16 - error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.
    // 3 arrayPush.push('1');
複製代碼

看來,必須的傳入數字。數組

招式三:接口

// arrayInterface.ts
interface ArrayNumber {
    [index: number]: number
}

let arrayNumberInterface: ArrayNumber = [1, 1, 2, 3, 5];
複製代碼

上面的例子所要表達的是,只要 index 的類型是 number,那麼值的類型必須是 numbermarkdown

問:若是數組中想要存放多種類型怎麼辦?

// arrayAny.ts
let arrayAny: any[] = [1, '1', false, { name: 'ts' }, [1, 1, 2]];

// 或
let arrayAny2: Array<any> = [1, '1', false, { name: 'ts' }, [1, 1, 2]];
複製代碼

問:對於類數組怎麼處理?

不就是在賦值時給變量加上 : Type[] 嘛,能夠試下函數

// arrayArguments.ts
function arrayArguments(){
    let args: number[] = arguments;
    let args2: Array<number> = arguments;
}

// 0.0.5/arrayArguments.ts:2:9 - error TS2740: Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.
    // 2 let args: number[] = arguments;
          
// 0.0.5/arrayArguments.ts:3:9 - error TS2322: Type 'IArguments' is not assignable to type 'number[]'.
    // 3 let args2: Array<number> = arguments;
複製代碼

看來類數組不是像上面想的那麼簡單,還須要專門的類型 IArguments 來定義,IArguments 是內置對象,這個下篇單獨說說它。oop

// arrayArguments2.ts
function arrayArguments2(){
    let args: IArguments = arguments;
}
複製代碼

本次代碼 Githubpost

你能夠...

上一篇:Typescript 對象類型-接口

下一篇:Typescript 函數類型

目錄:Typescript 小書之入門篇

相關文章
相關標籤/搜索