TypeScript基础知识

前言

TS是 JS 的泛型，你可以理解为可以把 TS 当成 JS 来用也没问题，只是TS 比 JS 多了一些额外的用法。

TS 主要是用来做JS 的类型声明，JS 类型分为八种基本类型：

undefined, null, string, number, boolean, symbol, bigint, object

object中的类：

Array, Object, Function

使用 TS 的好处：

1. 不用编译，提前知道代码是否错误。
2. 智能提示，可通过类型声明找到相关的 API ，不用看文档。

TS 支持的 JS的类型

Array

const arr:Array<string|number> = ['1', '2', 3]

Funtion

type Add = (a: number, b: number) => number
const add:Add = (a, b) => a + b

如果要在 add 这个函数中增加属性的话，就要这样类型声明：

interface AddWithProps {
    (a: number, b: number) : number
    xxx: string
}
const add2: AddWithProps = (a, b) => a + b
add2.xx = 'yy'

TS 有而 JS 没有的类型

any

let a:any = 'hi'
b.name

any没有任何限制，都可以。

unknown

type B = {name: string}
let a:unknown = JSON.parse('{"name":"tione"}')
console.log((b as B).name) // 断言

同 any，也是没有任何限制，但通常 unknown 是用于判断 ajax 请求返回的数据，数据没有返回前我们是不知道具体的数据结构以及类型的，所以我们可以先用断言定义好类型。unknown 要用前先要明确这是什么。

viod

let print: () => void = funtion () {
    console.log(1)
}

表示一个函数不要返回值。

nerver

// demo1
type Dir = 1 | 2 | 3 | 4 | undefined
let dir:Dir

switch(dir) {
  case 1:
    break;
  case 2:
    break;
  case 3:
    break;
  case 4:
    break;
  case undefined:
    break;
  default:
    console.log(dir) // dir 就是 nerver
}

// demo2
type Demo = number & string //Demo 就是 nerver

nerver 表示空集，既不是 unfefined 也是不 null，什么都没有，不应该存在的东西。

元组tuple

let p: [number, number] = [100, 200]

let p: P = [1, 2, 3, 4] // 这样就会报错，因为限制了长度
let p2: [number, string, boolean] = [1, '2', true] // 这样就不会报错

想要确定数组的长度就可以用tuple。

枚举enum

enum Dir {东, 南, 西, 北}
let d: Dir = Dir.东 // 0
let d2: Dir = Dir.南 // 1
let d3: Dir = Dir.西 // 3

console.log(d2) // 1

枚举指的是把 0123 的数字变成对应的一个标志，例如：‘东’，‘东’就表示 0。