Flowtype extend object type

user_2279414 0
Viewed 215

As JavaScript developer I'm new to type checking and I struggle to understand why this simple code is not working:

type Animal = {
  id: number,
  name: string,
  type: 'dog' | 'cat'
};

type Dog = {
  id: number,
  name: string,
  type: 'dog',
  color: string
};

function printAnimal(animal: Animal): string {
  return `${animal.type}: ${animal.name}`;
}

const buddy: Dog = {
  id: 1,
  name: 'Buddy',
  type: 'dog',
  color: 'black'
}

printAnimal(buddy);

What I'm trying to achieve here is to have a method that accepts interface. This however gives me error: Cannot call 'printAnimal' with 'buddy' bound to 'animal' because string literal 'dog' [1] is incompatible with string literal 'cat' [2] in property 'type'..

What I tried:

  1. interface Animal { // ...} - does not work.
  2. Remove typing from buddy - it work's but I'm not satisfied. Sometimes I do want to have more strict type (so I know I'm dealing with dog not cat) but still use general method that accept any animal.
  3. I tried changing type: 'dog' | 'cat' to type: string - does not work. I would expect 'dog' string is subtype of general string type but it's not. On the other hand even if it works it wouldn't be enough - sometimes I know that my app accepts only dogs and cats not any other animals.

Thanks for reading and I hope I can get some help from you guys! Here's live version: Try Flow - live example

flowtype javascript
1 Answers

You have to make the Animal type an interface since it's describing your types implementations as a "parent". And it would make sense if you enforce it by extending your Dog type via a union since that's the point of using typings to reach a stronger type-checking.

This can be written like this:

/* @flow */

interface Animal {
  id: number,
  name: string,
  type: 'dog' | 'cat'
};

type Dog = Animal & {
  type: 'dog',
  color: string
};

function printAnimal(animal: Animal): string {
  return `${animal.type}: ${animal.name}`;
}

const buddy: Dog = {
  id: 1,
  name: 'Buddy',
  type: 'dog',
  color: 'black'
}

printAnimal(buddy);

user_27362330
Related