typescript - 这两个 typeScript 代码有什么区别？

Question

这两个 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): error TS2345: Argument of type '{ color1: string; }' is not assignable to parameter of type 'SquareConfig'. Object literal may only specify known properties, and 'color1' does not exist in type 'SquareConfig'.

Answer 1

您的两个示例都有相同的(感知​​到的)错误，即您指定了 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 的结构匹配 - 是的。”

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