开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

typescript类型继承

当我们想对一种类型进行拓展的时候，可以通过extends关键字，也就是所谓的继承。如

interface Person {
    name: string;
    age: number;
}

interface Student extends Person {
    classes: string
}

上面代码我们先定义了一个Person类型，但此时我们想表示一个学生类型，其不止拥有name,age一般还属于某个班级，此时我们可以通过extends继承Person类型，来避免重复定义name和age属性。

类型继承也允许多继承，如

interface Person {
    name: string;
    age: number;
}

interface Habit {
 sports: string
}

interface Student extends Person,Habit {
    classes: string
}

let s:Student = {
    name: 'JoeZhou',
    age: 18,
    classes: "1班",
    sports: "swim"
}

上面代码Student同时继承了Person类型和Habit类型。

联合类型(intersection type)

intersection type和通过extends关键字实现拓展关系很像，我认为是type实现继承的一种方式。如

type Cicle = {
    raduis: number
    color: string
}

type Color = {
    color: string
}

type ColorfulCicle = Cicle & Color

let cc:ColorfulCicle = {
    raduis: 10,
    color: "Red"
}

上面代码定义了ColorfulCicle类型要同时满足Cicle和Color类型。

泛型

泛型可以理解为类型变量，了解更多可以看我的另一篇文章。ts泛型

数组类型

数组类型其实也是一种泛型，我们可以通过Array<Type>或者其简写形式Type []来定义数组类型，如

let arr:Array<string> = ['1','2']
let arr2: string [] = ['1','2']

只读数组

ts中可以通过ReadonlyArray来指定只读数组，如

let rOnlyArr:ReadonlyArray<string> = ['2','3']
rOnlyArr.push('4') //Property 'push' does not exist on type 'readonly string[]'

其同样拥有简写方式readonly Type[]，如

let rOnlyArr:readonly string[] = ['2','3']

与在普通对象类型中使用readonly关键字不同的是，只读数组不允许赋值给非只读数组，如

let rOnlyArr:readonly string[] = ['2','3']
let arr: string [] = ['1']

rOnlyArr = arr
arr = rOnlyArr //The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.

元组类型（Tuple Type）

元组可以理解有固定数量的数组类型，如

type TupleType = [string,number]
const tt: TupleType = ['1',2]
 tt[2] //Tuple type 'TupleType' of length '2' has no element at index '2'

上面代码定义了一个元组类型TupleType，其第一个元素为string，第二个元素为number。

元组类型可以被解构，如

type TupleType = [string,number]
let tt:TupleType = ['1',1]
const [s,n] = tt
console.log(typeof s) //"string" 
console.log(typeof n) //"number" 

这样的好处是，假如变量tt是某个函数的参数列表，我们在编写代码时可以清楚的知道传递给来的数组第一个元素是字符串而第二个元素是数字

元组同样可以定义可选元素

看以下代码

type TupleType = [number,string,number?]

上面代码定义了一个元组类型，其第一个元素为number类型，第二个为string类型，第三个为可选的number类型，应该注意的是，可选类型只能位于元组的最后，并且会影响到元组的length属性。如

type TupleType = [number,string,number?]
let tt:TupleType = [1,'1']
tt[2]
tt[3] //uple type 'TupleType' of length '3' has no element at index '3'.

元组也可以定义任意元素（rest elements）

看以下代码

type TupleType = [number,...boolean[],string]
let tt:TupleType = [1,true,true,true,'str']

上面TupleType类型中的...boolean表示任意数量的布尔类型，整个元组的意思是第一个元素是number类型，最后一个元素是字符串类型，中间可以拥有任意多个boolean类型元素。

只读元组

看以下代码

type TupleType = readonly [number,number]
let  tt:TupleType = [1,2]
tt[0] = 3 //Cannot assign to '0' because it is a read-only property

上面代码通过readonly限制元组不可修改。

只读元组同样不能赋值给普通元组

type ReadonlyTupleType = readonly [number,number]
type TupleType = [number,number]
let  tt:TupleType = [1,2]
let rTt:ReadonlyTupleType = [1,2]
tt = rTt //The type 'ReadonlyTupleType' is 'readonly' and cannot be assigned to the mutable type 'TupleType'
rTt = tt

使用as const 创建只读元组

当我们想快速创建只读元组时，可通过以下方式

let readonlyTuple = [1,2] as const
readonlyTuple[0] = 2 //Cannot assign to '0' because it is a read-only property.