TypeScript

概念

• TS 是 JS 的超级 Super-Set（ JavaScript超集 ）
• 即包含 JS 所有能力再有自己的能力 — 类型检测，自动推导
• 在线编译地址：https://www.tslang.cn/play/index.html
• 文档：https://www.typescriptlang.org/
• 类型申明文件：node_modules > @types

---

环境

• 查看版本 tsc -v / npx tsc-v
• 查看所有版本 npm view typescript versions
• 安装（用于 demo）
  • 方式1：npm install -g typescript > 编译：tsc 文件名.ts
  • 方式2：npm i -D nodemon typescirpt ts-node（node环境下编译ts）> 初始化 tsconfig 文件：npx tsc --init

"scripts": {
  "start": "nodemon --exec ts-node src/xx.ts"
}

---

类型定义

• boolean、number、string、symbol

let boo: boolean // boolean
let n: number // number
let str: string // string
let s: symbol // symbol

• null undefined

let un = undefined // any
let nl = null // any
let un1: undefined // 不可修改
let nl1: null // 不可修改

• 对象

const obj: { msg: string};
const obj1: object = { x: 10 }; // 不常用
const obj2: {} = { x: 10 }; // 同上
const obj3: Object = {}; // 内置 Object 对象

• 数组

const arr1: Array<number> = [10, 20]
const arr2: string[] = ['a', 'b'] // 简写

• 函数

let func: Function = () => {}; // 不常用
let func2: (parma: string) => string

---

NewTypes

• any：任何类型
• void：无类型

let func: () => void
let b: void
b = undefined // undefined 可赋值

• unknow：未知类型：严格版的 any
  • 区别不能进行操作、可以用于传参
  • 所有类型可以分配给unknow、不能赋值给其他类型

let a: any
let b: unknown
a.toFixed(2) // 可使用原型方法
// 判断
if (typeof c === "number") {
  b.toFixed(2)
} else if (typeof c === "object" && c instanceof Array) {
  b.join("-")
}

• never：永远不存在的值或者类型

const arr: [] = [] // never[] 不常用
function error(): never {
    throw new Error('error ...')
}
function loop(): never {
    while (true) {
        console.log('死循环 ')
    }
}

---

其他

• 联合类型

let x: number | string | boolean;
const arr: Array<string | number> = [] // 联合类型

• 自动推导 ：定义初始值会自动推导类型

let n1 = 100; // number

• 可选 ？

let obj: { num?: number }

• 索引类型

let obj: { [key: string]: string }

• 类型断言： as

function fn(x: string | number) {
    if ((x as string).length) {
        return (<string>x).slice(0, 1) // <string>x 等同于 x as string
    }
}

---

元组和枚举

• **元组：**固定类型 + 长度的数组

const tuple: [string, string, string] = ['zs', 'ls', 'ww']

• 枚举：
  • 用于定义命名常量集合的数据类型
  • 如果没有值默认从0开始

enum Gender {
    Male,
    Female
}
console.log(Gender[0]) // Male
console.log(Gender[1]) // Female
console.log(Gender.Male) // 0
console.log(Gender.Female) // 1

enum Direction {
    Up,
    Down = 100,
    Left,
    Right
}

console.log(Direction.Up) // 0
console.log(Direction.Down) // 100
console.log(Direction.Left) // 101

---

interface

• 定义任意结构或者类型
• 相同名字的两个接口会进行合并，但是属性不能重复定义
• 和 type（类型别名） 的区别：type 可以定义联合类型和交叉类型

interface Point {
    readonly x: number // 只读
    y?: number
}
interface Point {
    z: number
}
const point: Point = {
    x: 1,
    y: 2,
    z: 3
}

• 继承：extends

interface Top {
    a: () => number
}
interface Bottom {
    b: number
}
interface Home extends Top, Bottom {}

• 类型兼容：ts 是鸭子类型，面向接口

interface PassCheck {
    name: string
    age: number
}
const getTypes = (obj: PassCheck) => {}
const options = {
    name: 'zs',
    age: 18,
    other: '没有的属性'
}
getTypes(options)

---

类

• pulic - 允许外部（实例）调用
• protected 允许父类和继承子类中（子类构造器或方法）使用
• prevate - 只允许父类使用
• 继承(泛化)，封装（修饰符控制外部访问权限），多态（子类可以拥有自己的方法）

class Person {
    name = 'zhangsan' // public 外部可访问
    protected weight = '70kg' // 子类可使用
    private phone = '110' // 私有
    getInfo() {}
}

• 继承

class Person {
    getInfo() {}
}
class Girl extends Person {
    getInfo() {} // 重写、覆盖父类
}

• implements：继承接口

interface FoodProps {
    type: string
}
class FoodClass implements FoodProps {
    constructor(public type: string) {}
}

---

泛型

• 指在定义接口或类的时候不预先指定数据类型

function swapGeneric<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]]
}
console.log(swapGeneric<number, string>([1, 'zs'])) // [ 'zs', 1 ]

• 接口定义

interface IPlus<T, U> {
    (a: T, b: U): T
}
const ap: IPlus<number, string> = (a: number, b: string): number => {
    return +a + +b
}

• length 用法

interface Ps {
    length: number
}
function echoWithLength<T extends Ps>(arg: T): T {
    return arg
}
const strRef = echoWithLength<string>('zs')
const objRef = echoWithLength({
    name: 'zs',
    length: 1
})
const arrRef = echoWithLength([1, 2, 3])

---

utility

• keyof：类似 Object.keys() 获取所有的键值对以联合类型定义

interface Student {
  id: number
  name: string
  age: number
}
type keys = keyof Student // 'id' | 'name' | 'age'
type Users = {
    [k in keys]: string
}

• typeof： 获取变量或值的类型的运算符

const x = 'zs'
type Student = typeof x // string

• Parameters： 将参数以元组形式定义

function personMan(age: number, name: string) {}
let p: Parameters<typeof personMan> //  [age: number, name: string]

• Partial： 属性皆为可选，相当于每个属性添加?

type Person = {
    name: string
    job: string
    age: number
}
const p1: Partial<Person> = { name: undefined }

• Omit： 删除对应属性，定义剩余属性

const o1: Omit<Person, 'job' | 'age'> = { name: 'zs' } // 删除 Person 中的 job 和 age

• Pick： 挑选类型

const s1: Pick<Person, 'name'> = { name: 'lisi' }

• Exclude： 取出键值对作为值类型声明，第一个参数是一个联合类型

const y1: Exclude<keyof Person, 'name'> = 'job' // "job" | "age"

• as const
  • 数组经过 typeof 会转换成相应元素类型的数组
  • 使用 as const 强制内容必须一致

const arr = [1, 2]
type A = typeof arr // number[]
const arrConet = [1, 2] as const
type AC = typeof arrConet //  readonly [1, 2]

---

案例

• 传入数组将数组内容转换成对象的键值对

const returnPropsToObj = <K extends string>(keys: K[]) => {
    let obj = {} as { [key in K]: string }
    keys.forEach(item => {
        obj[item] = '' // ... do something
    })
    return obj
}
const x = returnPropsToObj(['name', 'id']) //  { name: string; id: string }