这 2 个 typeScript 代码有啥区别？

Posted 2023-03-13

【中文标题】这 2 个 typeScript 代码有啥区别？

【英文标题】：what is difference between this 2 typeScript code?这 2 个 typeScript 代码有什么区别？

【发布时间】：2016-04-20 23:57:53

【问题描述】：

这两个 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”。

【问题讨论】：

将 color1 重命名为 color?

【参考方案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 结构匹配 - 是的。”

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

【讨论】：

OP的代码来自TypeScript手册，没有解释为什么config参数声明后有带类型的参数列表： (config: SquareConfig): color: string; area: number ":color: string; area: number" 可以去掉，仍然可以编译，为什么要包含呢？