2020你應(yīng)該知道的TypeScript學(xué)習(xí)路線【數(shù)組類型】

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

一、概述

在JavaScript聲明數(shù)組時(shí)，可以不用指定數(shù)組的數(shù)據(jù)類型；而在TypeScript中，聲明數(shù)組需要指定數(shù)據(jù)類型，如string、number等。今天小編就帶大家一起來(lái)學(xué)習(xí)下TypeScript的聲明，如果大家覺得有幫助，記得給小編點(diǎn)個(gè)贊，如果想獲取更多干貨請(qǐng)關(guān)注前端微服務(wù)公眾號(hào)，不定期為大家?guī)?lái)干貨。

二、使用場(chǎng)景

• 存儲(chǔ)多個(gè)數(shù)據(jù)時(shí)，聲明多個(gè)變量就太繁瑣了。
• 數(shù)組，是用于存放多個(gè)數(shù)據(jù)的集合。
• 有數(shù)組：只需要使用一個(gè)數(shù)組（[]），就可以存儲(chǔ)任意多個(gè)數(shù)據(jù)。

三、TypeScript 聲明數(shù)組的語(yǔ)法

const array_name[:datatype];        //聲明 
array_name = [val1,val2,valn..]    //初始化

或者直接在聲明時(shí)初始化：

const array_name[:data type] = [val1,val2…valn]

如果數(shù)組聲明時(shí)未設(shè)置類型，則會(huì)被認(rèn)為是 any 類型，在初始化時(shí)根據(jù)第一個(gè)元素的類型來(lái)推斷數(shù)組的類型。

const numberArr = [1,2,3];

四、使用案例

4.1 [數(shù)據(jù)類型 + 方括號(hào)] 表示法

// 數(shù)字類型
const numberArr: number[] = [1, 2, 3, 4];
// 字符串類型
const stringrArr: string[] = ['1', '2', '3'];
//任意類型
const anyArr: any[] = [1, 'Poplar', 'Phoenix’];
//指定數(shù)組初始化大小
const arr_names:number[] = new Array(4)  
 
for(let i = 0; i        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}
// 直接初始化數(shù)組元素
const sites:string[] = new Array("Google","IE","Taobao","Facebook") 
 
for(let i = 0;i        console.log(sites[i]) 
}

4.2 數(shù)組泛型

// 數(shù)字類型
let numberArrr: Array<number> = [1, 2, 3, 4];
// 字符串類型
const stringrArr: Array<string> = ['1', '2', '3'];
//任意類型
const anyArr: Array<any> = [1, 'Poplar', 'Phoenix’];

4.3 用接口表示數(shù)組

/**
  * 數(shù)字類型(NumberArray表示只要inde值類型為number，那么值類型必須為number)
  */
interface NumberArray {
	[index: number]: number
}
let numberArrr: NumberArray = [1, 2, 3, 4];
// 字符串類型
interface StringArray {
	[index: number]: string
}
const stringrArr: StringArray = ['1', '2', '3'];
//任意類型
interface AnyArray {
	[index: number]: any
}
const anyArr: AnyArray> = [1, 'Poplar', 'Phoenix’];

4.4 類數(shù)組

類數(shù)組(Array-like Object)不是數(shù)組類型。

參考網(wǎng)址(https://ts.xcatliu.com/basics/built-in-objects.html)

function sum(){let args: number[] = arguments;
}

4.5 數(shù)組中對(duì)象類型的定義

const person: { name: string, age: Number }[] = [
    { name: "張三", age: 18 },
    { name: "李四", age: 28 },
  ];

這種形式看起來(lái)比較麻煩，而且如果有同樣類型的數(shù)組，寫代碼也比較麻煩，TypeScript 為我們準(zhǔn)備了一個(gè)概念，叫做類型別名(type alias)。比如剛才的代碼，就可以定義一個(gè)類型別名，定義別名的時(shí)候要以type關(guān)鍵字開始。現(xiàn)在定義一個(gè)Lady的別名。

type Person = { name: string, age: Number };

有了這樣的類型別名以后，就可以把上面的代碼改為下面的形式了。

 const person:Person [] = [
    { name: "張三", age: 18 },
    { name: "李四", age: 28 },
  ];

這樣定義是完全起作用的，但我們擴(kuò)展屬性就會(huì)報(bào)錯(cuò)，這時(shí)候我們就用類來(lái)解決。

class Person {
    name: string;
    age: number;
  }
  
  const person: Person[] = [
    { name: "張三", age: 18 },
    { name: "李四", age: 28 },
  ];

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

bject定義

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

五、關(guān)注我們

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