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

前端微服务

共 1130字,需浏览 3分钟

 ·

2021-01-04 02:03

公众号:前端微服务
GitHub:https://github.com/yongbolu
作  者:子奕

一、概述

在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[i] = i * 2
console.log(arr_names[i])
}
// 直接初始化数组元素
const sites:string[] = new Array("Google","IE","Taobao","Facebook")

for(let i = 0;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'
}
]

五、关注我们

点击下方关注我???


浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报