Function

confuse of : and => (quick reference)

// Simple type for a function, use =>
type FnType = (arg: ArgType) => ReturnType
// Every other time, use :
type FnAsObjType = {
  (arg: ArgType): ReturnType
}
interface InterfaceWithFn {
  fn(arg: ArgType): ReturnType
}
const fnImplementation = (arg: ArgType): ReturnType => {
  /* implementation */
}

Function declarations

// 推断返回
function sum(a: number, b: number) {
  return a + b
}
// 定义返回
function sum(a: number, b: number): number {
  return a + b
}

Function Expression 函数表达式

// named function expression 命名函数
const sum = function sum(a: number, b: number): number {
  return a + b
}
// annonymous function expression 匿名函数
const sum = function (a: number, b: number): number {
  return a + b
}
// arrow function 箭头函数
const sum = (a: number, b: number): number => {
  return a + b
}
// implicit return 隐式返回
const sum = (a: number, b: number): number => a + b
// implicit return of an object requires parentheses to disambiguate the curly braces 隐式返回对象，需要圆括号来消除花括号的歧义
const sum = (a: number, b: number): {result: number} => ({result: a + b})

sum = (a, b) => a + b 的类型声明：

const sum: (a: number, b: number) => number = (a, b) => a + b
// 等价于
type MathFn = (a: number, b: number) => number
const sum: MathFn = (a, b) => a + b
// 等价于
type MathFn = {
  (a: number, b: number): number
}
const sum: MathFn = (a, b) => a + b
// 上面的方式可以添加属性
type MathFn = {
  (a: number, b: number): number
  operator: string
}
const sum: MathFn = (a, b) => a + b
sum.operator = '+'
// type 也可以替换为 interface
interface MathFn {
  (a: number, b: number): number
  operator: string
}
const sum: MathFn = (a, b) => a + b
sum.operator = '+'
// 使用 declare function 和 declare namespace
declare function MathFn(a: number, b: number): number
declare namespace MathFn {
  let operator: '+'
}
const sum: typeof MathFn = (a, b) => a + b
sum.operator = '+'

Optional/Default params 可选参数/默认参数

可选参数

const sum = (a: number, b?: number): number => a + (b ?? 0)   // sum(1)
const sum = (a: number | undefined, b: number): number => (a ?? 0) + b // sum(undefined, 2)

默认参数

const sum = (a: number, b: number = 0): number => a + b
const sum = (a: number, b: number | undefined = 0): number => a + b
type MathFn = (a: number | undefined, b: number) => number
const sum: MathFn = (a = 0, b) => a + b

Rest params 剩余参数

const sum = (a: number = 0, ...rest: Array<number>): number => {
  return rest.reduce((acc, n) => acc + n, a)
}
// extract the type:
type MathFn = (a?: number, ...rest: Array<number>) => number
const sum: MathFn = (a = 0, ...rest) => rest.reduce((acc, n) => acc + n, a)

Object properties and Methods 对象属性和方法

Classes

class MathUtils {
  sum(a: number, b: number): number {
    return a + b
  }
}
class MathUtils {
  sum = (a: number, b: number): number => {
    return a + b
  }
}
interface MathUtilsInterface {
  sum(a: number, b: number): number
}
class MathUtils implements MathUtilsInterface {
  sum(a: number, b: number): number {
    return a + b
  }
}

Modules

默认导出

declare const sum: {
  (a: number, b: number): number
  operator: string
}
export default sum

普通导出

declare const sum: {
  (a: number, b: number): number
  operator: string
}
export {sum}

Overloads

Define function overload types with TypeScript

type asyncSumCb = (result: number) => void
// define all valid function signatures
function asyncSum(a: number, b: number): Promise<number>
function asyncSum(a: number, b: number, cb: asyncSumCb): void
// define the actual implementation
// notice cb is optional
// also notice that the return type is inferred, but it could be specified
// as `void | Promise<number>`
function asyncSum(a: number, b: number, cb?: asyncSumCb) {
  const result = a + b
  if (cb) return cb(result)
  else return Promise.resolve(result)
}

Generators

Async

const sum = async (a: number, b: number): Promise<number> => a + b
async function sum(a: number, b: number): Promise<number> {
  return a + b
}

Generics

const arrayify = <Type extends unknown>(a: Type): Array<Type> => [a]

Type Guards

Assertion functions

TypeScript Function Syntaxes