TypeScript 入门知识点记录

TS 学习笔记

语法

非空断言

属性后面加!

interface Shape {
  kind: 'circle' | 'square'
  radius?: number
  sideLength?: number
}

function getArea(shape: Shape) {
  if (shape.kind == 'circle') {
    return Math.PI * shape.radius! ** 2 // 圆的面积公式 S=πr²
  }
  return 6666
}

const shape: Shape = {
  kind: 'circle',
  radius: 54,
}

console.log(getArea(shape))

默认 circle 为真时，radius 一定存在

函数重载

function makeDate(timestamp: number): Date
function makeDate(m: number, d: number, y: number): Date
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d)
  } else {
    return new Date(mOrTimestamp)
  }
}
const d1 = makeDate(12345678)
const d2 = makeDate(5, 5, 5)
const d3 = makeDate(1, 3)

// No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.

拥有任意属性的对象

可以使用对象索引签名声明、Record 工具类两种方法

// 1.对象索引签名
interface CustomObject {
  [key: string]: string
}

function fn1(data: CustomObject) {
  console.log(data)
}

// 2.使用 Record 工具类
function fn2(data: Record<string, any>) {
  console.log(data)
}

fn1(1)
fn1('')
fn1()
fn1({ name: 'zs' })
fn1({ age: 13 })

fn2(1)
fn2('')
fn2()
fn2({ name: 'zs' })
fn2({ age: 13 })

交叉类型

使用 & 链接

interface Colorful {
  color: string
}

type ColorfulSub = Colorful & {
  color: number
}

类型导入导出

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number }
// 'createCatName' cannot be used as a value because it was imported using 'import type'.
export type Dog = { breeds: string[]; yearOfBirth: number }
export const createCatName = () => 'fluffy'

// @filename: app.ts
import { createCatName, type Cat, type Dog } from './animal.js'

const name = createCatName()

高级类型

Record

左侧为属性类型，右侧为值

Pick

左侧为可选择的属性，右侧为选择好的属性

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Pick<Todo, 'title'>

const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
}

todo.completed
// const todo: TodoPreview

Omit

左侧为可选择的属性，右侧为需过滤掉的属性

interface Todo {
  title: string
  description: string
  completed: boolean
  createdAt: number
}

type TodoPreview = Omit<Todo, 'description'>

const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
  createdAt: 1615544252770,
}

Exclude

取交集

type T0 = Exclude<'a' | 'b' | 'c', 'a'>
// type T0 = "b" | "c"

type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>
// type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>
// type T2 = string | number

含义是取 T 和 K 未共有的字段

Extract

取交集

fields: Array<Extract<keyof T, keyof K>>

含义是取 T 和 K 共有的字段

ReturnType

用于构造一个含有 Type 函数的返回值的类型。

declare function f1(): { a: number; b: string }

type T0 = ReturnType<() => string>
// type T0 = string

type T1 = ReturnType<(s: string) => void>
// type T1 = void

type T2 = ReturnType<<T>() => T>
// type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>
// type T3 = number[]

type T4 = ReturnType<typeof f1>
// type T4 = {
//    a: number;
//    b: string;
// }