时间戳

首页 > 解决方案 > 对象中函数的多种语法（Typescript）

typescript - 对象中函数的多种语法（Typescript）

问题描述

在 javascript 对象中嵌入函数有多种语法，类型注释有多种语法。出于这个问题的目的，我将它们称为“键入键”（in-Car1，Car3）和“键入外部键”（out-Car2，Car4）-如果有更好的方法来描述它们，请告诉我.

查看.js输出，我只能推断：

使用以下各种语法组合在对象中嵌入函数之间还有哪些其他差异（如果有）？

.ts文件：

interface Car1 {
    brand: string;
    summary(string): string;
}
interface Car2 {
    brand: string;
    summary: (string) => string;
}
interface Car3 {
    brand: string;
    summary(string): string;
}
interface Car4 {
    brand: string;
    summary: (string) => string;
}

const myFirstCar: Car1 = {
    brand: "Tesla",
    summary(color: string): string {
        return `This car is a ${color} ${this.brand}`;
    },
};
const mySecondCar: Car2 = {
    brand: "Ferrari",
    summary: (color: string) => {
        return `This car is a ${color} ${this.brand}`;
    },
};
const myThirdCar: Car3 = {
    brand: "Porsche",
    summary: (color: string) => {
        return `This car is a ${color} ${this.brand}`;
    },
};
const myFourthCar: Car4 = {
    brand: "Ferrari",
    summary: (color: string) => {
        return `This car is a ${color} ${this.brand}`;
    },
};

const color = "red";

console.log(myFirstCar.summary);
console.log(myFirstCar.summary(color));
console.log(mySecondCar.summary);
console.log(mySecondCar.summary(color));
console.log(myThirdCar.summary);
console.log(myThirdCar.summary(color));
console.log(myFourthCar.summary);
console.log(myFourthCar.summary(color));

编译.js文件：

var _this = this;
var myFirstCar = {
    brand: "Tesla",
    summary: function (color) {
        return "This car is a " + color + " " + this.brand;
    }
};
var mySecondCar = {
    brand: "Ferrari",
    summary: function (color) {
        return "This car is a " + color + " " + _this.brand;
    }
};
var myThirdCar = {
    brand: "Porsche",
    summary: function (color) {
        return "This car is a " + color + " " + _this.brand;
    }
};
var myFourthCar = {
    brand: "Ferrari",
    summary: function (color) {
        return "This car is a " + color + " " + _this.brand;
    }
};
var color = "red";
console.log(myFirstCar.summary);
console.log(myFirstCar.summary(color));
console.log(mySecondCar.summary);
console.log(mySecondCar.summary(color));
console.log(myThirdCar.summary);
console.log(myThirdCar.summary(color));
console.log(myFourthCar.summary);
console.log(myFourthCar.summary(color));

控制台输出

[Function: summary]
This car is a red Tesla
[Function: summary]
This car is a red undefined
[Function: summary]
This car is a red undefined
[Function: summarizeCar]

编辑：

标签： typescript

解决方案

这里有两个问题：

第一：类型的语法。这两种不同的语法意味着完全相同的东西（请注意，您的语法 forinterface Car1 {summary(string): string;}缺少参数名称）。

那是

interface A {
  fun(val: string): string;
}

是完全一样的东西

interface A {
  fun: (val: string) => string;
}

第二：不同行为的原因是您使用的箭头与正常功能。

当你使用

const myThirdCar: Car3 = {
    brand: "Porsche",
    summary: (color: string) => {
        return `This car is a ${color} ${this.brand}`;
    },
};

您正在创建一个箭头函数，它this绑定到周围的上下文，这是_thisTypeScript 在编译到不支持箭头函数的版本时在这些函数中创建和使用的。

请注意，在您的示例中，这些函数将使用this顶级上下文，它window位于浏览器和globalNodeJs 下，因此人们尽可能避免使用它，因为它可能会引入错误，除非您真的知道自己在做什么。

当你这样做

const myFirstCar: Car1 = {
    brand: "Tesla",
    summary(color: string): string {
        return `This car is a ${color} ${this.brand}`;
    },
};

您正在创建一个常规函数，其中this由它的调用方式决定。在这种情况下，因为它是通过属性访问 ( myFirstCar.summary(color)) 调用的，所以该函数的 this 将成为 左侧的元素.，即myFirstCar

因此，没有“正确”的方式来做到这一点。我特别喜欢它，interface A {method(val:string): string}因为它看起来更自然，但你应该保持一致。

关于对象初始化器语法，也没有“正确”的方式，这取决于您是否想要箭头与常规函数行为。

推荐阅读