DEV Community

Discussion on: Embrace the static typing system: Strong types

Collapse
 
yawaramin profile image
Yawar Amin

Great post! Nowadays it's possible to go bug-hunting with static types in a variety of languages. In JavaScript for example, right now you don't even need to set up a typechecking step with a compiler like TypeScript or Flow--Visual Studio Code has TypeScript-based typechecking built right in! Here's an example bug I squashed recently. In React with Redux, Redux can pass a piece of the app's overall state to an individual UI component. But some of these state pieces can start off as null when the app starts up, so we need to account for that. In TypeScript we have the notion of union types, which capture this concept perfectly. E.g., a component that handles a possibly-null piece of state:

/**
 * @param {string | null} name
 * @returns {React.ReactElement<string>}
 */
function Greet(name) {
  return name && <p>Hi, {name}!</p>;
  /*     ^               ^
   *     |               But at this point, after it's been null-checked,
   *     name has type   it has type {string}, so it's safe to use!
   *     {string | null}
   *     at this point...
   */
}

This union type {string | null} (in A JSDoc comment) tells the typechecker to ensure we can use the name only after checking that it's not null. If we try to do otherwise, VSCode gives us an error message instantly!

Notice how the doc comment does double duty as a type hint and as documentation--a property of all good type systems in fact.

I'm planning to write up a bit more about this lightweight typechecking capability, but it's really easy to get started: twitter.com/yawaramin/status/92916...