Interface in TypeScript

Question

I am reading Typescript handbook， in the chapter of interface, I found a question:

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

The printLabel need an object with a label:string property， but the object we passed has another property called size. It is OK cause the compiler only checks that at least the ones required are present and match the types required.

But, we I call printLabel in this way:

printLabel({size: 10, label: "Size 10 Object"});

The compile throws an exception.

so why?

If you'd search for the error message (`object literal may only specify known properties`) you'll find the answers: http://stackoverflow.com/questions/31816061/why-am-i-getting-an-error-object-literal-may-only-specify-known-properties or http://stackoverflow.com/questions/32897098/typescript-object-implementing-interface-with-extra-properties-error — Nitzan Tomer, Feb 05 '16 at 15:51

score 4 · Accepted Answer · answered Feb 05 '16 at 21:53

The documentation is outdated and an issue exists to fix it.

From the What's New in TypeScript page:

TypeScript 1.6 enforces stricter object literal assignment checks for the purpose of catching excess or misspelled properties. Specifically, when a fresh object literal is assigned to a variable or passed as an argument for a non-empty target type, it is an error for the object literal to specify properties that don't exist in the target type.

The idea is that it's a very common pattern is to pass in an object literal as a bag of options. For instance:

interface ConnectionOptions {
    tryHttps?: boolean;
    url?: string;
    username?: string;
    password?: string;
}

But all of those properties are optional. Before 1.6, I could misspell any of them and the compiler would never catch this error:

declare function connect(options: ConnectionOptions);

// Notice the property given is 'tryHTTPS' instead of 'tryHttps'.
connect({ url: "stackoverflow.com", tryHTTPS: true });

You can always get around this by adding a type assertion to the type you're assigning to:

printLabel({size: 10, label: "Size 10 Object"} as LabelledValue);
// or...
printLabel(<LabelledValue>{size: 10, label: "Size 10 Object"});

Interface in TypeScript

1 Answers1