TypeScript

60 阅读1分钟

基础

字面量类型

枚举类型

any类型

类型断言

typeof 操作符

keyof 操作符

interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string | number

高级

泛型

function fn<T>(ags: T): T {
  return ags
}
fn(123)
fn('123')

泛型约束

interface ILength {
  length: number
}
function fn<T extends ILength>(ags: T): T {
  ags.length
  return ags
}
fn([])
fn({ length: 1 })
fn('123')

泛型多个类型关联

let obj = {
  name: 'zs',
  age: 18,
}

function fn<T, Key extends keyof T>(obj: T, key: Key) {
  return obj[key]
}
fn(obj, 'name')

泛型接口

interface IObj<T> {
  fn(a: T): T
  name: string
}

let obj1: IObj<number> = {
  fn(a) {
    return a
  },
  name: 'zs',
}
obj1.fn(1)

泛型工具类

Partial

作用:生成一个新类型,该类型与 T 拥有相同的属性,但是所有属性皆为可选项

type User = {
  name: string
  age: number
}

function fn(obj: Partial<User>) {
  console.log(obj.name)
}
fn({ name: 'zs', age: 20 })

Readonly

作用:生成一个新类型,该类型与 T 拥有相同的属性,但是所有属性皆为必选项

type ReadonlyUser = Readonly<{
  name: string
  age: number
}>

const user: ReadonlyUser = { name: 'zs', age: 12 }
user.name

Pick

作用:抽取 根据某一种类型构造出一组新的类型

type User = {
  name: string
  age: number
  children: string[]
}

type User2 = Pick<User, 'name' | 'age'>

const user: User = { name: 'zs', age: 12, children: ['123'] }
const user2: User2 = { name: 'ls', age: 13 }

Omit

作用:排除

type User = {
  name: string
  age: number
  children: string[]
}

type User2 = Omit<User, 'name'>

const user: User = { name: 'zs', age: 12, children: ['123'] }
const user2: User2 = { age: 13, children: ['123'] }

对象类型 interface vs type

  • interface(接口)和type(类型别名)的对比:
  • 相同点:
  • 都可以给对象指定类型;
  • 不同点:
  • 接口:只能给对象指定类型;
  • 类型别名:不仅可以给对象指定类型,实际上可以为任意类型指定别名;
  • 推荐能用type就用type;
  • 接口继承:
interface IPoint {
      
}