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

Posted 2023-03-13

【中文标题】TypeScript 接口可选属性和返回类型

【英文标题】：TypeScript interface optional properties and return type

【发布时间】：2020-09-14 22:52:12

【问题描述】：

我是 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;

你能解释一下这段代码 sn-p 的作用吗？

【问题讨论】：

这能回答你的问题吗？ How to declare Return Types for Functions in TypeScript

是的，它有帮助......但我不知道 TS 中有“返回类型”之类的东西

【参考方案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

函数声明中的: color: string; area: number 意味着函数将始终具有该类型的返回值，这意味着函数createSquare 将采用SquareConfig 类型的参数，并且返回值将是@ 类型的对象987654325@

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

【参考方案2】：

在 typescript 中，function 返回类型在列之后定义： 所以函数返回类型可以简单为

1- 不会是 :void.

示例：

function createSquare(config: SquareConfig): void 
// some code 
alert('just not returned code');

2- 数字 :number , 字符串 :string

function createSquare(config: SquareConfig): string 
 // some code 
 return 'some strings ';

3-数字数组:Array或字符串:Array

function createSquare(config: SquareConfig) :Array<string> 
// some code 
return ['some strings '];

4- 一个（复杂类型）like 和 object 包含两个属性，如您的情况 对象。

颜色：字符串；区域：数字

这意味着函数将返回一个具有两个属性颜色的对象，它的值应该是字符串，另一个属性将被命名为区域，其值只接受数字。

function createSquare() : color: string; area: number  
    return  color: 'red', area: 5 ;

console.log(createSquare());

在这种情况下，接口可以帮助我们以更简单的方式编写代码，如下所示。

interface AnyTypeAsReturn 
   color: string; 
   area: number ;


function createSquare() :AnyTypeAsReturn 
    return  color: 'red', area: 5 

const square = createSquare();

它简化了我们编写代码的方式，并且可以在我们的应用程序中重复使用

【讨论】：

3 不返回数组

【参考方案3】：

这部分代码说明了这个函数应该返回什么。您正在返回 newSquare，它是一个包含颜色和区域属性的对象。

【参考方案4】：

将 color: string; area: number 声明为返回类型的原因是为了指定函数将始终返回颜色和面积值，它们不再是可选的。

当您使用该函数时，您不必检查返回的属性是否未定义或为空。