Everyday TypeScript: Methods in Object Types

• Object types and interfaces both allow functions as properties.

• >

  type Dog = {
    bark: () => string
  };
  
  const dog: Dog = {
    bark: () => 'woof',
  };
  
  dog.bark();

  Result:

  'woof'

• In TypeScript and JavaScript, functions stored as object properties like this are called "methods", whether they're in classes or not. This doesn't match the usual meaning of "method" in most programming languages, where "method" refers only to methods defined inside of classes. We'll use the nonstandard meaning in this course because we're talking about TypeScript and the wider JavaScript ecosystem.

• TypeScript gives us a second way to define methods on object types. In the Dog type above, we defined a method as bark: () => string. In the version below, we define the same method as bark(): string.

• >

  type Dog = {
    bark(): string
  };
  
  const dog: Dog = {
    bark: () => 'woof',
  };
  
  dog.bark();

  Result:

  'woof'

• >

  interface Cat {
    meow(): string
  }
  
  const cat: Cat = {
    meow: () => 'nyan',
  };
  
  cat.meow();

  Result:

  'nyan'

• This way of defining methods is a bit more compact, which is nice. There are some other very minor differences between the two syntaxes, but they're not significant enough for us to discuss here. For this course, we'll consider the two equivalent.