查询打字稿中的接口

Question

I've started learning TypeScript coming from JavaScript and I'm learning how interfaces work.

I've created the following interface called IEmailable :

interface IEmailable { name: string, email: string }

With the following function called sendEmail passing an object that takes the shape of IEmailable :

function sendEmail(contact: IEmailable){
  console.log(contact.name + " <" + contact.email + ">"); }
}

So, running this:

sendEmail({ 
   name: "Ciaran", 
   email: "ciaran.w@touchcreative.co.uk       
});

Is valid.

Whereas running this:

sendEmail({ 
   name: "Ciaran", 
   email: "ciaran.w@touchcreative.co.uk,
   phone: 07927382
});

Is NOT valid.

In my IDE, adding a new property to an instantiated object that does not exist in the interface throws an error.

"Object literal may only specify known properties"

So I understand that adding a property not defined in the interface cannot be done. However, in the tutorial I follow - it states that adding new properties CAN be added and in their IDE no error was thrown. Was this a recent update to TypeScript or am I misunderstanding how interfaces work in TypeScript. I've searched the official docs and in in their example they actually do add a new property size which is doesn't exist in interface LabelledValue . I'm definitely overthinking it but if anyone could clear this up that'd be great.

Answer 1

AS per the documentation

Object literals get special treatment and undergo excess property checking when assigning them to other variables, or passing them as arguments. If an object literal has any properties that the “target type” doesn't have, you'll get an error.

hence the below code will cause an error as phone does not exists on the interface IEmailable

sendEmail({ 
   name: "Ciaran", 
   email: "ciaran.w@touchcreative.co.uk,
   phone: 07927382
});

But you can bypass that by using a type assertion like below

  sendEmail({ 
   name: "Ciaran", 
   email: "ciaran.w@touchcreative.co.uk",
   phone: 7927382
} as IEmailable);

else you can add a string index signature to the interface to make sure that the object can have some extra property which you can pass as arguments like below

interface IEmailable { 
    name: string, 
    email: string,
    [propName: string]: any; 
 }

Here is a working link to the fiddle.

"Fiddle"