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'
}
]
五、关注我们
点击下方关注我???
评论