[JavaScript知识库]TypeScript的基本介绍

本文主要对TypeScript做一些基本介绍

一，TS类型注解

格式:

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

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

作用：为变量添加类型约束

二，类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

发生类型推论的 2 种常见场景

1.声明变量并初始化时

2.决定函数返回值时

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

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

三，TypeScript的类型

原始类型：

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

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

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

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

// undefined
let un: undefined = undefined

// null
let timer:null = null

联合类型：

联合类型格式：

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

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

应用场景

// | 联合类型

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

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

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

数组类型:

格式:

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

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

示例：

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

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

拓展示例：

如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

分析，结合联合类型来使用

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

四，类型别名

1. 给类型起别名

2. 定义了新类型

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

格式：

type 别名 = 类型

示例：

type s = string // 定义

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

给复杂类型起别名：

// 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']