TypeScript 学习笔记函数

prtyaa 2023-12-26 17:28:51  64836

分类专栏：资讯

函数是应用程序的基本组成部分，在 TypeScript 中声明函数和 JavaScript 类似：

function name(parameter: type, parameter:type,...): returnType {
   // do something
}

和 JavaScript 不同的是它允许你为参数和返回值设置类型声明。

例如：

function add(a: number, b: number): number {
    return a + b;
}

add() 函数接受两个数字类型的参数，执行后的返回值也是一个数字。

如果传递的参数值或者返回值和声明不一致，则报错。例如：

let sum = add('10', '20');

报错：

error TS2345: Argument of type '"10"' is not assignable to parameter of type 'number'

如果函数没有返回值，可以设置它的返回值类型为 void。

function echo(message: string): void {
    console.log(message.toUpperCase());
}

如果没有注明返回值的类型，TypeScript 会尝试猜测它的类型。例如：

function add(a: number, b: number) {
    return a + b;
}

这个例子中 TypeScript 编译器根据参数的类型会推测出返回值是 number 类型。

函数类型表达式

函数类型由两部分组成：参数和返回值。在声明函数类型时，这两部分都需要指定：

(parameter: type, parameter:type,...) => type

例如：

let add: (x: number, y: number) => number;

接下来就可以编写 add 函数了，例如：

add = (x: number, y: number): number => {
  return x + y;
}

非必填参数

有时函数的某些参数不是必填的，此时可以参数名后增加一个问号 ? 如下：

function multiply(a: number, b: number, c?: number): number {

    if (typeof c !== 'undefined') {
        return a * b * c;
    }
    return a * b;
}

默认参数

JavaScript 自 ES2015(ES 6)开始支持了默认参数值，格式如下：

function name(parameter1=defaultValue1,...) {
   // do something
}

例如：

function applyDiscount(price, discount = 0.05) {
    return price * (1 - discount);
}

console.log(applyDiscount(100)); // 95

和 JavaScript 类似，TypeScript 格式如下：

function name(parameter1:type=defaultvalue1, parameter2:type=defaultvalue2,...) {
   //
}

上面的例子可以改写为：

function applyDiscount(price: number, discount: number = 0.05): number {
    return price * (1 - discount);
}

console.log(applyDiscount(100)); // 95

函数重载

有些函数允许接受不同数量和类型的参数，例如编写了一个创建日期对象的函数，它可以接收一个代表时间戳的数字，或者三个分别代表月/日/年的数字。

可以这样做：

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);

在这个例子中，我们写了2个重载：其中一个接受一个参数，另一个接受三个参数。

构造签名 Construct Signatures

函数也可以用 new 操作符调用，这时我们称之为构造函数。句法如下：

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}

例子：

type PersonConstructor = {
  new (s: string): any;
};
function fn(ctor: PersonConstructor) {
  return new ctor("John");
}

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
console.log(fn(Person).name);

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30924

赞同 0

评论 0 条

TypeScript 学习笔记 函数