函数的注解方式
函数声明的注解方式
function test(a: number, b: number): number {
return a + b
}
function test1(a: number, b: number): void {
console.log(a + b);
}
function test2(a: number, b: number): never {
console.log(a + b);
throw new Error()
}
函数表达式的注解方式
// 不用给 function 后边写注解, 因为会根据前边的注解来做类型推断
let test: (a: number, b: number) => number = function (a, b) {
return a + b
}
let test1: (a: number, b: number) => void = function (a, b) {
console.log(a + b);
}
let test2: (a: number, b: number) => never = function (a, b) {
console.log(a + b);
throw new Error()
}
可选参数和默认参数
// 默认:传递给一个函数的参数个数必须与函数期望的参数个数一致。
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 少一个参数 // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr."); // 多一个参数 // error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right
可选参数
// 注意:可选参数必须要放在必选参数的后边,否则会报错。
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // is OK
let result2 = buildName("Bob", "Adams", "Sr."); // 错误,多个一参数
let result3 = buildName("Bob", "Adams"); // is OK
默认值
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined); // still works, also returns "Bob Smith"
console.log(result1, result2); // Bob Smith Bob Smith
剩余参数
// ...restOfName: string[] 一定要放在最后边,和ES6的扩展运算符一样
function buildName(firstName: string, lastName = 'Smith', ...restOfName: string[]) {
return firstName + " " + lastName + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas");
解构赋值在TS中的使用
function test(
{ a, b }: { a: number, b: number } = { a: 1, b: 2 }
) {
return a + b
}
console.log(test()); // 3
this指向
有时候我我们需要在函数中使用this来去指定那个示例对象, TS提供俩种方式
方式一: 使用箭头函数 + 配置noImplicitThis = true (不配置 this是any)
let deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function () {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
}
}
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
alert("card: " + pickedCard.card + " of " + pickedCard.suit);
方式二:使用 interface
interface Card {
suit: string
card: number
}
interface Deck {
suits: string[]
cards: number[]
createCardPicker(this: Deck): () => Card
}
let deck: Deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function () {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
}
}
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
alert("card: " + pickedCard.card + " of " + pickedCard.suit);
这样 this 就会指向 Deck
函数的重载
// 官网的例子太麻烦了, 我以 翻转字符串或者数字来举例
// 翻转 字符串或者数字
function reverse(foo: string): string
function reverse(foo: number): number
function reverse(foo: string | number) {
if (typeof foo === 'string') {
return foo.split('').reverse().join('')
}
if (typeof foo === 'number') {
return Number(foo.toString().split('').reverse().join(''))
}
}
console.log(reverse(‘123456’)); // 字符串类型的 '654321'
console.log(reverse(123456)); // 数字类型的 654321
看着是不是好像没什么太大的区别?
// 其实 typescript 重载的意义在于 表意更清楚
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!