Joe Chasinga
Jul 31 · 2 min read
Types are rock-solid. Embrace them.

I’d like to share my experience building Dilio with it for the past few weeks after I have switched to TypeScript for everything we would use JavaScript. And as cliche as this may sound, I’m not going back.

Summary

I found that I spent almost 30% more time with code compared to JavaScript, but 50% less time reading / understanding the code and 0% time fixing runtime bugs (there’s none so far).

runtime bugs aka bugs that will blow up in your users’ face

It solves the most toxic bug in JS

Namely the null and undefined. This is because it catches these blackholes during compile time. It might seems like an extra work, but it's like a good neighbor telling to you take out your garbage before the truck comes.

Escape hatches

TypeScript still let you kind of do lame things with any. For instance, this code:

const username = user.username;

Will not compile if user does not have the type that has username property during compile time (meaning it needs to be statically there, not dynamically placed there at some point while code’s running). Either it should be an instance of a User class or interface.

However, you could still explicitly tell TypeScript this:

type User = any;const username = (user as User).username;

And it’s going to blow up ala JS.

Awesome with React

Forget Proptypes. TypeScript with React covers you from the verbose this JS wannabes.

Instead of…

import React from "react";class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
address: PropTypes.string,
};

Do this…

import React, { Props } from "react";UserProps interface extends Props {
name: string;
age: number;
address: string;
}
class Greeting extends React.Component<UserProps> {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}

You can be 100% sure that this code won’t run unless this.props will have a name property available. Yes, you could achieve that with Proptypes too, but if you changed the UserProps type to:

UserProps interface extends Props {
name?: string;
// ...
}

The expression this.props.name will not allow you to run free and forget it unless you handle the case when name is undefined (now the name has a union type string | undefined).

Setup and migration is easy

TypeScript compiler is so easy to migrate to (even easier to init with) there’s just no excuse to not do it.

If you like this post, don’t forget to give me some hands and follow me. It’s likely I’ll be writing some other cool stuff you wouldn’t want to miss out.

Code Zen

Introductions, tutorials, recipes and notes for dummies who happen to find themselves hacking around.

Joe Chasinga

Written by

Hacker in Silicon Valley.

Code Zen

Code Zen

Introductions, tutorials, recipes and notes for dummies who happen to find themselves hacking around.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade