[Typescript] Excess property checking

TypeScript helps us catch a particular type of problem around the use of object literals. Let’s look at the situation where the error arises:

// @errors: 2345
function printCar(car: {
  make: string
  model: string
  year: number
  chargeVoltage?: number
}) {
  // implementation removed for simplicity
}

printCar({
  make: "Tesla",
  model: "Model 3",
  year: 2020,
  chargeVoltage: 220,
  color: "RED", // <0------ EXTRA PROPERTY
})

https://www.typescriptlang.org/play?#code/PTAEAEFMCdoe2gZwFygEwGYAsBWAUAGYCuAdgMYAuAlnCaAA7RUkUDCAhtABRmeoDeeUKAC27ANaRUiCkxIBzIaLgATSABtps5ouEBPSH1AkiIgEYwlZABad5kAGpx1FdvYD8qE+csBfAJSggsIgoFQi9OqQIpAs7NS0oNDRcABukCqgBAigiOGRVGRUFHp4vnh4jMxsnFzBohJSoABEACqQiOrszQA0SiKqGqjNALKD6qAYvUoGRmgADAt9wjZ2js6u9qhoS1bOCMMASgCiACK9oKEAPPMAtPcPoMcAGq2HAIKgAAqHAPJfx0OrQAmmV-EA

The important part of this error message is:

Object literal may only specify known properties, and ‘color’ does not exist in type <the type the function expects>

In this situation, within the body of the printCar function, we cannot access the color property since it’s not part of the argument type. Thus, we’re defining a property on this object, that we have no hope of safely accessing later on!

 

Try fixing this three ways in the TypeScript playground:

1. Remove the color property from the object
2. Add a color: string to the function argument type
3. Create a variable to hold this value, and then pass the variable into the printCar function