这 2 个 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; }' 不可分配给“SquareConfig”类型的参数。 对象字面量只能指定已知属性，而“SquareConfig”类型中不存在“color1”。

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 结构匹配 - 是的。”

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