Getting started with TypeScript

Everybody’s talking about the Microsoft-backed superset of JavaScript. Many new libraries are being written with types in mind, and many still are adding types for both safety and improved developer experience.

Getting started can be a little challenging, especially if your background is in more dynamic languages (true for me). What follows are some resources that helped me get ramped-up and familiar with the syntax and ecosystem. Enjoy!

Setup

There are a few ways to try out TypeScript.

If you’re already using Babel, there’s a new preset that shipped with Babel 7. Check out this article for more: https://iamturns.com/typescript-babel

If you want to use CRA (create-react-app), use the--typescript flag when generating a new project from the CLI. link

Want to add Typescript to an existing CRA? There’s a migration path.

If you simply want to try out the language in a browser, try the Official Playground

Finally, if you want to try out the compiler locally, use the Getting Started Guide.

Learning Typescript

Somewhat paradoxically, TS has opened up the front-end world to a lot of developers from more traditional backgrounds in statically typed languages.

Most important is probably the Official Handbook.

There are a lot of blogs and articles dedicated to on-ramping, style, OOP, common pitfalls, advanced types, etc. — here are a few highlights.

• Gentle Intro To TypeScript (interactive videos) ⭐
• Understanding TypeScript’s type notation - 2ality ⭐
• TypeScript Deep Dive - Basarat
• TypeScript Practical Introduction
• TypeScript Evolution (covers 2.0)

Typescript + React

Introductory

• https://fettblog.eu/typescript-react
• https://github.com/piotrwitek/react-redux-typescript-guide
• https://github.com/sw-yx/react-typescript-cheatsheet

Use cases

• https://tinkerylabs.com/react-context-api-with-hooks

Functional Typescript

Libraries like Lodash and Ramda have been empowering a functional style for a long time, now developers can implement ideas directly from languages like Haskell and Scala.

A few very notable projects:

• FP-TS
• Purify
• piotrwitek/utility-types
• FunFix

Some articles on FP

• http://vindum.io/blog/lets-reinvent-frp
• https://www.synthesis.co.za/functional-fun-typescript-generics
• https://www.reaktor.com/blog/fear-trust-and-javascript

That last one is a kind of refutation on the incompatibility of JavaScript and FP with types. It’s not wholly hostile, and I learned something from reading it, so I’ll leave it in (for balance!)

Comments

[Juan F Gonzalez]

Thanks for sharing the resources! I've learned Haskell as a way to be immersed in the FP world and now going back to my dev work, I've been wanting to know some ways in which I can incorporate all the goodness of type-safety into normal JS. I'll be giving a good read to these options.