TS 从 0 到 1 - TypeScript 函数

# TypeScript 函数 与 JavaScript 函数区别

TypeScript	JavaScript
含有类型	无类型
箭头函数	箭头函数
函数类型	无函数类型
必填和可选参数	所有参数都是可选的
默认参数	默认参数
剩余参数	剩余参数
函数重载	无函数重载

# 箭头函数

# 常见语法

代码语言：javascript复制

myBooks.forEach(() => console.log('reading'));

myBooks.forEach(book => console.log(book));

myBooks.forEach((book, index) => {
  console.log(book, index)
});

myBooks.forEach((book, index, arr) => {
  console.log(book, index, arr)
});

# 使用示例

代码语言：javascript复制

function Book() {
  let self = this;
  self.publishDate = 2022;
  setInterval(function () {
    console.log(self.publishDate);
  }, 1000);
}

function Book() {
  this.publishDate = 2022;
  setInterval(() => {
    console.log(this.publishDate);
  }, 1000);
}

# 参数类型和返回类型

代码语言：javascript复制

function createUserId(name: string, id: number): string {
  return name   id;
}

# 函数类型

代码语言：javascript复制

let IdGenerator: (chars: string, nums: number) => string;

function createUserId(name: string, id: number): string {
  return name   id;
}

IdGenerator = createUserId;

# 可选参数及默认参数

代码语言：javascript复制

// 可选参数
function createUserId(name: string, id: number, age?: number): string {
  return name   id;
}

// 默认参数
function createUserId(
  name = 'cell',
  id: number,
  age?: number
): string {
  return name   id;
}

注意实际使用时，需要注意的是可选参数要放在普通参数的后面，不然导致编译错误。

# 剩余参数

代码语言：javascript复制

function push(array, ...items) {
  items.forEach(function (item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

# 函数重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的能力。

代码语言：javascript复制

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;

type Combinable = number | string;
function add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString()   b.toString();
  }
  return a   b;
}

在定义重载时，一定要把最精确的定义放在最前面。

typescript function string 函数 语法

0 人点赞