TypeScript类型别名-交叉类型-函数类型-this类型等

TypeScript
, , , ,

类型别名

在 TypeScript 中，给类型起别名的语法关键字是type，用该关键字就可以给类型起别名。

1
2
type MyNameType = string
const Myname: MyNameType = 'pixelpilot'

接口声明

在 TypeScript 中，接口声明使用interface关键字

1
2
3
4
5
interface IPoint {
    x: number
    y: number
    z?: number
}
  • 接口是声明方式，类型别名是赋值方式。在定以类型类型时，大部分时候，可以任意选择使用接口定义或类型别名。
  • 接口的几乎所有特性都可以在 type 中使用

区别

  • type 类型使用范围更广，接口类型则只能用来声明对象。
  • 在声明对象时，interface 可以多次声明。类型别名则不可以多次声明。
  • interface 可以使用继承

总结

非对象类型使用type定义，而对象类型则推荐使用interface定义。

交叉类型

交叉类型的意思是同时满足两种类型。交叉类型使用于一些特殊场景。如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 我既要马儿跑，但不给马吃草
interface Irun {
    name: string
    age: number
}

interface INGAllowed {
    Grass: () => void 
}

const info: Ikun & Icoder = {
    name: "马"
    age: 18,
    Grass: () => {
        console.log('为什么不让我吃草')
    }
}

类型断言

在某些情况下类型推导出来的类型不准确不具体，这时候我们就可以使用类型断言

1
const imgEl = document.querySelector('.img') as HTMLImageElement
  • 在类型断言时，只能断言成具体类型或不太具体的类型。

非空类型断言

在 TypeScript 中，非空类型断言（Non-Null Assertion）是一种方式，用来告诉编译器一个值不可能是 null 或 undefined，即使编译器可能认为它是。非空断言操作符（!）可以在任何表达式后使用，以断言该表达式不为 null 或 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface IOneDay {
    eat: string
    sleep: boolean
    code?: boolean
}

// code 因为是可选的，所以我可以赋值也可以不赋值
const MyDay: IOneDay = {
    eat: Hamburger
    sleep: false
}

// 在等号左边不可以使用可选链
// MyDay?.code = true 这样会报错，但如果我们就是要给 code 赋值，且确定它有值就可以使用可选链，当然也可以使用类型缩小。
// 非空类型断言 当我们确定一定有值的时候才使用非空断言。
MyDay!.code = true
// 类型缩小
if(MyDay.code) {
    MyDay.code = true
}

字面量类型

字面量类型是一种允许你指定变量只能具有特定值的类型。这可以用于字符串、数字、布尔值和枚举成员等。

使用场景：当我们在做一些游戏相关开发的操作时，经常要判断用户点击上 下 左 右键，这时候字面量类型就很好的帮助我们进行判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
type tapType = 'up' | 'down' | 'left' | 'right'

function switchDirection(tap: tapType) {
    if(tap === 'up') {
    	console.log('监听用户点击 w 键 或 上键')
	}else if(tap === 'down') {
	    console.log('监听用户点击 s 键 或 下键')
	}else if(tap === 'left') {
	    console.log('监听用户点击 a 键 或 左键')
	}else if(tap === 'right') {
	    console.log('监听用户点击 d 键 或 右键')
	}
}

switchDirection('up')

类型缩小

什么是类型缩小

  • 可以通过 typeof padding === ‘number’ 的判断语句，来改变 TypeScript的执行路径。
  • 在给定路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小

常见的类型缩小有以下几种方式：

  • typeof
  • 平等缩小
  • instanceof
  • in (关键字用于检查一个对象是否包含特定的属性)
  • 等等

函数类型

可以通过函数类型表达式，编写函数类型。

格式：() => 返回值

1
2
3
const bar: (num1: number,num2:number) => number = (num1: number,num2:number) => {
    return num1 + num2
}

在 TypeScript 不能省略参数名。

调用签名

它与函数表达式不同的是函数表达式并不支持声明属性。如果想描述一个带有属性的函数，我们可以在对象类型中写一个调用签名。

调用签名语法

1
(参数列表): 返回值类型

开发中怎么选择

  • 如果只是描述函数类型本身（函数可以被调用），就使用函数类型表达式。
  • 如果描述函数作为对象可以被调用，同时也有其他属性时，就使用函数签名。

默认参数

函数的参数可以有默认参数，这样即使我们不传递值过去，也会使用默认参数。

1
2
3
4
5
6
function foo(x: number, y = 100) {
	return x + y
}

foo(10)
foo(10,20)

TypeScript 中 this 的类型

1
2
3
function foo1(this:{name:string}) {
    console.log(this)
}
  • 函数的第一个参数我们可以根据函数之后调用的情况，用于声明this的类型。
  • 在后续调用函数传入参数时，从第二个参数开始传递，this参数会在编译后被抹除。