Getting started with Typescript in Create React App

I’m hyped about this one. Create React App, the de-facto tool for creating greenfield React applications, now has built-in support for working with TypeScript.

❤

Up until now, using TypeScript with a CRA app required either ejecting your application and manually configuring the TypeScript compilation process yourself, or using a forked version of CRA, like Will Monk’s create-react-app-typescript repo on GitHub. With version 2.1 of Create React App released this evening, support for TypeScript is built right into the framework, no forks or manual configuration required.

With a new project, using TypeScript is as simple as passing the --typescript flag when creating a new project:

npx create-react-app hello-tsx --typescript

Create React App will create a new application (check out the “What’s Included?” section of the README to understand what all is being created) and, with the addition of the typescript flag, set the default filetype for your components to .tsx.

For existing applications, opting in to TypeScript is surprisingly simple: just add the appropriate types, and the typescript package itself, and CRA will begin picking up any .tsx files as part of the development + compilation process:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

It’s still pretty fresh, but the Create React App documentation has info about using TypeScript, too. I expect this to be updated in the future.

Even at first glance, I’m hyped about this. I’m a long-time TypeScript and React user, and the addition of TypeScript as an option for CRA apps, it’s a no-brainer to generate new React applications with CRA for the time being. Nice job, React team!

Did you dig this article? Support us by sharing it on Twitter!

Byteconf is building free developer conferences for everyone, streamed on Twitch. Join the Byteconf community and follow us on Twitter to stay up to date!

This post was originally written on the Byteconf blog.