Для чего нужно это указывать тип второй раз?

Question

[Umid]

interface SquareConfig {
    color?: string;
    width?: number;
}
 
function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        // Ошибка: Property 'collor' does not exist on type 'SquareConfig'
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}
 
let mySquare = createSquare({ color: "black" });
console.log(mySquare)

Интересует вот эта строка:

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

А точнее, то что написано после двоеточия.
Что это нам даёт?

Answer 1

[Interface]

То что идет после двоеточия - тип возвращаемого функцией значения. https://www.typescriptlang.org/docs/handbook/funct... Не очень понял про второй раз - первый это аргумент или return newSquare;. TS (современный по крайней мере) сам определит тип по такому return. Т.е. часть после двоеточия - необязательна, но добавляет наглядности
P. s. это также поможет избежать ошибки при попытке сделать невалидный return внутри функции

Answer 2

[Константин Китманов]

• Компилятор подскажет, если внутри функции ошибка и вы пытаетесь вернуть объект неправильного типа (например, опечатка collor вместо color).
  
• Результат выполнения функции будет иметь определенный тип и IDE подскажет, какие у mySquare есть свойства, а компилятор выругается на попытку использовать несуществующие свойства.
  
• Функция будет совместима по сигнатуре с другими аналогичными функциями (обработчики событий, action'ы в Redux и т.д.)
  

Я бы кстати вынес этот тип в отдельный интерфейс, так проще будет потом код разбирать, имхо.