playing with adding types with typescript

status-color-mapper-enum.ts

type Status = 'Unapproved' | 'Rejected' | 'Approved';

enum statusEnum {
  Unapproved = 'grey',
  Rejected = 'red',
  Approved = 'green'
}

interface Arr {
    id: number;
    status: Status;
}

const arr: Arr[] = [{ id: 1, status: 'Approved' }, { id: 2, status: 'Unapproved' }, { id: 3, status: 'Rejected' }];


const colors = arr.map(({ status }) => {
    return statusEnum[status];
})

alert(colors);

status-color-mapper.flow

/* @flow */

type Status = 'Approved' |  'Unapproved' | 'Rejected';
type StatusObj = {
  id: number,
  status: Status
}
const arr:StatusObj[] = [{ id: 1, status: 'Approved' }, { id: 2, status: 'Unapproved' }, { id: 3, status: 'Rejected' }];

type Color = 'green' | 'red' | 'grey';

type StatusColor = {[Status]: Color}

const statusColor: StatusColor = {
    'Approved': 'green',
    'Rejected': 'red',
    'Unapproved': 'grey'
};

const colors:Color[] = arr.map(({ status }) => {
    return statusColor[status];
})

alert(colors);

status-color-mapper.js

const arr = [{ id: 1, status: 'Approved' }, { id: 2, status: 'Unapproved' }, { id: 3, status: 'Rejected' }];

const statusColor = {
    'Approved': 'green',
    'Rejected': 'red',
    'Unapproved': 'grey'
};

const colors = arr.map(({ status }) => {
    return statusColor[status];
})

alert(colors);

status-color-mapper.ts

type Status = 'Unapproved' | 'Rejected' | 'Approved';
type Color = 'grey' | 'red' | 'green';

/* Mapped Types */
type StatusColor = { [C in Status]: Color };

let statusEnum: StatusColor = {
  Unapproved: 'grey',
  Rejected: 'red',
  Approved: 'green'
};

interface Arr {
    id: number;
    status: Status;
}

const arr: Arr[] = [{ id: 1, status: 'Approved' }, { id: 2, status: 'Unapproved' }, { id: 3, status: 'Rejected' }];


const colors = arr.map(({ status }) => {
    return statusEnum[status];
})

alert(colors);