Using Interfaces to Describe Types in TypeScript
It’s easy to pass the wrong value to a function. Typescript interfaces are great because they catch errors at compile time or in an IDE. In this lesson we’ll learn how to describe a type shape with Typescript interfaces.
[00:00] We can use type checking to describe the shape of a value. If we want another value to have the same shape, we could copy paste. But already there's a parameter name problem. Superhero name doesn't make sense for a supervillain.
[00:13] Sure, I could update both of them, but now I got to keep track of two variable shapes that are identical. The chance of making typos and errors increases. So let's make an interface and update the variables with the comic book character type.
[00:27] Some comic book character identities are known, so let's add an optional parameter. Interfaces only describe the shape of the value. We still need to set some values. If there is a typo or error, both the IDE and compiler will catch it.
[00:41] Types of property alias are incompatible. Type boolean, which is what we've set our superhero to have, is not assignable to type string, which is what the comic character type should be. Object literal may only specify known properties and [inaudible] identity does not exist in the comic book character type.
[01:00] When we create a function, we can type the argument with the interface. If we remove the type from the superhero and call the function, the IDE and compiler will still catch the errors. These are the same errors as before.
[01:12] Object literal may only specify known properties. [inaudible] identity does not exist on the comic book character type. Again, we're talking about the supervillain -- line 13, line 26, 19.
[01:23] This time we're talking about the function because we still have the type on the argument being passed to the function. Types of property alias are incompatible. Type boolean is not assignable to type string. Boolean not assignable type string.
[01:39] Our characters need an attack method. We could add it to the comic book character interface, but we might want someone who's not a comic book character to be able to attack. So let's create an interface for a function.
[01:51] Notice the opponent in line type. In lining the type is still an interface. It just doesn't have a name that can be referenced. We need these specific params if Krusty the Clown wants to throw down. Notice how we're typing an interface param with an interface.
[02:05] Now let's add the attack function type as a parameter of a comic book character interface. We can roll a reusable attack function and then add attack with params and the attack function for our characters.
[02:19] Finally, let's make an attack. Notice how the superhero strength isn't available for auto-complete. Let's just put it in there. The IDE is still showing us an error.
[02:30] Let's see what the compiler says. Object literal may only specify known properties, and strength does not exist on a comic book character type. Neither does insanity.
[02:39] Since we called the superhero attack function, we're seeing the error about strength again. We could add strength and insanity to the comic book character interface.
[02:48] However, we want to make sure that they're optional.
[02:51] Otherwise, we need to add strength and insanity to both of our characters. But if we have to add every skill and power to the comic book character interface, it's going to get pretty bloated.
[03:00] Let's create an optional attributes interface and extend the comic book character interface with the optional attributes interface. Now when we run the compiler, we get no errors. When we run the code, nice.
[03:13] So to review, interfaces describe the shape of a value but don't contain definitions. They can be set in line or as a type that can be referenced. Both options are useful.
[03:24] Interfaces help with typos and errors. They can have optional parameters. They can be used to type other interface parameters or extend it.
Thanks Oktay! Glad you enjoyed the video. This totally made my day.
I seem to be getting: Error:(..., ...) TS2683:'this' implicitly has type 'any' because it does not have a type annotation.. :/
Interesting, so if I do:
let attackFunc = function(this: any, opponent: any, attackWith: any) {
it works! But if I try to do it in ES syntax:
let attackFunc = (this: any, opponent: any, attackWith: any) => {
it doesn't, still throws the same error. :/
I think you figured it out, but if you're still wondering this isn't allowed as an arrow function argument.
Here's a reference to the issue on Github.
Interesting, so if I do:
let attackFunc = function(this: any, opponent: any, attackWith: any) {
it works! But if I try to do it in ES syntax:
let attackFunc = (this: any, opponent: any, attackWith: any) => {
it doesn't, still throws the same error. :/
that's because arrow functions doesn't bind their own "this"
I could add better typing to the attack function by making these changes:
interface AttackFunction {
(opponent: ComicBookCharacter, attackWith: number): number;
}
and then
function attack(
this: ComicBookCharacter,
opponent: ComicBookCharacter,
attackWith: number
): number {
opponent.health -= attackWith;
console.log(
`${this.alias} has just attacked ${opponent.alias}, who's health = ${
opponent.health
} `
);
return opponent.health;
}
this, I love.
Ah.Mazing. A little fast but that just means i get to watch it over and over :) Thank you!
Ari, this course is just amazing, Thank you so much!
inebriationLevel
After seeing it a second time, it all became clear, probably THE most important chapter of the course up till now - woaw🔥
Great clean voice! Great Tutorial anyway! I WANT MORE!