TypeScript - 函数

查看更多资源

1. 函数类型约束 ：

（1）函数声明、函数表达式：
（2） 类型约束： 对函数的 函数参数、函数返回值 进行类型约束；
（3） 如果函数没有返回值，使用 void，不是undefined；

// 3. 方式一：

function fn1(x: number, y: number): number { return x + y; }

// 4. 方式二：

let fn2 = function(x: number, y: number): number { return x + y; }

// 5. 方式三：

let fn3: (x: number, y: number) => number = function(x: number, y: number): number {
    return x + y;
}

// 6. 方式四：根据类型推断可以简写

let fn4: (x: number, y: number) => number = function(x, y) { return x + y; }

// 7. 函数 可选参数

function fn7(x: number, y?: number): void {}

// 8. 函数 参数默认值

function fn8(x: number = 1, y = 2): void { console.log(y); }

// 9. 函数 剩余参数

 function fn9(...args: any[]) { console.log(args); }

2. 函数重载：

// 1. 在js中
function fn(x, y) { return x + y; }

fn(1, 2);  // ok
fn('a', 'b'); // ok


// 2. 在typescript中 函数重载

function fn(x: number, y: number): number;
function fn(x: string, y: string): string;

function fn(x: any, y: any): any { return x + y; }

fn(1, 2);  // ok
fn('a', 'b'); // ok
fn(1, 'a'); // error

3. 函数中的 this:

/**
 *  1. ts中默认情况下函数中的this默认指向:any
 */
let obj = {
  a: 10,
  fn() {
    console.log(this.a);
    // 因为默认情况下，this是any类型，any类型ts不能提示有任何属性方法
    // any的值，ts不能提示或者进行类型属性检测
  }
}

/**
 *  2. tsconfig.json中：
 *   使用noImplicitThis选项可以取消默认this的any来这个设置
 */
// {
//   "compilerOptions": {
//     "noImplicitThis": true
//   }
// }

/**
 *  3. ts会自动推导事件函数中的this
 */
document.onclick = function () {
  console.log(this.onblur)
}

/**
 *  4. this类型约束
 */
let obj1 = {
  a: 1,
  fn(this: Element | Document) {
    console.log(this);
    // 在ts中函数的第一个this参数是用来设置this类型约束的
    // 这个this是一个假参数，运行过程中是不存在，是给ts检测使用的
  }
};