初识 Typescript

Typescript 是 Javascript 的一个超集，且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

Typescript 基于 Javascript 扩展了类型系统 + ECMAScript6+ 特性的支持 ===> 编译回原始的 JavaScript

功能更强大，生态更加健全、完善（微软自身的开发环境）

Angular | Vue.js3.0

语言类型

• 强类型语言：

  • 语言层面限制函数的实参类型必须与形参类型相同
  • 不允许任意的隐式类型转换

• 弱类型语言：

  • 语言层面不会限制实参类型
  • 可以隐式类型转换

• 静态类型语言

  • 变量声明时就以明确，声明过后不允许修改

• 动态类型语言

  • 运行时才能明确变量类型，并且可以随时变化
  • 变量没有类型，但变量存放的值是有类型的

JavaScript 是弱类型且是动态类型语言
JavaScript 脚本语言，*没有编译环节(类型检查)*，可直接在运行环境运行
异常要等到运行阶段才会被抛出

Flow

类型注解

function sum (a: number, b: number) {
  return a + b
}
sum(1, 2)

基础类型

export {}

// 布尔类型
let boo: boolean
// let boo: boolean = true || false

// 数值
let num: number = 123     // NaN || Infinity
num = 0b1111011           // ES6 支持 二进制 | 八进制 | 十六进制的值
num = 0o173               // 八进制
num = 0x7b                // 十六进制的值

// 字符串
let str: string
str = '123'
str = `num=${num}`
// console.log(str);

// 数组
const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
const arr3: (string | number)[] = ['a', 2, 3]

// object
function bar(obj: object): void {
  console.log(obj);
}
bar({})

元祖类型

固定长度，固定成员的类型

let tuple: [string, number, boolean] = ['aaa', 123, true]
tuple = ['aaa', 123, true, 'asd']             // error ==> 2.6 版本之后不支持  越界元素(超出长度但复合类型的值)

枚举类型

enum Roles {
  SUPER_ADMIN,
  ADMIN,
  USER
}

console.log(Roles);           // {0: 'SUPER_ADMIN', 1: 'ADMIN', 2: 'USER', SUPER_ADMIN: 0, ADMIN: 1, USER: 2}
console.log(Roles.ADMIN);     // 1

1. 可以自定义值

   enum Roles {
     SUPER_ADMIN = 2,
     ADMIN = 8,
     USER = 'user'
   }
   
   console.log(Roles.ADMIN);     // 8
   console.log(Roles.USER);      // user
   console.log(Roles[8]);        // ADMIN

2. 使用

   // 文档需要注明 0 是什么
   if (role === 0) {
     xxx
   }
   // 直观
   if (role === Roles.SUPER_ADMIN) {
     xxx
   }

3. 转为 js

   enum Roles {
     SUPER_ADMIN,
     ADMIN,
     USER
   }

   "use strict";
   var Roles;
   (function (Roles) {
       Roles[Roles["SUPER_ADMIN"] = 0] = "SUPER_ADMIN";        // 设置了 SUPER_ADMIN 值为 0 ，也设置了 0 下标对应 SUPER_ADMIN
       Roles[Roles["ADMIN"] = 1] = "ADMIN";
       Roles[Roles["USER"] = 2] = "USER";
   })(Roles || (Roles = {}));

any 任意类型

let val:any = 'any value'
const arr4: any[] = [1, 'a']

void 类型

// 如：函数无返回值
// 不指定则为 undefined
const foo = (txt: string): void => {
  console.log(txt)  
}
foo('123')

let v: void = undefined       // 允许 将 undefined 赋给 void 类型的值
// v = null                      // void 在严格模式下只能 undefined  （strictNullChecks: true）

null && undefined

// null && undefined 在 ts 中即是类型也是值
// 是其他类型的 子类型 （可以把这俩赋给其他任意类型作为值）非 strict 模式
let und: undefined = undefined
let nu: null = null

never

// never 永远不存在的值
// never 类型是任何类型的子类型
// 1. 异常抛出
const errFn = (msg: string): never => {
  throw new Error(msg)
}
// 2. 死循环
// const infinityFn = (): never => {
//   while(1) {}
// }

类型断言

强制指定类型
语法 ：值 as 类型 || <类型>值
在 jsx 中必须使用 as

(<string>target).length || (target as string).length
```       
```ts
const getLength = (target: string | number): number => {
  // 强制指定类型 || 类型保护
  if ((<string>target).length || (<string>target).length === 0) {
    return (target as string).length
  } else {
    return target.toString().length
  }
}

console.log(getLength(123))
console.log(getLength('123123'))