TypeScript基础 | 青训营笔记

常用类型

可以将TS中的常用基础类型细分为两类: JS 已有类型, TS新增类型。

1. JS 已有类型

• 原始类型: number / string / boolean / null / undefined / bigint / symbol。
• 对象类型: object(包括，数组、对象、函数等对象）。

2. TS 新增类型

• 联合类型、自定义类型（类型别名)、接口、元组、字面量类型、枚举、void、any等。

原始类型

let age: number = 18
let myName: string = '刘老师'
let isLoading: boolean = false

数组类型

对象类型，在 TS 中更加细化，每个具体的对象都有自己的类型语法。

数组类型的两种写法:（推荐使用 number[] 写法)

let numbers: number[] = [1，3，5]
let strings: Array<string> = ['a', 'b', 'c ']

函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式:

1. 单独指定参数、返回值的类型

function add(num1: number, num2: number): number {
    return num1 + num2
}

const add = (num1: number, num2: number): number => {
    return num1 + num2
}

2. 同时指定参数、返回值的类型

当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。

这种形式只适用于函数表达式。

const add: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}

横线的部分即函数的参数、返回值类型。

并且在我们在将这一部分遮住之后，剩余的部分就是我们之前 JS 写这个函数的样子。

void 类型

如果函数没有返回值，那么，函数返回值类型为：void。

function greet(name: string): void {
    console.log( ' Hello , name)
}

可选参数

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。

比如，数组的slice方法，可以slice()也可以slice(1)还可以slice(1,3)。

可选参数:在可传可不传的参数名称后面添加?（问号）。

注意:可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

function myslice(start? : number, end? : number) : void {
    console.1og(起始索引:', start，'结束索引: ', end)
}
myslice()
myslice(1)
myslice(1, 3)
myslice(,3)

对象类型

JS中的对象是由属性和方法构成的，而TS中对象的类型就是在描述对象的结构（有什么类型的属性和方法)。

1. 直接使用非来描述对象结构。属性采用属性名:类型的形式;方法采用方法名():返回值类型的形式。
2. 如果方法有参数，就在方法名后面的小括号中指定参数类型（比如: greet(name: string): void)。
3. 在一行代码中指定对象的多个属性类型时，使用;(分号)来分隔。
   • 如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型)，可以去掉;(分号)。
   • 方法的类型也可以使用箭头函数形式（比如: { sayHi: ()=> void }) 。

对象类型的写法:

let person: { name: string; age: number; sayHi(): void } = {
    name: 'jack ',
    age: 19,
    sayHi() {}
}

可选属性

对象的属性或方法，也可以是可选的，此时就用到可选属性了。

比如，我们在使用axios({...})时，如果发送GET请求，method属性就可以省略。

function myAxios(config: { url: string; method?: string }) {
    console.log(config)
}

可选属性的语法与函数可选参数的语法一致，都使用?(问号）来表示。

接口

当一个对象类型被多次使用时，一般会使用接口(interface)来描述对象的类型，达到复用的目的。

像这种情况，多次使用到Person类时，需要重复写类的属性，拖慢了开发的进度并且冗余。

interface IPerson {
    name: string
    age: number
    sayHi(): void()
}
let person: IPerson = {
    name: 'jack',
    age: 19,
    sayHi() {}
}

1. 使用interface关键字来声明接口。
2. 接口名称（比如，此处的IPerson) ，可以是任意合法的变量名称。
3. 声明接口后，直接使用接口名称作为变量的类型。
4. 因为每一行只有一个属性类型，因此，属性类型后没有;(分号)。

通过继承实现复用

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。

比如，这两个接口都有x、y两个属性，重复写两次，可以，但很繁琐。

interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }

改进

interface Point2D { x: number; y: number }
interface Point3D extends Point2D { z: number }

元组

场景:在地图中，使用经纬度坐标来标记位置信息。

可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。

let position: number = [39.5427，116.2317]

使用number[]的缺点: 不严谨，因为该类型的数组中可以出现任意多个数字。

元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型。

let position: [number, number] = [39.5427，116.2317]

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。

比如

<a href "http://www.itcast.cn/" id="link">传智教育</a>
const aLink = document.getElementById('link')

注意: getElementByld方法返回值的类型是HTMLElement，该类型只包含所有标签公共的属性或方法，不包含a标签特有的href 等属性。

因此，这个类型太宽泛(不具体)，无法操作href等a标签特有的属性或方法。

解决方式:这种情况下就需要使用类型断言指定更加具体的类型。

使用类型断言

