第四节:TypeScript 数组类型
数组类型
1. 数组类型声明
在前面数据类型已经了解过,声明数组类的方式有两中, 一种字面量方式, 一种泛型方式(很像JavaScript构造函数)
例如:
// 字面量方式声明数组
let myArr: string[] = ['hello', 'world']
let myArr2: number[] = [20,30]
// 内置泛型方式
// 注释Array<> 使用的是泛型的<> 不是构造函数的()
let myArr3: Array<string> = ['hello', 'world']
let myArr4: Array<number> = [20,30]
还需要注意是字面量方式声明数组类型, 类型不能写在[]内部, 写在内部就变成元组类型
其实两种声明数组类型的方式本质是 同一个
type[]声明的数组类型 只是Array<type>声明数组类型的简写方式
而Array就很像上一节中通用类型中的Box, 所以Array本质就是一个内置的泛型类型
2. readonlyArray 只读数组类型
TypeScript 除了Array<T>类型 还具有一个ReadonlyArray<T>类型,
ReadonlyArray类型和Array 类型很相似,但它是一个特殊的类型,用于描述不应该更改的数组
2.1 Array<T>声明数组
通过Array<T>声明的数组是可以修改的
let arr:string[] = ['无人机', '车辆','巡逻车']
let device: Array<string> = arr
console.log('device', device) // ['无人机', '车辆','巡逻车']
// 修改数组项
device[0] = '自行车'
console.log('device', device) // ["自行车", "车辆", "巡逻车"]
console.log(arr === device) // true
2.2 ReadonlyArray<T>声明数组
通过ReadonlyArray<T>声明的数组不能被修改
let arr:string[] = ['无人机', '车辆','巡逻车']
let device: ReadonlyArray<string> = arr
device[0] = '自行车' // error
// 类型“readonly string[]”中的索引签名仅允许读取
device.push('aa') // error
// 但是ReadonlyArray 类型的数组在新增时报错
// 类型“readonly string[]”上不存在属性“push”, 也及时没有push方法。
很像对象的readonly修饰符,它主要的作用就是提醒工具, 即当我们看到一个通过ReadonlyArray类型注释的变量时,其实就是告知我们,这个数组不可修改
注意, 与Array类型不同, ReadonlyArray只作为类型使用, 不能当成构造函数使用
// 报错: ReadonlyArray 仅表示类型, 但是这里作为值使用
new ReadonlyArray('hello','world')
而Array不仅仅是TypeScript中的类型, 还是JavaScript中的构造函数
// ok
new Array('hello','world')
相反,我们可以将常规的Array类型数组分配给ReadonlyArray
const roArray:ReadonlyArray<string> = ['red','green','blue']
2.3 ReadonlyArray<T>简写方式
正如TypeScript为Array<Type>提供了简写方式Type[]
TypeScript也为ReadonlyArray<Type>提供了简写方式,写法为readonly Type[]
例如:
let device: ReadonlyArray<string> = ['无人机', '车辆','巡逻车']
// 可以简写为
let device2: readonly string[] = ['无人机', '车辆','巡逻车']
3. 与对象readonly属性的不同
需要注意的是, 与readonly属性修饰符不同, 常规的Array类型和ReadonlyArray类型之间赋值是相反的
3.1 对象只读属性赋值
// 只读属性接口
interface RoName{
readonly name:string
}
// 常规属性接口
interface Name{
name:string
}
// 声明变量
let roName: RoName = {
name: '张三'
}
let uname: Name = {
name:'李四'
}
// 1. 将readonly name属性值赋值给常规name属性值, 完全ok
uname.name = roName.name
// 2. 将常规name属性赋值给readonly name 属性报错
// 报错: 无法分配name ,因为它是只读属性
roName.name = uname.name
3.2 只读数组赋值
而Array和ReadonlyArray之间的赋值与常规属性和readonly 属性相互赋值完全相反
let x:readonly string[] = ['hello']
let y:string[] = ['world']
// 1. 可以将常规Array类型值赋值给ReadonlyArray 类型
x = y;
console.log('x',x)
// x ['world']
// 2.不能将ReadonlyArray类型分配给Array类型
y = x;
// 报错:类型readonly string[]为只读类型,不可分配给可变类型 string[]
总结:
- 对象的普通属性不可赋值给readonly只读属性
- 数组readonly只读数组 不可赋值给常规数组
4. 元组类型
4.1 元组类型
元组类型是另外一种Array类型, 它确切的知道自己包含多少元素,多少类型, 以及每一个元素类型和位置
// 类型别名定义元组类型
type StringNumberArray = [string,number]
这里 StringNumberArray就是由string和number组成 的元组类型,
就像ReadonlyArray在运行时没有表示, 但对TypeScript来说很重要,
对于类型系统,元组类型是描述索引以及索引包含的类型所形成的数组,
示例中:
// 类型别名定义元组类型
type StringNumberArray = [string,number]
// 使用类型注释
let arr:StringNumberArray;
let a = arr[0]
// let a: string
let b = arr[1]
// let b: number
根据元组类型索引0对应的值类型为string, 索引1对应的值类型为number类型
我们除了可以通过索引单个取值,还可以使用JavaScript的数组解构来解构元组
// 类型别名定义元组类型
type StringNumberArray = [string,number]
// 使用类型注释
let arr:StringNumberArray;
let [a,b]= arr;
console.log(a)
// let a: string
console.log(b)
// let b: number
元组类型在大量基于约定 的API中很好用, 因为每个元素的含义都是显而易见, 这就是的我们在解构变量中可以灵活的命名变量
4.2 操作超过元组索引赋值
如果我们此时试图获取超过元组数量对应的索引位置值时,会得到一个错误
// 类型别名定义元组类型
type StringNumberArray = [string,number]
// 使用类型注释
let arr:StringNumberArray;
let c = arr[2]
// 长度为 "2" 的元组类型 "StringNumberArray" 在索引 "2" 处没有元素
报错:告诉我们,我们想获取索引对于的值在元组类型上没有元素
如果我们尝试在超过元素数组对应的索引位置赋值时,也会有相同错误
// 类型别名定义元组类型
type StringNumberArray = [string,number]
// 使用类型注释
let arr:StringNumberArray;
arr[2] = 'hello'
// 长度为 "2" 的元组类型 "StringNumberArray" 在索引 "2" 处没有元素。
4.3 特殊的Array类型
除了那些长度检查之外, 像这样简单的元组类型等价于Array为特定索引声明属性类型的版本, 同时length属性使用明确的数字文字类型声明
// 元组类型
type StringNumberArray = [string, number]
// 特殊的Array类型
interface StringNumberObj {
length: 2
0: string
1: number
}
4.4 元组的可选属性
元组元素可以通过在元素类型后面添加?来表示可选属性, 可选的元组元素只能出现在元组的末尾, 也同样会影响length
// 可选元组类型
type OptionalTuple = [number,number, number?]
// 可选元组中可选元素可以选择是否赋值
let arr:OptionalTuple = [10,20]
let arr2:OptionalTuple = [10,20,30]
// 解构元组类型注释的变量
const [x,y,z] = arr
console.log(x)
// const x: number
console.log(y)
// const y: number
console.log(z)
// const z: number | undefined
console.log(arr.length)
// (property) length: 2 | 3
示例中,固定的元素有固定的类型, 可选元素是联合类型, 没有值时为undefined,
元组的长度也是2或3, 不是一个确定的长度
4.5 元组的剩余运算符
元组也可以有剩余元素, 他们必须是数组/元组类型
type StringNumberBooleans = [string, number, ...boolean[]];
type StringBooleansNumber = [string, ...boolean[], number];
type BooleansStringNumber = [...boolean[], string, number];
说明:
-
StringNumberBooleans元组，其前两个元素分别是string和number，但后面可以有任意数量的boolean -
StringBooleansNumber元组，第一个元素是string，中间任意数量的boolean类型,但结尾必须是number类型 -
BooleansStringNumber元组，起始元素是任意数量的boolean类型,但结尾必须是string和number`类型。
注意,带有剩余运算符元素的元组没有固定的长度, 它只有一组位于不同位置的知名元素
const a: StringNumberBooleans = ["hello", 1];
const b: StringNumberBooleans = ["beautiful", 2, true];
const c: StringNumberBooleans = ["world", 3, true, false, true, false, true];
剩余运算符元素是任意个,当然也包含0个, 因此类型中boolean类型的值可以没有
4.6 元组的可选属性与剩余元素的使用
TypeScript允许将元组和参数列表对应起来,
function example(...args:[string,number,...boolean[]]){
const [name,version,input] = args
console.log('args',args)
// parameter) args: [string, number, ...boolean[]]
}
example('hello',10,true)
因为...arg会将函数参数收集成为数组, 但这个数组必须符合元组类型
也就是说这个函数必须传递两个参数, 第一个为字符串类型,第二个为数字类型, 其余可以为任意多的布尔类型
其实示例中函数的写法等价于如下写法
function example(name:string,version:number,...input:boolean[]){
//...
}
当你 想用给一个剩余参数获取可变数量参数时, 这很方便
4.7 readonly 元组类型
元组类型也有readonly只读类型, 可以通过在元组前面添加readonly修饰符来指定, 就像数组简写语法一样
// 只读元组类型
let arr: readonly [string,number] = ['hello', 20]
// 修改只读元组类型
arr[0] = 'world'
// 无法分配到 "0" ，因为它是只读属性
在大多数代码中, 元组往往被创建后并未修改, 此时元组类型注释可以将readonly 作为很好的默认设置
4.8 断言数组变为元组类型
使用as const断言的数组,TypeScript会将其推断为readonly 元组类型
例如:
// TypeScript 将会推断为普通数组类型 number[]
let arr = [3,4]
// let arr: number[]
// 正常赋值
arr[0] = 20
没有类型注释的数组会被TypeScript推断为数组类型.
此时可以使用断言, 将普通数组断言为元组类型
// 使用断言为const TypeScript将会推断为readonly [3,4]元组类型
let arr = [3,4] as const
// let arr: readonly [3, 4]
// readonly 元组赋值报错
arr[0] = 10
// 无法分配到 "0" ，因为它是只读属性
