时间戳

首页 > 解决方案 > 如何在胖箭头上创建打字稿尖括号并将其与冒号进行比较？

typescript - 如何在胖箭头上创建打字稿尖括号并将其与冒号进行比较？

问题描述

这是我使用冒号的打字稿示例：

interface props {
  legs: 2
};

interface body {
    head: string,
    torso: string,
    legs: number
};

const fnGetBodyUsingColon = (props: props): body => ({
  head: 'large',
  torso: 'larger',
  legs: props.legs
});

如何显示上述示例但使用泛型尖括号？

这种尝试给了我错误：

const fnGetBodyUsingAngleBrackets<T> = (props: T): T => ({
  head: 'large',
  torso: 'larger',
  legs: props.legs
});

fnGetBodyUsingAngleBrackets 缺少返回类型注释，隐式具有任何返回类型

标签： typescriptecmascript-6

解决方案

回答语法问题：

泛型类型参数是调用签名的一部分，而不是您分配给它的变量的一部分。语法如下所示，在:<T>之后移动=

const identity = <T>(t: T): T => t;

更新：如果上面没有编译，那是因为你正在使用 .tsx 文件或 JSX 支持，这会使解析器感到困惑。有关更多信息，请参阅此 Q/A。要解决此问题，您可以在类型参数声明后使用尾随逗号，例如

const identity = <T,>(t: T): T => t;

请注意，您的示例代码有问题。如果您修复语法，编译器会正确地给出错误：

const fnGetBodyUsingAngleBrackets = <T>(props: T): T => ({
  head: 'large',
  torso: 'larger',
  legs: props.legs
}); // error!
// Type '{ head: string; torso: string; legs: any; }' is not assignable to type 'T'.

那是因为您声称它fnGetBodyUsingAngleBrackets()接受任何类型的参数T并返回与参数相同类型的值。您返回的值几乎可以肯定与参数的类型不同：

const oops = fnGetBodyUsingAngleBrackets({ foo: "bar", baz: "qux" });
// const oops: { foo: string; baz: string; }
console.log(oops.foo.toUpperCase()); // no compiler warning; error at runtime

我不确定您为什么要在此示例中使用泛型，所以我不确定如何建议您应该如何在此进行。

好的，希望有帮助；祝你好运！

Playground 代码链接

推荐阅读