Learning TypeScript: Start By Adding Notes 👩‍💻

A lot of people I've talked to who are getting started with TypeScript have some sentiment that it feels more daunting than it might actually be or they don't know enough to get started. I can definitely empathize with both. There's a lot of misconceptions about how you have to write code or changing your code to fit into being typed or that there's a lot they need to learn to be efficient.

When I had to learn TypeScript, I just kept thinking that it was notes on the code I'm already writing, nothing is really changing, only adding "annotations" on top of the components I'm already writing.

Before:

class CustomComponent extends React.Component {
  static defaultProps = {
    type: "default"
  };

  state = {
    content: ""
  };

  updateContent = content => {
    this.setState({ content });
  };

  render() {
    return; // ...
  }
}

After with TypeScript:

interface Props {
  type: "default" | "error" | "warning";
}

interface State {
  content: string;
}

class CustomComponent extends React.Component<Props, State> {
  static defaultProps: Props = {
    type: "default"
  };

  readonly state: State = {
    content: ""
  };

  updateContent = (content: string): void => {
    this.setState({ content });
  };

  render(): JSX.Element {
    return; // ...
  }
}

The code I wrote didn't change at all while writing this, it only added small annotations as to what types, and what shape some objects are intended to be. There's really not a lot that you need to understand, primitive types for return values for each method, string and void (meaning returns a string or nothing, respectively), there's now an interface and that just shows what an object will look like and they're attached via this syntax with the <,> (they're called generics and they're not super important to getting started, you'll typically see them a lot when you're working with a framework). We also added a type for the parameter, (content: string), meaning the only value we can pass that method must be a string.

When you're getting started with TypeScript, my number one recommendation is to change your file type from .js to .ts or .tsx and don't amend the code you were going to write, just add annotations. Eventually you'll run into some errors, and when they do come up, let the errors guide you. But don't intentionally change your code.

You'll notice as you start doing this your application will start show patterns you may not have noticed, useful places you can breakout in to sharable patterns, you'll also start to notice that there's parameters you're not using or parts of objects you're not using.

TypeScript can do a lot for a project, big or small, but it doesn't take a lot to start feeling the value and reaping the benefits.

Writing code and documenting the type annotations can start to inform how you write code and write your type annotations. My experience has been after a few weeks, I was thinking about types before I started to write code and then wrote the code and saw where TypeScript was throwing errors and those became guides to what to work on next.

Wherever you are in your journey with TypeScript, sign up for my newsletter, follow me on Twitter @charlespeters or find me at charlespeters.net, I'm working on some resources to help.

---

Links 📝

These are some seriously cool things I encountered while I was working the last couple of weeks.

• graphql-codegen: seriously, this tool saved so much of my time this week. If you use TypeScript or GraphQL this tool is pure MAGIC ✨. It not only autogenerated the interfaces from my schema but custom hooks 🎣 to match the queries and mutations.
• Yehuda Katz on TypeScript 3.7 (a Twitter thread): "TS has also helped push JS forward. It's not only a mostly-compliant JS transpiler (e.g. class features), but it also does a really great job of adding type semantics to virtually all new features as quickly as possible (symbols in interfaces, generators, optional chaining)"
• React Router v5.1: React Router now ships with hooks and I deleted so much code because of it. And there's nothing nicer.

---

Sign up for my newsletter, follow me on Twitter @charlespeters or find me at charlespeters.net.