Type safety

Javascript is a mess

var bob = { name: 'bob', age: 3 };
var fred = { name: 'fred', age: '5' };

var totalAge = bob.age + fred.age;
console.log(totalAge);
// error, 8, 35 
    

var bob = { name: 'bob', age: 3 };

var temp = bob.calculateLifeExpectancy();
// This will throw an error
    

Possible solutions

• Typescript
• Flow
• Proptypes

Typescript

Typescript Errors

export class TranslationKeyService {
  constructor(httpService) { }

  get(guid) {
    // ...
  }
}

export class TranslationKeyService implements ICrudService<TranslationKeyViewModel> {
  constructor(private httpService: HttpService) { }

  get(guid: string): Observable<ResultWithValue<TranslationKeyViewModel>> {
    // ...
  }
}

Typescript downsides

• Additional build time
• It can be very finicky
• Can be cheated

Typescript being finicky

// This will break your build
changePlatform = (plat) => {
    // logic here
}

// This will please the Typescript gods
changePlatform = (plat: PlatformType) => {
    // logic here
}

Cheating Typescript

// This is cheating
changePlatform = (plat: any) => {
    // logic here
}

Flow types in comments

// @flow

function greet(greeting /*: string*/) /* : string */ {
  return greeting;
}

Video 🔗

Proptypes

import React from 'react';
import PropTypes from 'prop-types';
 
class MyComponent extends React.Component {
  render() {
    // ... do things with the props
  }
}
 
MyComponent.propTypes = {
    param1: PropTypes.array,
    param2: PropTypes.bool,
    param3: PropTypes.func,
}

Summary

• Typescript is good
• Flow is a disappointment
• Proptypes is ok

End