Using Interfaces to Describe Types in TypeScript

TypeScript^2.0.0

Share this video with your friends

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.

Oktay Bilgin

~ 8 years ago

Great clean voice! Great Tutorial anyway! I WANT MORE!

Ari Picker(instructor)

~ 8 years ago

Thanks Oktay! Glad you enjoyed the video. This totally made my day.

Sports Whispers

~ 7 years ago

I seem to be getting: Error:(..., ...) TS2683:'this' implicitly has type 'any' because it does not have a type annotation.. :/

Sports Whispers

~ 7 years ago

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. :/

Ari Picker(instructor)

~ 7 years ago

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.

Cam Kida

~ 7 years ago

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"

Amit Erandole

~ 7 years ago

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