Ts 快速记忆

TS = 带类型检查的 JS

一、常规用法

1. 给变量定义类型

// 字符串
let name: string = "小明"

// 数字
let age: number = 18

// 布尔
let isStudent: boolean = true

// string || null
let str: string | null = null

// 任意类型（不推荐，但临时能用）
let anything: any = 123

2、给函数定义类型

// 1、 参数 + 返回值 都定义类型
function sum(a: number, b: number): number {
  return a + b
}
sum(1, 2) // 正确
sum("1", 2) // TS 直接报错，非常安全

// 2、void没有返回值
function log(msg: string): void {
  console.log(msg)
}

3、对象类型

// 定义一个用户类型
type User = {
  name: string
  age: number
  isVip?: boolean // ? 代表可选，可传可不传
}

// 使用
const user: User = {
  name: "小红",
  age: 20
}

4、数组类型

// 字符串数组
let strs: string[] = ["a", "b", "c"]

// 对象数组
let users: User[] = [
  { name: "a", age: 1 },
  { name: "b", age: 2 }
]

5、接口 interface

interface Product {
  id: number
  title: string
  price?: number
}

const goods: Product = {
  id: 1,
  title: "苹果"
}

二、最快补 TS 类型

1、从已有对象生成类型

const defaultUser = { name: "test", age: 0 }

type User = typeof defaultUser

const u: User = {
  id: 2,
  name: "李四",
  age: 22,
  isVip: true
}

2、从接口返回值自动拿类型

function getUser() {
  return fetch("/api/user").then(res => res.json())
}

type User = Awaited<ReturnType<typeof getUser>>

async function fetchData() {
  const data = await getUser()
  const user: User = data
}

• typeof getUser → 拿到函数类型

• ReturnType<...> → 拿到函数返回类型（Promise）

• Awaited<...> → 把 Promise 拆包，拿到里面真正的数据类型

3、批量把类型变可选 Partial

const user = { name: "", age: 0 } // 给默认字段

type User = typeof user
type PartialUser = Partial<User>

type PartialUser相当于 type {name?:string,age?:number}