The lack of runtime type checking/assertions

Here comes Type Guards

• by using instanceof and typeof JavaScript operators
• by creating “User-Defined Type Guards”: defining your own type assertions using Functions,

“instanceof” and “typeof” Type Guards

1function formatMoney(amount: string | number): string {  
2   let value = amount; // **value** type is number or string   
3   if (typeof amount === "string") {  
4      value = parseInt(amount, 10); // **amount** type is string  
5   }  
6   return value + " $"; // **value** type is number  
7}

1if (typeof amount === "string") {  
2   value = parseInt(amount, 10); // **amount** type is string  
3}

instanceof

User-Defined Type Guards: write your own Type Guard

1type UUID = string;
2interface Customisation {
3   recap_frequency: number;
4   favourites: string;
5}
6interface Billing {
7   name: string;
8   serial: string;
9   exp: string;
10   ccv: string;
11}
12interface User {
13   id: UUID;
14   first_name: string;
15   last_name: string;
16   plan: 'free' | 'premium'
17   customisations?: Customisation;
18   billing?: Billing;
19   primary_billing?: string;
20}
21// Mapped type tht get all User properties of User as required
22type PremiumUser = { [K in keyof User]-?: NonNullable<User[K]> };
23

• a User can be either free or premium.
• a PremiumUser is slightly different from a User object, it has always present properties, specific to a premium user: billing, customisations and primary_billing.

1function getUserEmailRecapFrequency(user: User): number {
2   if (user.plan === 'premium') {
3      return (user as PremiumUser).customisations.recap_frequency;
4   } else {
5      return -1
6   }
7}

1function isPremiumUser(user: User): user is PremiumUser {  
2   return user.plan === 'premium';  
3}
4
5function getUserEmailRecapFrequency(user: User): number {
6   if (isPremiumUser(user)) {
7      return user.customisations.recap_frequency;
8   } else {
9      return -1
10   }
11}

1function isPremiumUser(user: User): user is PremiumUser {  
2   return user.plan === 'premium';  
3}

• the type guard function argument type, like for overloads, should be as open as possible (in order to be used as much as possible)
  Here user can be any kind of User.
• we can notice a new is operator, called type predicate.
  Basically, using in indicate to TypeScript that it can trust us on the return type (you can see it as a as for function return type).

Community Runtime checking libraries

Spicery

io-ts

1export class InterfaceType<P, A = any, O = A, I = mixed> extends Type<A, O ,I> {
2   readonly _tag: 'InterfaceType' = 'InterfaceType'
3   constructor(
4      name: string,
5      is: InterfaceType<P, A, O ,I>['is'],
6      validate: InterfaceType<P, A, O ,I>['validate'],
7      encode: InterfaceType<P, A, O ,I>['encode'],
8      readonly props: P
9   ) {
10      super(name, is, validate, encode)
11   }
12}
13
14// ...
15
16export const type = <P extends Props>(
17   props: P,
18   name: string = getNameFromProps(props)
19): InterfaceType<P, TypeOfProps<P>, OutputOfProps<P>, mixed> => {
20   // ...
21}
22// ...

1interface IPerson extends t.TypeOf<typeof Person> {}  
2  
3// same as  
4interface IPerson {  
5  name: string  
6  age: number  
7}

ts-runtime

1function getNumberFromString(str: string): number {  
2  return Number(str);  
3}

1function getNumberFromString(str) {  
2  let \_strType = t.string();  
3  const \_returnType = t.return(t.number());  
4  t.param("str", \_strType).assert(str);  
5  return \_returnType.assert(Number(str));  
6}

Conclusion