这两段TypeScript代码有什么区别？

Question

这两段TypeScript代码有什么区别？

5

这两段TypeScript代码有什么区别？（我使用的是TypeScript 1.7.5版本）

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var obj = {color1: "black"};
var mySquare = createSquare(obj);

何时编译不会出错，但下面的代码在生产环境中会出错。

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({color1: "black"});

错误:

test.ts(18,30): 错误 TS2345: 类型为 '{ color1: string; }' 的参数不能赋值给类型 'SquareConfig' 的参数。对象字面量只能指定已知属性，而 'color1' 不在类型 'SquareConfig' 中。

- user4008717

将 color1 重命名为 color？ - Sebastian Brosch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fenton · Accepted Answer

你的两个示例都有相同的（被感知的）错误，即你指定了一个在SquareConfig中未知的属性，这通常意味着你错输入了属性名称。

在你的情况下，你指定了color1，而你可能打算使用color。

在此附加功能检查未指定属性之前，此代码将编译使用TypeScript的旧版本。

修复方法...

选项一，指定正确的属性：

var mySquare = createSquare({color: "black"});

如果您想要包含其他属性，可以使用类型断言来告诉编译器您比它更了解（只要您确实比它更了解！）：

选项二：

var mySquare = createSquare(<SquareConfig>{color1: "black"});

基于评论的更新

编译器对于你与代码之间的“分离程度”越小，就越严格......例如：

// Error
var obj: SquareConfig = {color1: "black"};

// OK
var obj = {color1: "black"};
var obj2: SquareConfig = obj;

让我们看第一个例子，我们说“我打算创建一个SquareConfig”。编译器说：“好的，因为所有内容都是可选的，所以没有必需的项目，但是你正在创建一个具有未知属性的对象 - 所以我会警告你”。

第二个例子略有不同。我们说“我打算使用一个我拥有的对象作为SquareConfig”。编译器说：“您打算使用的对象是否缺少任何必需属性...并且每个属性是否具有正确的类型以成为与SquareConfig结构匹配的结构？ - 是的。”

如果第二种情况警告您有关目标结构上不存在的属性，则无法利用结构类型系统提供的超级多态性。