2020你应该知道的TypeScript学习路线【数组类型】

一、概述

在JavaScript声明数组时，可以不用指定数组的数据类型；而在TypeScript中，声明数组需要指定数据类型，如string、number等。今天小编就带大家一起来学习下TypeScript的声明，如果大家觉得有帮助，记得给小编点个赞，如果想获取更多干货请关注前端微服务公众号，不定期为大家带来干货。

二、使用场景

• 存储多个数据时，声明多个变量就太繁琐了。
• 数组，是用于存放多个数据的集合。
• 有数组：只需要使用一个数组（[]），就可以存储任意多个数据。

  三、TypeScript 声明数组的语法

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

或者直接在声明时初始化：

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

如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。

const numberArr = [1,2,3];           

四、使用案例

4.1 [数据类型 + 方括号] 表示法

// 数字类型
const numberArr: number[] = [1, 2, 3, 4];
// 字符串类型
const stringrArr: string[] = ['1', '2', '3'];
//任意类型
const anyArr: any[] = [1, 'Poplar', 'Phoenix’];
//指定数组初始化大小
const arr_names:number[] = new Array(4)  

for(let i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}
// 直接初始化数组元素
const sites:string[] = new Array("Google","IE","Taobao","Facebook") 

for(let i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}           

4.2 数组泛型

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

4.3 用接口表示数组

/**
  * 数字类型(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 类数组

类数组(Array-like Object)不是数组类型。

参考网址(https://ts.xcatliu.com/basics/built-in-objects.html)

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

4.5 数组中对象类型的定义

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

这种形式看起来比较麻烦，而且如果有同样类型的数组，写代码也比较麻烦，TypeScript 为我们准备了一个概念，叫做类型别名(type alias)。比如刚才的代码，就可以定义一个类型别名，定义别名的时候要以type关键字开始。现在定义一个Lady的别名。

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

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

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'
 }
]           

五、关注我们