TypeScript

typescript是一门融合了部分后端 java思想的前端语言
可以不用，但是不可以不会
ts是强类型语言，打造强大的类型约束系统
TS就是写出约束力更强的系统，约束 JS的弱类型

Typescript是什么

1. javascript that scales 可扩展的 js，ts是 js的超集
2. 静态类型风格的类型系统
   1. 静态类型检查：为函数或变量添加约束
   2. 包括了es6 - es10的语法支持
3. ts文档 https://www.typescriptlang.org/
4. ts好的兼容性
   1. 完全兼容 es6+，ts的程序更容易理解
   2. 第三方库可以单独编写类型文件，declare
   3. 前端主流框架都用 ts重写
   4. 丰富的接口提示，代码自动补全，在不同的代码块和定义中进行跳

ts使用场景

• vue3 + vuex
  • https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter
• react hooks
  • https://github.com/Microsoft/TypeScript-React-Starter
• nodejs & eggjs
• *.d.ts文件，ts的

ts内置类型

1. document
2. DOM
3. BOM
4. Date
5. interface
6. Utility Types
   1. https://www.typescriptlang.org/docs/handbook/utility-types.html

interface Person {
  name: string,
  age: number
}
const user: Person = { name: 'lucy', age: 20 }
type IPartial = Partial<IPerson>
const user: IPartial = { name: 'lucy' } // Partial 可选的
type IOmit = Omit<Person, 'name'> // 忽略的属性
const user2: IOmit = { age: 20 }

类型推论

1. Type Inference

let str = 'lucy'
str = 200 // 报错

联合类型

1. Union Types
2. |

let str: string | number
str = 'lucy'
str = 200
str.length // 报错
str.toString() // 必须要访问共同的属性或方法
const number: number | string = 25

类型断言

1. Type Assertion
2. as, value as number

function getLength(value: string | number) {
  const str = value as string
  if (str.length) {
    return str.length
  }
  // 类型断言
  const number = value as number
  return number.toStirng().length
}

类型保护

1. Type Guard
2. typeof
3. instanceof

function getLength(value: string | number): number {
  if (typeof value === 'string') {
    return value.length
  }
  // 类型保护，智能缩小范围
  return value.toStirng().length
}

type类型别名

1. type

const sum: (x: number, y: number) => number
const result = sum(10, 20)
// type 类型别名
type NumberType = (x: number, y: number, z?:number=20) => number
const sum: NumberType
const result = sum(100, 200)
const add = function add(x: number, y: number, z:number=30): number {
    if (typeof z === 'number') return x + y + z
    return x + y
}
const add2: NumberType = add
// 联合类型
type StrOrNumber = string | number
let result3: StrOrNumber = 123
result3 = 'string'

字面量

1. 特殊的类型

const str: 'name' = 'name'
const number: 1 = 1
type Direction = 'Up' | 'Down' | 'Left' | 'Right'
const goto: Direction = 'Left' // 只能是以上四选一

交叉类型

1. &几种类型合并起来
2. ‘&’和 interface的 extends类似

interface Iname {
  name: string
}
type Person = Iname & {age: number}
const person: Person = {name: 'lucy', age: 29}