简单类型

小的兼容大的

Untitled

普通对象的兼容

Untitled

type Person = {
  name: string
  age: number
}
let user = {
  name: 'Lance',
  age: 18,
  id: 1,
  email: '[email protected]'
}
let p: Person
p = user

反向定义 type

let user = {
  name: 'Lance',
  age: 18,
  id: 1,
  email: '[email protected]'
}
type User = typeof user

Untitled

父子接口类型兼容

Untitled

复杂的函数兼容

函数包括参数和返回值
TS 可以容忍参数变少，但不能参数变多
巧记：不能无中生有

Untitled

let fn1 = (a: number) => {
  console.log(a);
}
let fn2 = (b: number, s: string) => {
  console.log(b, s);
}
fn2 = fn1 // OK
fn1 = fn2 // 报错

Untitled

interface MyEvent {
  target: string
}
interface MyMouseEvent extends MyEvent {
  x: number
  y: number
}
let listener = (e: MyEvent) => console.log(e.target);
let mouseListener = (e: MyMouseEvent) => console.log(e.x, e.y);
mouseListener = listener
listener = mouseListener

Untitled

使用类型断言

interface MyEvent {
  target: number
}
interface MyMouseEvent extends MyEvent {
  x: number
  y: number
}
function listenEvent(eventType: string, fn: (e: MyEvent) => void) {
 /* ... */ 
}
// 我们希望这样用
listenEvent('click', (e: MyMouseEvent) => console.log(e.x + ',' + e.y))
// 但只能这样用
listenEvent('click', (e: MyEvent) => {
  console.log((e as MyMouseEvent).x + ',' + (e as MyMouseEvent).y);
})
// 还可以这样用
listenEvent('click', ((e: MyMouseEvent) => 
  console.log(e.x + ',' + e.y)) as (e: MyEvent) => void);
// 这个就太离谱了
listenEvent('click', (e: number) => console.log(e))

不想要function报错的配置

Untitled

返回值类型不同的兼容

Untitled

let a = () => {
  return { name: 'Lance' }
}
let b = () => {
  return { name: 'La', age: 23 }
}
b = a // 报错
a = b // OK

赋值表

Untitled

顶类型、底类型

unknown 顶类型
never 底类型

JSON类型定义

type JSONValue =
  | string
  | number
  | null
  | boolean
  | JSONValue[]
  | { [k: string]: JSONValue }
// 最后一个无线递归