这两个打字代码有什么不同？

Question

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”的参数。对象文本只能指定已知属性，并且“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结构匹配的正确类型-是的。”