# javascript vs typescript vs flow

flow 是 React 库的类型定义，facebook

还有其他的比如：jsdoc

JavaScript 遇到的问题

莫名的 undefined
方法的定义和参数推到不规范
注释也写得不好
string 突然变为 number
关于 ECMAScript 新特性，JavaScript 语言支持比较晚

怎么解决：

规范，定义 eslint rule
运行时的检查，typescript
文档规范

# typescript 基础语法

JavaScript 的数据类型

number、string、null、undefined、boolean、Symbol、BigInt

object

Date
RegExp
Array

function

# 类型联合

type Size = number | string

类型守卫

function isNumberType (size: Size): size is number {
  return typeof size === 'number'
}

# 类型交叉

&

implements 和 extends 的区别。

implements 是抽闲约束，必须实现， extends 是继承，可以不实现

交叉和联合的去呗

交叉是针对对象，将多个类型合并为一个类型，包含所有的类型特性
联合只能使用共有的特性

交叉类型表示一个值必须同时具有多个类型的特征，使用 “&” 分隔类型。

联合类型表示一个值可以是多种类型之一，使用 “|” 分隔类型。区别如下：

交叉类型是多个类型的合并，取多个类型的交集。
联合类型是多个类型的选择，可以是其中一个类型。

# type 和 interface 的区别

interface 可以重复定义，type 不可以重复定义。
interface 可以继承，type 不可以继承。
interface 可以定义对象，type 只能定义类型。

interface ButtonProps {
  type: ButtonSize;
}

type ButtonSize = 'small' | 'large' | number;

// type 也可以定义对象
type ButtonA = {
  type: ButtonProps['type'];
}

# 泛型


// 实现一个 Pick
type MyPick<V, K extends keyof V> = {
  // K 是约束的 keyof V，所以 P 只能是 K 的数据
  [key in K]: V[key]

  // V[key] 等于上面的 type: ButtonProps['type']; 的 ButtonProps['type']
}

# extends & infer

infer 智能推导

type Fn = (name: string, age: number) => void;
const t: Fn = (name) => {}

//  先检查传入进来的函数符不符合我们的约束，符合则返回推到出的类型，否则返回 never
type TestParams<F> = F extends (...args: infer P) => any ? P : never

type TestParams1<F> = F extends (name: infer P, age: infer A) => any ? P | A : never

let f: TestParams<Fn>

// react-hook-form 学习 类型推到

# 运行时的类型检查

zod, yup, joi, io-ts，首推 zod

# 装饰器、反射

nextjs

# TypeScript 的原理

Scanner 扫描器 (scanner.ts)
Parser 解析器 (parser.ts)
Binder 绑定器 (binder.ts)
Checker 检查器 (checker.ts)
Emitter 生成器 (emitter.ts)

← 手写题数据结构 →