TypeScript篇二 ---类型别名、接口、元组、类型推断、字面量类型

类型别名

相当于是给一个类型起一个新名字，例如将一个数字和字符串组成的数组起一个类型别名，只要有数据是这个类型，都可以用类型别名指定

type CustomArray = (number | string)[]

let arr: CustomArray = [1, 2, 3, 'a', 'b', 'c']
// 相当于就是
let arr: (number | string)[] = [1, 2, 3, 'a', 'b', 'c']

type girls = "邱淑贞" | "唐嫣" | "迪丽热巴" | "赵露思";

let oneGirl: girls = "唐嫣" // 只能是girls里面的其中之一

接口

和类型别名类似，它也可以指定类型

// 用 interface去声明一个接口
interface Person13 {
  name: string
  age: number
  sayHi(): void
}

type Person2 = {
  name: string
  age: number
  sayHi(): void
}

// 直接使用接口名称作为变量的类型
let zs13: Person13 = {
  name: '张三',
  age: 18,
  sayHi: () => {
    console.log('我是张三');
  }
}

let ls13: Person13 = {
  name: '李四',
  age: 20,
  sayHi: () => {
    console.log('我是李四');
  }
}

let ls14: Person2 = {
  name: '李四',
  age: 20,
  sayHi: () => {
    console.log('我是李四');
  }
}

两者的比较

1. 接口可以指明一个变量里面能拥有哪些东西，使用interface声明；类型别名与接口类似，是为一个类型取一个新名字，使用type来声明。
2. 都可以扩展，interface使用“extends”扩展，type使用“&”扩展 。
3. type 可以声明基本类型别名，联合类型，元组等类型，可以使用typeof，而interface不可以, interface可以不断联合扩展，type不可以。

接口和类型别名目前还没有深入去了解，后续做补充

接口的继承

接口继承就是接口可以通过其他接口来扩展自己，接口可以继承多个接口，使用关键字extends实现继承

下面是一个继承的例子

// 2D存在x和y两个属性
interface Point2D { 
  x: number
  y: number
}

// Point3D通过继承扩展自己
interface Point3D extends Point2D { z: number }

// 扩展之后就有了Point2D的属性
let p3: Point3D = {
  x: 1,
  y: 2,
  z: 3
}

如果想要继承多个接口，可以在要继承的接口直接用 , 分割，实现继承多接口的效果

元组

个人理解就是一个特定的数组，就像正方形是特殊的矩形一样，元组就是指定数组长度以及数组每一项数据类型的数组，见下：

let positon: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 只限制了数组是一个数字数组，长度不限

// 元组写法
// 指定了一个只有两项的数组，并且数组第一项为number类型，第二项为字符串类型
let positon1: [number, string] = [1, '2'] // 指定数组长度，且规定每一项的数据类型，只要不符合规定就会报错

类型推断

类型推断是ts的一种机制，两种场景下存在类型推断

声明变量并且初始化时

// 声明age并且初始值是18，会产生类型推断，指定age为number型，如果要修改age为其他类型的值时，会进行报错提示
let age = 18

// 相当于对 let age:number = 18 进行了简写

age = '18' // 报错，不能将类型“string”分配给类型“number”。ts(2322)

• 注意，只有在给定初值的时候才会产生类型推断，不赋初值不存在类型推断

//^ 如果你初始化为给初值时，类型推断机制会失效
let a

//^ 此时可以随意赋值
a = 18
a = '18'

函数返回值存在类型推断

function add(num1: number, num2: number) {
  return num1 + num2 // 两个参数是number，ts会自动识别到返回值类型是number
}

相当于对下面进行简写，省去了:number
function add(num1: number, num2: number) :number {
  return num1 + num2 
}

注意

函数参数不能省略定义数据类型，否则不生效

function add1(num1, num2: number) {
  return num1 + num2 // 两个参数是number，ts会自动识别到返回值类型是number
}

//^ 此时第一个参数的数据类型可以随便写
add1('1', 2)
add1(false, 2)

字面量类型

用const 声明的简单数据类型的变量就是字面量

const str2 = 'HELLO TS' // 数据类型为'HELLO TS'

// str2是一个常量，无法修改，是一个字面量

字面量可以直接当数据类型声明

const str3: 'hello ts' = 'hello ts' // str3的值只能是hello ts