深入剖析TypeScript中那些似懂非懂的知识，助你避开认知盲区

2023-11-25 23:53:49

函数作为对象属性

在TypeScript中，函数可以作为对象属性。然而，函数作为对象属性时的行为会受到定义方式的影响。

1. 函数表达式

interface Person {
  name: string;
  greet: () => void;
}

const person: Person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Error: Cannot read property 'name' of undefined

在这个例子中，我们将函数greet作为箭头函数定义，并将其作为Person接口的greet属性。然而，当我们调用person.greet()时，会抛出一个错误，因为this在箭头函数中没有定义。

2. 函数声明

interface Person {
  name: string;
  greet: () => void;
}

const person: Person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: Hello, my name is Alice

在这个例子中，我们将函数greet作为函数声明定义，并将其作为Person接口的greet属性。当我们调用person.greet()时，函数中的this关键字指向对象person，因此可以正确访问name属性。

严格函数类型

TypeScript的严格函数类型选项(strictFunctionTypes)可以影响函数作为对象属性时的行为。

1. 开启严格函数类型

interface Person {
  name: string;
  greet: () => void;
}

const person: Person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: Hello, my name is Alice

在这个例子中，我们在编译器选项中开启了strictFunctionTypes选项。这意味着函数作为对象属性时，必须与接口中的定义完全匹配。因此，greet函数必须是一个箭头函数，否则编译器会报错。

2. 关闭严格函数类型

interface Person {
  name: string;
  greet: () => void;
}

const person: Person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Error: Cannot read property 'name' of undefined