TypeScript 核心

类型注解

知道：TypeScript 类型注解

示例代码：

: number 就是类型注解，它为变量提供类型约束。
约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。
而且：约定类型之后，代码的提示也会非常清晰。

错误演示：

小结：

什么是类型注解？
- 变量后面约定类型的语法，就是类型注解
类型注解作用？
- 约定类型，明确提示

原始类型

知道：ts 有哪些类型，掌握：原始类型使用

TS 常用类型：

JS 已有类型
- 原始类型，简单类型，number string boolean null undefined
- 复杂类型，对象数组函数
TS 新增类型
- 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等

原始类型：

使用简单，完全按照 JS 的类型来书写即可

数组类型

掌握：数组类型的两种写法

写法 1

写法 2

推荐使用：

number[] 写法

思考：

如果数组需要存储多种类型数据呢？

联合类型

掌握：通过联合类型将多个类型合并为一个类型

需求：数组中有 number 和 string 类型，这个数组的类型如何书写？

定义：

类型与类型之间使用 | 连接，代表类型可以是它们当中的其中一种，这种类型叫：联合类型

练习：给一个定时器 ID 加类型

思考：

let arr: number | string[];
// 这是什么类型？

类型别名

掌握：使用类型别名语法给类型取别字

示例代码：

类型别名:

type 类型别名 = 具体类型 基本语法
定义类型别名，遵循大驼峰命名规范，类似于变量
使用类型别名，与类型注解的写法一样即可

使用场景：

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

函数类型

基本使用

掌握：给函数指定类型

给函数指定类型，其实是给 参数 和 返回值 指定类型。
两种写法：
- 在函数基础上 分别指定 参数和返回值类型
- 使用类型别名 同时指定 参数和返回值类型

示例代码 1：分别指定

示例代码 2：同时指定 ::: tip 注意：通过类似箭头函数形式的语法来为函数添加类型，只适用于 函数表达式 :::

void 类型

掌握：void 函数返回值类型

如果函数没有返回值，定义函数类型时返回值类型为 void

如果函数没有返回值，且没有定义函数返回值类型的时候，默认是 void

注意：

在 JS 中如果没有返回值，默认返回的是 undefined
但是 void 和 undefined 在 TypeScript 中并不是一回事
如果指定返回值类型是 undefined 那返回值必须是 undefined

可选参数

掌握：使用 ? 将参数标记为可选

如果函数的参数，可以传也可以不传，这种情况就可以使用 可选参数 语法，参数后加 ? 即可

练习，模拟 slice 函数，定义函数参数类型

:::tip 注意：

必选参数不能位于可选参数后 (start?: number, end: number) 这样是不行的 :::

对象类型

基本使用

掌握：对象类型语法

TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

小结：

使用声明描述对象结构？{}
属性怎么写类型？属性名: 类型
方法怎么写类型? 方法名(): 返回值类型

扩展用法

掌握：对象类型中，函数使用箭头函数类型，属性设置可选，使用类型别名。

函数使用箭头函数类型

对象属性可选

使用类型别名

小结：

对象的方法使用箭头函数类型怎么写？{sayHi:()=>void}
对象的可选参数怎么设置？{name?: string}
对象类型会使用 {} 如何提供可阅读性？类型别名

:::warning 作业创建一个学生对象，该对象中具有以下属性和方法：

属性：必选属性：姓名、性别、成绩，可选属性：身高
方法：学习、打游戏（可选） :::

接口 interface

基本使用

掌握：使用 interface 声明对象类型

接口声明是命名对象类型的另一种方式

小结：

interface 后面是接口名称，和类型别名的意思一样。
指定 接口名称 作为变量的类型使用。
接口的每一行只能有 一个 属性或方法，每一行不需要加分号。

interface 继承

掌握：使用 extends 实现接口继承，达到类型复用

思考：

有两个接口，有相同的属性或者函数，如何提高代码复用？

继承：

相同的属性或展示可以抽离出来，然后使用 extends 实现继承复用

小结：

接口继承的语法：interface 接口A extends 接口B {}
继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

type 交叉类型

掌握：使用 交叉类型 实现接口的继承效果

实现 Point2D 与 {z: number} 类型合并得到 Ponit3D 类型

小结：

使用 & 可以合并连接的对象类型，也叫：交叉类型

interface vs type

了解：interface 和 type 的相同点和区别

类型别名和接口非常相似，在许多情况下，您可以在它们之间自由选择。
接口的几乎所有特性都以类型的形式可用，关键的区别在于不能重新打开类型以添加新属性，而接口总是可扩展的。

interface	type
支持：对象类型	支持：对象类型，其他类型
复用：可以继承	复用：交叉类型

不同的点：

type 不可重复定义

interface 重复定义会合并

小结：

它们都可以定义对象类型
它们都可以复用，interface 使用 extends , type 使用 &
type 不能重复定义，interface 可以重复会合并

类型推断

知道：TS 的的类型推断机制作用

在 TS 中存在类型推断机制，在没有指定类型的情况下，TS 也会给变量提供类型。

发生类型推断的几个场景场景：

声明变量并初始化时

// 变量 age 的类型被自动推断为：number
let age = 18;

决定函数返回值时

建议：

将来在开发项目的时候，能省略类型注解的地方就省略，充分利用TS推断 的能力，提高开发效率。 :::tip
在你还没有熟悉 ts 类型的时候建议都加上类型，比如今天第一次写 ts 最好都写上
如果你不知道类型怎么写，可以把鼠标放至变量上，可以通过 Vscode 提示看到类型 :::

字面量类型

字面量类型介绍

知道：什么是字面量类型

js 字面量如：18 'jack' ['a'] {age: 10} 等等。
使用 js字面量 作为变量类型，这种类型就是字面量类型。

思考：这两个变量的类型是什么？

通过类型推断发现，str1 类型是 string ， str2 类型是 Hello TS
原因：str2 是 const 声明的，值只能是 Hello TS，所以类型只能是 Hello TS

字面量类型应用

知道：字面量类型的应用场景

例如：性别只能是男和女，不会出现其他值。

小结：

字面量类型配合联合类型来使用，表示：一组明确的可选的值

例子：

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
优势：相比于 string 类型，使用字面量类型更加精确、严谨

any 类型

知道：any 类型的作用是逃避 TS 的类型检查

显式any情况：当变量的类型指定为 any 的时候，不会有任何错误，也不会有代码提示，TS会忽略类型检查

以上的代码虽然没有报错提示，但是将来是可能出现错误的。

隐式any的情况：声明变量不给类型或初始值，函数参数不给类型或初始值

// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn = (n) => {}

小结：

any 的使用越多，程序可能出现的漏洞越多，因此不推荐使用 any 类型，尽量避免使用。

类型断言

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

但是我们明确知道获取的是一个 A 元素，可以通过 类型断言 给它指定一个更具体的类型。

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

例如：

泛型

:::tip

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类型（types）、接口（interfaces）、函数类型等能力的非常可靠的手段。 :::