在 TypeScript 中,
基本用法:
1. 函数声明
function add(x: number, y: number): number { return x + y; }
在这个例子中,
2. 箭头函数
const divide = (a: number, b: number): number => a / b;
箭头函数是一种更简洁的函数表达式语法。它自动继承外部作用域的
3. 可选参数和默认参数:
function greet(name: string, greeting?: string): string { if (greeting) { return `${greeting}, ${name}!`; } else { return `Hello, ${name}!`; } } // 调用 console.log(greet("John")); // Hello, John! console.log(greet("John", "Good morning")); // Good morning, John!
在这个例子中,
4. 函数重载
function combine(a: string, b: string): string; function combine(a: number, b: number): number; function combine(a: any, b: any): any { return a + b; } // 调用 console.log(combine("Hello", " TypeScript")); // Hello TypeScript console.log(combine(5, 10)); // 15
函数重载允许你为同一个函数提供多个类型的定义,以便根据不同的参数类型执行不同的逻辑。
5. 剩余参数:
function sum(...numbers: number[]): number { return numbers.reduce((total, num) => total + num, 0); } // 调用 console.log(sum(1, 2, 3, 4, 5)); // 15
-
‘...numbers’ 这部分使用了扩展运算符... ,它将函数接收到的所有参数(剩余的参数)收集到一个数组中。在这个例子中,剩余的参数将被收集到名为numbers 的数组中。 -
‘;number[]’ 这部分是类型注解,指定了numbers 的类型为number[] ,即numbers 是一个由数字组成的数组。
最后使用
6. 箭头函数和 this:
箭头函数不会创建自己的
class Counter { value = 0; increment = () => { this.value++; console.log(this.value); }; } const counter = new Counter(); counter.increment(); // 输出:1
在这个例子中,
-
箭头 ‘
=> ’ 表示函数的定义。 -
‘
() ’ 括号中表示函数的参数列表,这里是空括号,表示该函数没有参数。 -
‘{ ... }’ 大括号中包含函数体,即函数要执行的代码。 -
‘this’ 指向当前的Counter 实例,‘this.value’表示初始化了一个名为value 的成员变量,初始值为0 。‘++ ’ 这是递增运算符,它将变量的值加一。‘this.value++ ’ 表示对this (当前类的实例)的value 属性进行递增操作,即将value 的值加一。所以,当调用counter.increment(); 时,执行了increment 方法,其中的this.value++ 将value 的值从0 递增到了1 。这样,value 表示了类Counter 实例的状态,每次调用increment 方法,它都会递增一次。