TypeScript 常用类型

TypeScript 常用类型

• TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
  • 所有的 JS 代码都是 TS 代码
  • JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查
• TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

1. 类型注解
2. 常用基础类型

类型注解

示例代码:

let age: number = 18

• 说明：代码中的 : number 就是类型注解

• 作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型

• 解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错

• 错误演示：

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

常用基础类型

可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型

1. JS 已有类型

• 原始类型：number/string/boolean/null/undefined 和 ES6 新增的 symbol
• 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

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

• 注意：

  1. 原始类型在 TS 和 JS 中写法一致
  2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

原始类型

• 原始类型：number/string/boolean/null/undefined/symbol
• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

let myName: string = '老师'
let age: number = 18
let isLoading: boolean = false
let one:null = null
let two:undefined = undefined

• 基本类型可以省略

let myName= '老师'
let age = 18
let isLoading= false
let one = null
let two = undefined

• 在非严格模式下,null和undefined可以赋值给任意类型

  但是最新版ts中默认开启了严格模式

let one:null = number

数组类型

• 数组类型的两种写法：
  • 推荐使用 number[] 写法

// 写法一：
let numbers: number[]   = [1, 3, 5]
// 写法二（了解即可）：
let strings: Array<string> = ['a', 'b', 'c']

联合类型

需求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?

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

• 解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
• 注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

🔔类型别名 - 常用

• 类型别名（自定义类型）：为任意类型起别名
• 使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

• 解释:
  1. 使用 type 关键字来创建自定义类型
  2. 类型别名（比如，此处的 CustomArray）可以是任意合法的变量名称
  3. 推荐使用大写字母开头（约定的规范）
  4. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

🔔函数类型

• 函数的类型实际上指的是：函数参数和返回值的类型
• 为函数指定类型的两种方式：
  1. 单独指定参数、返回值的类型
  2. 同时指定参数、返回值的类型

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

// 函数声明
function add(num1: number, num2: number): number {
   
  return num1 + num2
}

// 函数表达式(箭头函数)
const add = (num1