jaka jest różnica między tym 2 kodem typu?

Question

jaka jest różnica pomiędzy tym kodem 2 maszynopis? (Ja używam maszynopis 1.7.5)

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

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

var obj = {color1: "black"}; 
var mySquare = createSquare(obj); 

gdy nie jest błąd kompilacji, ale poniżej błędu produkcyjnego kodu.

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

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

var mySquare = createSquare({color1: "black"}); 

błąd:

test.ts(18,30): error TS2345: Argument of type '{ color1: string; }' is not assignable to parameter of type 'SquareConfig'. Object literal may only specify known properties, and 'color1' does not exist in type 'SquareConfig'.

Answer 1

Obie firmy mają ten sam przykładów (postrzeganą) Błąd, który jest to, że nie określono właściwość, która nie jest znany SquareConfig, co często oznacza, że ​​masz mis -pisano nazwę właściwości.

W twoim przypadku podałeś color1, gdzie prawdopodobnie masz zamiar użyć color.

Kod ten został skompilowany przy użyciu starszych wersji języka TypeScript, zanim zostanie dodana dodatkowa funkcja sprawdzania nieokreślonych właściwości.

Poprawki ...

Option One, podać poprawną właściwość:

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

Opcja druga, to są celowo zamierza zawierać jakąś inną właściwość, należy użyć typu twierdzenie aby poinformować kompilator znasz lepiej niż to robi (o ile jesteś pewien, że w rzeczywistości wiedzą lepiej niż to robi!):

var mySquare = createSquare(<SquareConfig>{color1: "black"}); 

Aktualizacja oparta na komentarz

Kompilator jest bardziej ścisła tym mniej „stopnie separacji” masz ... Na przykład:

// Error 
var obj: SquareConfig = {color1: "black"}; 

// OK 
var obj = {color1: "black"}; 
var obj2: SquareConfig = obj; 

Spójrzmy na pierwszym przykładzie, mówimy „Zamierzam stworzyć SquareConfig”. Kompilator mówi: "no cóż, nie ma żadnych wymaganych elementów, ponieważ wszystko jest opcjonalne, ale tworzysz obiekt z właściwością, której nie rozpoznaję - tak cię ostrzeżę".

Drugi przykład jest nieco inny. Mówimy "zamierzam użyć obiektu, który mam jako SquareConfig". Kompilator mówi: "jest to obiekt, którego zamierzasz używać, brakuje jakichkolwiek wymaganych właściwości ... i czy każda właściwość ma poprawny typ, aby była strukturalnym dopasowaniem do SquareConfig - tak."

Jeśli drugi scenariusz ostrzegł cię o właściwościach, które nie istnieją w strukturze docelowej, nie byłbyś w stanie skorzystać z polimorfizmu uber, który oferuje system typów strukturalnych.