Cao Note

外观

Typescript 总结 ​

基础类型 ​

ts
let bool: boolean = true
let num: number = 1
let str: string = 'str'
let u: undefined = undefined
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2]
let arr3: (string | number)[] = [1, '2']
let tuple: [string, number, boolean] = ['a', 1, true]
let anyArr: any[] = [1, {}, []]

const test = (text: string): void => {}
let value: unknown
const getObj = (obj: object): void => {}
let bool: boolean = true
let num: number = 1
let str: string = 'str'
let u: undefined = undefined
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2]
let arr3: (string | number)[] = [1, '2']
let tuple: [string, number, boolean] = ['a', 1, true]
let anyArr: any[] = [1, {}, []]

const test = (text: string): void => {}
let value: unknown
const getObj = (obj: object): void => {}

类型断言 ​

ts
(target as string).length
(<string>target).length
(window as any).foo = 1
let x = name!    // 非空断言
let a!: number   // 确定赋值断言
let y = 'y' as const  // const 断言
(target as string).length
(<string>target).length
(window as any).foo = 1
let x = name!    // 非空断言
let a!: number   // 确定赋值断言
let y = 'y' as const  // const 断言

接口 ​

ts
interface Vegetable {
  name: string
  age?: number
  readonly type: string
  [prop: string]: any
}
interface Tomato extends Vegetable {
  radius: number
}
interface Vegetable {
  name: string
  age?: number
  readonly type: string
  [prop: string]: any
}
interface Tomato extends Vegetable {
  radius: number
}

函数 ​

ts
let add: (x: number, y: number) => number = (arg1: number, arg2: number): number => arg1 + arg2
type Add = (arg1: number, arg2?: number, ...args: number[]) => number

// 函数重载
function reverse(x: number): number[]
function reverse(x: string): string[]
function reverse(x: any): any {
  return typeof x === 'string' ? x.split('') : x.toString().split('').map(Number)
}
let add: (x: number, y: number) => number = (arg1: number, arg2: number): number => arg1 + arg2
type Add = (arg1: number, arg2?: number, ...args: number[]) => number

// 函数重载
function reverse(x: number): number[]
function reverse(x: string): string[]
function reverse(x: any): any {
  return typeof x === 'string' ? x.split('') : x.toString().split('').map(Number)
}

泛型 ​

ts
const getArray = <T, U>(value: T, params: U): Array<[T, U]> => {}

interface GetArr<T> {
  (arg1: T, times: number): T[]
  array: T[]
}

// 泛型约束
const getArr = <T, K extends keyof T>(object: T, params: K): T[K] => object[params]

// 泛型默认值
function createArr<T = string>(params: T): Array<T> { return [params] }
const getArray = <T, U>(value: T, params: U): Array<[T, U]> => {}

interface GetArr<T> {
  (arg1: T, times: number): T[]
  array: T[]
}

// 泛型约束
const getArr = <T, K extends keyof T>(object: T, params: K): T[K] => object[params]

// 泛型默认值
function createArr<T = string>(params: T): Array<T> { return [params] }

类 ​

ts
class Parent {
  public age?: number
  public readonly name: string
  public static age2: number = 18
  private _info: string
  constructor(name: string, age?: number, public city: string) {
    this.name = name
  }
  get infoStr(): string { return this._info }
  set infoStr(val) { this._info = val }
}

abstract class People {
  constructor(public name: string) {}
  public abstract printName(): void
}
class Man extends People {
  constructor(name: string) { super(name) }
  public printName() {}
}

const create = <T>(c: new () => T): T => new c()
class Parent {
  public age?: number
  public readonly name: string
  public static age2: number = 18
  private _info: string
  constructor(name: string, age?: number, public city: string) {
    this.name = name
  }
  get infoStr(): string { return this._info }
  set infoStr(val) { this._info = val }
}

abstract class People {
  constructor(public name: string) {}
  public abstract printName(): void
}
class Man extends People {
  constructor(name: string) { super(name) }
  public printName() {}
}

const create = <T>(c: new () => T): T => new c()

枚举 ​

ts
enum Result { Failed = 0, Success = 'success' }
interface Status { type: Result.Success }
const status: Status = { type: Result.Success }
enum Result { Failed = 0, Success = 'success' }
interface Status { type: Result.Success }
const status: Status = { type: Result.Success }

高级类型 ​

ts
// 交叉类型
const mergeFunc = <T, U>(arg1: T, arg2: U): T & U => ({ ...arg1, ...arg2 })

// 类型保护
function isString(value: string | number): value is string {
  return typeof value === 'string'
}

// 索引访问
interface Info { name: string }
type Str = Info['name']

// 条件类型
type Type1<T> = T extends string ? string : number

// 映射类型
type Readonly<T> = { readonly [P in keyof T]: T[P] }
type Partial<T> = { [P in keyof T]?: T[P] }
// 交叉类型
const mergeFunc = <T, U>(arg1: T, arg2: U): T & U => ({ ...arg1, ...arg2 })

// 类型保护
function isString(value: string | number): value is string {
  return typeof value === 'string'
}

// 索引访问
interface Info { name: string }
type Str = Info['name']

// 条件类型
type Type1<T> = T extends string ? string : number

// 映射类型
type Readonly<T> = { readonly [P in keyof T]: T[P] }
type Partial<T> = { [P in keyof T]?: T[P] }

keyof / in / typeof ​

ts
interface Info { name: string; age: number }
let info: keyof Info  // 'name' | 'age'
let values: Info[keyof Info]  // string | number

type ReadInfo<T> = { readonly [P in keyof T]: T[P] }

let obj = { name: 'hhh', age: 18 }
type Obj = typeof obj  // { name: string; age: number }
interface Info { name: string; age: number }
let info: keyof Info  // 'name' | 'age'
let values: Info[keyof Info]  // string | number

type ReadInfo<T> = { readonly [P in keyof T]: T[P] }

let obj = { name: 'hhh', age: 18 }
type Obj = typeof obj  // { name: string; age: number }

常用映射类型：Readonly、Partial、Pick、Record、ReturnType、Exclude、Extract、NonNullable、InstanceType

const 断言 ​

ts
const obj = { name: 'hny' } as const
const arr = ['uat', 'pre'] as const
type Keys = (typeof arr)[number]  // 'uat' | 'pre'
type ObjKey = keyof typeof obj    // 'name'
type ObjVal = (typeof obj)[keyof typeof obj]  // 'hny'
const obj = { name: 'hny' } as const
const arr = ['uat', 'pre'] as const
type Keys = (typeof arr)[number]  // 'uat' | 'pre'
type ObjKey = keyof typeof obj    // 'name'
type ObjVal = (typeof obj)[keyof typeof obj]  // 'hny'

Copyright © 2024-present xiaocao