两分钟了解TS(常用基础类型)

常用基础类型

将 TS 中的常用基础类型分为两类

1. JS 已有类型

   1. 原始类型：number/string/boolean/null/undefined/symbol

   2. 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1. 联合类型

   2. 自定义类型(类型别名)

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

• 注意：

  1. 原始类型在 TS 和 JS 中写法一致

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

原始类型

• 原始类型：number/string/boolean/null/undefined/symbol

• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

联合类型

用法：

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

格式：

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

应用场景

1. 定时器id

// | 联合类型

// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2

// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]

arr[0] = '1'
arr[2] = true

注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

数组类型

格式：

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

基本示例：

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

类型别名

格式：

type 别名 = 类型

使用：

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

作用

1. 给类型起别名

2. 定义了新类型

场景

给复杂类型起别名

// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

别名可以是任意的合法字符串，一般首字母大写

函数-单个定义

格式：

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

示例：

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

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add（1,'1') // 报错