TypeScript 接口(interface)可选属性和返回类型

Question

我是 typescript 的新手，现在浏览文档，“可选属性”部分有这个例子:

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

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = { color: "white", area: 100 };
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

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

现在，我明白了什么是可选属性，但让我困惑的是 : { color: string; area: number 在函数参数中。是因为他们想对变量 color 和 area 进行类型检查吗？如果是这样的话，为什么他们将它们写在函数参数中而不是将它们放在函数中并像下面那样进行类型检查

let color:string;
let area: number;

您能解释一下这段代码中的作用吗？

Answer 1

interface SquareConfig {
  color?: string; // means color value can either be of type string or undefined
  width?: number; // means width value can either be of type number or undefined
}

:{ 颜色:字符串； area: number 在函数声明中意味着该函数将始终具有该类型的返回值，这意味着函数 createSquare 将采用 SquareConfig 类型的参数> 并且返回值将是一个类型为 { color: string; 的对象区域:编号

function createSquare(config: SquareConfig): { color: string; area: number } {

   // code....

   // you must return an object with property color of type string
   // and property area of type number otherwise you will get a compiler error

}