·  阅读 10583

# 招式一：函数声明（function declaration）

``````// function.ts
function sum(x: number, y: number): number {
return x + y;
}

``````// function2.ts
function sum2(x: number, y: number): number {
return x + y;
}

sum2(1, 2);

sum2(1, 2, 3);

sum2(1);

// 0.0.6/function2.ts:7:12 - error TS2554: Expected 2 arguments, but got 3.
// 7 sum2(1, 2, 3);

// 0.0.6/function2.ts:9:1 - error TS2554: Expected 2 arguments, but got 1.
// 9 sum2(1);

// 0.0.6/function2.ts:1:26
// 1 function sum2(x: number, y: number): number {
// An argument for 'y' was not provided.

# 招式二：函数表达式（function expression）

``````// function3.ts
const sum3 = function(x: number, y: number): number {
return x + y;
}

``````// function4.ts
const sum4: (x: number, y: number) => number = function(x: number, y: number): number {
return x + y;
}

# 招式三：接口定义（interfaces）

``````// function5.ts
interface Function5 {
(x: string, y: string): boolean
}

let function5: Function5 = (x: string, y: string) => {
return x.search(y) > -1;
}

# 可选参数

``````// function6.ts
const showMyName = (firstName: string, lastName?: string): string => {
if(lastName) {
return `\${firstName}\${lastName}`;
} else {
return firstName;
}
}
console.log(showMyName('pr'));
console.log(showMyName('江湖', '再见'));

``````// function6.js
var showMyName = function (firstName, lastName) {
if (lastName) {
return "" + firstName + lastName;
}
else {
return firstName;
}
};
console.log(showMyName('pr'));
console.log(showMyName('江湖', '再见'));

``````// function7.ts
const showMyName7 = (firstName?: string, lastName: string): string => {
if(firstName) {
return `\${firstName}\${lastName}`;
} else {
return lastName;
}
}

// 0.0.6/function7.ts:1:42 - error TS1016: A required parameter cannot follow an optional parameter.
// 1 const showMyName7 = (firstName?: string, lastName: string): string => {

# 剩余参数

``````// function8.ts
// function8.ts
const push = (array: any[], ...rest: any[]) => {
rest.forEach(r => {
array.push(r);
});
}

let arr = [false];
push(arr, '1', 2, 3);

const push1 = (array: any[], ...rest: any[], x: number) => {
rest.forEach(r => {
array.push(r);
});
rest.push(x);
}

// 0.0.6/function8.ts:11:30 - error TS1014: A rest parameter must be last in a parameter list.
// 11 const push1 = (array: any[], ...rest: any[], x: number) => {

# 默认值

ES6 中有给函数参数添加默认值的操作，那 Typescript 如果也有此等操作，那是怎样的？设置默认值的参数可以再有参数么（是不是被不能再有参数吓怕了）？

``````// function9.ts
const showMyNameAgain = (firstName: string = 'pr', lastName?: string, ...rest: any[]): string => {
let tmp: string = '';
if(rest.length) {
tmp = rest.join(' ');
}
if(lastName) {
return `\${firstName}\${lastName}\${tmp}`;
} else {
return `\${firstName}\${tmp}`;
}
}

console.log(showMyNameAgain());
console.log(showMyNameAgain('胖芮','，男', '今年', 30));

``````// function9.js
var showMyNameAgain = function (firstName, lastName) {
if (firstName === void 0) { firstName = 'pr'; }
var rest = [];
for (var _i = 2; _i < arguments.length; _i++) {
rest[_i - 2] = arguments[_i];
}
var tmp = '';
if (rest.length) {
tmp = rest.join(' ');
}
if (lastName) {
return "" + firstName + lastName + tmp;
}
else {
return "" + firstName + tmp;
}
};
console.log(showMyNameAgain()); // pr
console.log(showMyNameAgain('胖芮', '，男', '今年', 30)); // 胖芮，男今年 30

# 重载

• 输出值类型需同输入参数类型一致（用到联合类型）；
• 根据参数类型做不同操作处理（用到类型判断）；
``````// function10.ts
const chongzai = (x: number | string): number | string => {
if(typeof x === 'string') {
return `hello, \${x}`;
} else if (typeof x === 'number') {
return x * 10;
}
}

``````// function11.ts
function chongzai2(x: string): string;
function chongzai2(x: number): number;
function chongzai2(x: number | string): number | string {
if(typeof x === 'string') {
return `hello, \${x}`;
} else if (typeof x === 'number') {
return x * 10;
}
}