Cao Note

外观

Typescript 接口与函数 ​

一、接口（Interface） ​

接口用于定义对象的类型结构。

基本使用 ​

ts
interface Vegetable {
  color?: string     // 可选属性
  type: string       // 必填属性
  readonly size: number // 只读属性
}

const getVegetable = ({ color, type }: Vegetable): string => {
  return `${color ? color + ' ' : ''}${type}`
}
interface Vegetable {
  color?: string     // 可选属性
  type: string       // 必填属性
  readonly size: number // 只读属性
}

const getVegetable = ({ color, type }: Vegetable): string => {
  return `${color ? color + ' ' : ''}${type}`
}

任意属性 ​

处理对象有多余属性的情况：

ts
// 方式一：索引签名
interface Vegetable {
  color?: string
  type: string
  [prop: string]: any  // 任意字符串属性
}

// 方式二：类型断言
getVegetable({ color: 'red', type: 'tomato', size: 2 } as Vegetable)

// 方式三：提取变量
const info = { color: 'red', type: 'tomato', size: 2 }
getVegetable(info)
// 方式一：索引签名
interface Vegetable {
  color?: string
  type: string
  [prop: string]: any  // 任意字符串属性
}

// 方式二：类型断言
getVegetable({ color: 'red', type: 'tomato', size: 2 } as Vegetable)

// 方式三：提取变量
const info = { color: 'red', type: 'tomato', size: 2 }
getVegetable(info)

索引类型 ​

ts
// 数字索引 → 数组风格
interface RoleDic {
  [index: number]: string
}
const role: RoleDic = { 0: 'admin' }

// 字符串索引
interface RoleDic2 {
  [id: string]: string
}
const role2: RoleDic2 = { 0: 'admin' }  // 数字会 toString
// 数字索引 → 数组风格
interface RoleDic {
  [index: number]: string
}
const role: RoleDic = { 0: 'admin' }

// 字符串索引
interface RoleDic2 {
  [id: string]: string
}
const role2: RoleDic2 = { 0: 'admin' }  // 数字会 toString

接口继承 ​

ts
interface Vegetable {
  color: string
}
interface Tomato extends Vegetable {
  radius: number
}
// Tomato 必须包含 color 和 radius
interface Vegetable {
  color: string
}
interface Tomato extends Vegetable {
  radius: number
}
// Tomato 必须包含 color 和 radius

混合类型 ​

一个函数同时拥有属性和方法：

ts
interface Counter {
  (): void             // 可调用
  count: number        // 拥有属性
}

const getCounter = (): Counter => {
  const c = () => { c.count++ }
  c.count = 0
  return c
}
interface Counter {
  (): void             // 可调用
  count: number        // 拥有属性
}

const getCounter = (): Counter => {
  const c = () => { c.count++ }
  c.count = 0
  return c
}

接口总结 ​

ts
interface Person {
  name: string
  age?: number
  readonly size: number
  [prop: string]: any
}
interface Person {
  name: string
  age?: number
  readonly size: number
  [prop: string]: any
}

二、函数 ​

函数声明 ​

ts
function sum(x: number, y: number): number {
  return x + y
}
function sum(x: number, y: number): number {
  return x + y
}

函数表达式 ​

ts
// 正确的类型声明
let add: (x: number, y: number) => number = (arg1: number, arg2: number): number => {
  return arg1 + arg2
}
// 正确的类型声明
let add: (x: number, y: number) => number = (arg1: number, arg2: number): number => {
  return arg1 + arg2
}

类型别名定义函数 ​

ts
type Add = (x: number, y: number) => number
type Add = (x: number, y: number) => number

可选参数 ​

可选参数必须放在最后面：

ts
type AddFunction = (arg1: number, arg2: number, arg3?: number) => number
type AddFunction = (arg1: number, arg2: number, arg3?: number) => number

默认值 ​

有默认值的参数不需要类型声明，会自动推断：

ts
const add = (arg1: number, arg2 = 3): number => arg1 + arg2
const add = (arg1: number, arg2 = 3): number => arg1 + arg2

剩余参数 ​

ts
const handleData = (arg1: number, ...args: number[]) => {}
const handleData = (arg1: number, ...args: number[]) => {}

函数重载 ​

同一个函数根据参数类型做不同处理：

ts
function reverse(x: number): number[]
function reverse(x: string): string[]
function reverse(x: any): any {
  if (typeof x === 'string') {
    return x.split('')
  }
  return x.toString().split('').map((item: string) => Number(item))
}
function reverse(x: number): number[]
function reverse(x: string): string[]
function reverse(x: any): any {
  if (typeof x === 'string') {
    return x.split('')
  }
  return x.toString().split('').map((item: string) => Number(item))
}

Copyright © 2024-present xiaocao