What is the difference between this typeScript 2 code?

Question

what's the difference between this typeScript 2 code? (I am using typeScript 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); 

when the error is not compiled, but below the code generation error.

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

Error:

test.ts (18,30): error TS2345: argument of type '{color1: string; } 'is not assigned to a parameter of type SquareConfig. An object literal can only indicate known properties, and "color1" does not exist in the type "SquareConfig".

Answer 1

Both of your examples have the same (perceived) error, which is that you specified a property that SquareConfig is not SquareConfig , which often means that you SquareConfig property name incorrectly.

In your case, you specified color1 , where you probably intended to use color .

This code would compile using older versions of TypeScript until an additional function for checking for undefined properties was added.

embarrassing ...

Option One, specify the correct property:

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

Option two, you intentionally intend to include some other property, use a type statement to tell the compiler that you know is better than it (as long as you are sure that you really know that you know better than it is!):

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

Comment Based Update

The compiler is more strict the less "degrees of separation" you have ... for example:

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

Let's look at the first example, we say: "I intend to create SquareConfig ." The compiler says: "Well, there are no required elements, since everything is optional, but you are creating an object with a property that I will not recognize, so I will warn you."

The second example is slightly different. We say: "I intend to use the object that I have as SquareConfig ." The compiler says: "this is the object that you intend to use if you do not have any necessary properties ... and each property has the correct structural matching type for SquareConfig - yes."

If the second scenario warned you about properties that do not exist in the target structure, you would not be able to take advantage of the uber polymorphism offered by the structural type system.