1. 使用as 关键字实现类型断言。
2. 关键字as后面的类型是一个更加具体的类型（HTMLAnchorElement是HTMLElement 的子类型)。
3. 通过类型断言，aLink的类型变得更加具体，这样就可以访问a标签特有的属性或方法了。

const aLink = document.getElementById('link') as HTMLAnchorElement

技巧:在浏览器控制台，通过console.dir()打印DOM元素，在属性列表的最后面，即可看到该元素的类型。

字面量类型

let str1 = 'Hello TS'
const str2 ='Hello TS'

通过TS类型推论机制，可以得到答案:

1. 变量str1的类型为: string。
2. 变量str2的类型为: 'Hello TS'。

解释:

1. str1是一个变量(let)，它的值可以是任意字符串，所以类型为: string。
2. str2是一个常量（const)，它的值不能变化只能是'Hello TS'，所以，它的类型为: 'Hello TS'

注意：此处的'Hello TS'，就是一个字面量类型。也就是说某个特定的字符串也可以作为TS中的类型。除字符串外，任意的JS字面量（比如，对象、数字等）都可以作为类型使用。

使用模式:字面量类型配合联合类型一起使用。

使用场景:用来表示一组明确的可选值列表。

比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个。

function changeDirection(direction: 'up'| 'down'| 'left' | 'right') {
    console.log(direction)
}

解释∶ 参数direction的值只能是up/down/left/right中的任意一个

优势: 相比于string类型，使用字面量类型更加精确、严谨。

联合类型

联合类型由两个及以上的成员类型构成，成员类型通过竖线符号 "|" 分隔，表示可以是这些类型中的任意一种。

这里定义了一个 MyNumber 的联合类型，由 number 和 bigint 两个成员类型组成，表示 MyNumber 可以为 number 或 bigint 类型。

type MyNumber = number | bigint

数组中既有number 类型，又有string类型

let arr: (number | string)[] = [1, 'a', 3, 'b']

既可以是number类型，又可以是string[]

上下两个不加括号的区别

let arr1: number | string[] = [ 'a ', 'b']
let arr2: number | string[] = 123

类型别名

类型别名（自定义类型)∶为任意类型起别名。

使用场景:当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

1. 使用 type 关键字来创建类型别名。
2. 类型别名（比如，此处的CustomArray) ，可以是任意合法的变量名称。
3. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

type CustomArray = (number | string)[]
let arr1: CustomArray =[1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

接口(interface)和类型别名(type)的对比

• 相同点:
  • 都可以给对象指定类型。

//接口 interface
interface IPerson {
    name: string
    age: numbersayHi(): void
}

//类型别名 type
type IPerson = {
    name: string
    age: number
    sayHi(): void
}

• 不同点:
  • 接口，只能为对象指定类型。
  • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。

//类型别名 type
type NumStr = number | string

枚举

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。

枚举:定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。

enum Direction { Up, Down, Left, Right }
function changeDirection(direction: Direction) {
    console.log(direction)
}

数字枚举

注意:枚举成员是有值的，默认为︰从0开始自增的数值。

我们把，枚举成员的值为数字的枚举，称为:数字枚举。

当然，也可以给枚举中的成员初始化值。

enum Direction { Up = 10，Down, Left, Right }

字符串枚举

枚举成员的值是字符串。

enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT'
}

注意: 字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值。

any类型

原则: 不推荐使用any! 这会让TypeScript变为“AnyScript”（失去TS类型保护的优势）。

因为当值的类型为any时，可以对该值进行任意操作，并且不会有代码提示。

let obj: any = { x: 0 }
obj.bar = 100
obj()
const n: number = obj

解释: 以上操作都不会有任何类型错误提示，即使可能存在错误!

尽可能的避免使用any类型，除非临时使用any来“避免”书写很长、很复杂的类型! 其他隐式具有any类型的情况:

1. 声明变量不提供类型也不提供默认值

2. 函数参数不加类型注意: 因为不推荐使用any

所以，这两种情况下都应该提供类型!

typeof

TS 中，除了能用JS中提供的typeof操作符用来获取数据的类型。

TS也提供了typeof操作符:可以在类型上下文中引用变量或属性的类型（类型查询)。

使用场景：根据已有变量的值，获取该值的类型，来简化类型书写。

let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number}) {}
formatPoint(p)
function formatPoint(point: typeof p) {}

1. 使用typeof操作符来获取变量p的类型，结果与第一种（对象字面量形式的类型）相同。
2. typeof出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于JS代码）。
3. 注意: typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型)。