TypeScript interface optional properties and return type

Question

I'm new to typescript and now going over the docs and there is this example in "Optional Properties" section:

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" });

Now, i do understand what optional properties are, but what confused me is the : { color: string; area: number } : { color: string; area: number } in the function arguments.Is it because they want to do type checking against the variables color and area ? and if that is the case why they write them in function arguments rather than place them within the function and do type checking like below

let color:string;
let area: number;

can you please explain what does it do in this code snippet?

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
}

: { color: string; area: number } : { color: string; area: number } at the function declaration means that the function will always have a returned value with that type, which means function createSquare will take and argument of type SquareConfig and the return value will be an object with type { color: string; area: number} { color: string; area: number}

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

}

Answer 2

That part of the code is stating what this function is expected to RETURN. You are returning newSquare which is an object that contains color & area properties.

Answer 3

The reason of declaring { color: string; area: number }{ color: string; area: number } as return type is to specify that the function will return always color and area values, they are not optional anymore.

When you use that function you won't have to check if returned attributes are undefined or null.

Answer 4

In typescript the function return type is defined after the colon: so function return types can be simple as

1. nothing it will be :void .

example:

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

2. number :number , string :string

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

3. array of number :Array or strings:Array

   function createSquare(config: SquareConfig):Array { // some code return ['some strings ']; }

4. a (complex type) like an object that contains two properties as in your case object.

{ color: string; area: number }

This means the function shall return an object with two properties: color and its value should be string and another proprty will be named area with value only accepts number s.

function createSquare() :{ color: string; area: number } {
    return { color: 'red', area: 5 };
}
console.log(createSquare());

In that case interfaces came to help us in simpler way of writing this code as following.

interface AnyTypeAsReturn {
   color: string; 
   area: number ;
}

function createSquare() :AnyTypeAsReturn {
    return { color: 'red', area: 5 }
}
const square = createSquare();

It simplifies the way we write the code and would be reusable across our app