深入理解TypeScript

TypeScript是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript是具有类型语法的JavaScript，是一种强类型编程语言，并且提供了最新的JavaScript特性。它经过代码编译后最终生成为JavaScript，能够在任何运行JavaScript的地方运行，比如浏览器、NodeJS、Electron、Deno等环境中。

TypeScript的作用

1. 避免在开发阶段的一些问题（类型错误的方法等）
2. 较好的语法提示（组件或者函数的必填/可选参数一目了然等）
3. 形成类型思维
4. 代码更健壮、更易读
5. 减少团队协作的沟通和文档书写

基本类型

String

let  name: string = '王同超'

Number

let  age: number = 18

Boolean

let isStudy: boolean = true

Undefined Null

let myname: undefined = undefined
let myname: undefined = void 0
let myname: null = null
// strictNullChecks配置项可以配置undefined和null是否
// 是其他类型的子类型

Void

let name: void = undefined
let func: () => void = () => {
   }

Symbol

let myname: symbol = Symbol('王同超');

BigInt

let bigNumber: bigint = 10n

Array

let arr: number[] = [1, 2, 3]
// or
let arr: Array<string> = ['hello', 'wrold']

Tuple

元组类似于数组，与数组不同的是，数组只能定义固定类型的值而元组可以定义不同类型的值以及元素的数量

let tup: [number, string] = [18, '王同超']
// 这里定义的类型以及数量必须相同，否则会报错

Enum

1.数字枚举

enum Code{
   
   success,
   faild,
   noAuth
}
// 编译成JavaScript为
var Code;
(function (Code) {
   
    Code[Code["success"] = 0] = "success";
    Code[Code["faild"] = 1] = "faild";
    Code[Code["noAuth"] = 2] = "noAuth";
})(Code || (Code = {
   }));

2.字符串枚举

enum Code {
   
   success = 'SUCESS',
   faild = 'FAILD',
   noAuth = 'NOAUTH'
}
// 编译成JavaScript为
var Code;
(function (Code) {
   
    Code["success"] = "SUCESS";
    Code["faild"] = "FAILD";
    Code["noAuth"] = "NOAUTH";
})(Code || (Code = {
   }));

3.异构枚举

enum Code {
   
    success,
    faild = 'FAILD',
    noAuth = 1,
    error
}
// 编译成JavaScript为
var Code;
(function (Code) {
   
    Code[Code["success"] = 0] = "success";
    Code["faild"] = "FAILD";
    Code[Code["noAuth"] = 3] = "noAuth";
    Code[Code["error"] = 4] = "error";
})(Code || (Code = {
   }));

4.常量枚举

const enum Code {
   
    success,
    faild,
    noAuth
}
console.log(Code.success)
// 编译成JavaScript为
console.log(0 /* success */);

Any

任何类型都是any的“子类型”，因此any也没成为类型系统的顶级类型（全局超级类型）
大量使用any类型会导致ts的类型保护形同虚设，在TypeScript 3.0 引入了unknown类型

let data: any
data = 18
data = '王同超'
data = () => {
    alert('No problem') }

// noImplicitAny 配置项能够配置是否允许隐式any（ts类型推断能够推断出类型）

Unknown

类似于any可以定义为任意类型，但是将unknown赋值给其他类型时会有限制，调用unknown类型数据方法也会报错

let data: unknown
data = 1
data = '王同超'
data = {
    name: '王同超' }
data = () => {
   }

let data1: unknown = data // 没问题
let data2: any = data // 没问题
let data: number = data // error
let data: string = data // error

data.name // error

Never

never类型表示永远不存在的值。常用在抛出异常或者没有返回值的函数等

// 场景1
function fail(msg: string): never {
   
  throw new Error(msg);
}

// 场景2
function fn(x: string | number) {
   
  if (typeof x === "string") {
   
    // do something
  } else if (typeof x === "number") {
   
    // do something else
  } else {
   
    x; // has type 'never'!
  }
}

// 场景3
switch(x: 1|2) {
   
  case 1:
    break
  case 2:
    break
  default:
    const exhaustiveCheck: never = x
    break
}

字面量类型

let myname: 'wtc&#