TypeScript中接口可选属性如何使用？附代码报错问题咨询

嘿，我来帮你搞定这个问题！首先咱们先理清接口可选属性的用法，再看看你代码里的问题出在哪。

一、接口可选属性的基本用法 #

在TypeScript里，接口的可选属性非常简单——只需要在属性名称后面加上一个?即可，就像你写的SquareConfig接口那样：

interface SquareConfig {
  color?: string; // color是可选属性，可传可不传
  width?: number; // width是可选属性，可传可不传
}

这种写法的意思是：当你用这个接口做类型约束时，传入的对象可以包含color、width，也可以只传其中一个，甚至都不传，TypeScript都不会报错。这能让你的代码适配更多参数组合，灵活性拉满。

二、你的代码错误原因&修正 #

你遇到的Property 'clor' does not exist on type 'SquareConfig'错误，其实是拼写小失误！你把color写成了clor，而你的SquareConfig接口里根本没有clor这个属性，TypeScript的严格类型检查自然会把这个问题揪出来。

下面是修正后的完整代码：

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

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = { color: "white", area: 100 };
  if (config.color) { // 这里把clor改成color就没问题了
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

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

三、可选属性的额外好处 #

除了灵活传参，可选属性还有个超实用的点：帮你提前规避拼写错误——就像这次的情况，TypeScript会严格校验你访问的属性是否在接口定义范围内，能在编码阶段就发现这类低级错误，减少后续运行时的bug。

内容的提问来源于stack exchange，提问作者El Yosemite