If you're like me, you've been hearing quite a bit about TypeScript. I mean at this point I feel like a see a new article about it every day. I've held off on trying it out for the simple fact that I don't want to add yet another abstraction to my workflow.
Like you, I have a lot of questions I want to be answered before I decide if it's something I will pick up and annoy my team until they're all writing TypeScript too.
What I'm looking to answer in this series
- What is Static Typing?
- What are the pros/cons of using TypeScript?
- How difficult is it to get up and running?
- How does TypeScript make me a better programmer?
- Does it play nicely with React?
- Can I get rid of prop-types?
create-react-app
For new projects
It's easy to start using TypeScript with React projects built with create-react-app. This is the first route I plan on taking in order to get used to working with TypeScript.
All you need to do is run:
npx create-react-app app-name --template typescript
or
yarn create-react-app app-name --template typescript
or
yarn create react-app app-name --template typescript
cd into your project folder and make sure that the following packages have been added as dependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @types/jest
You will also need to rename any .js
files within the src folder to .tsx
. This lets your editor know that you will be using TypeScript syntax.
Note: it looks like the latest version of create-react-app sets all of this up for you so you might not have to change anything!
For existing projects
Adding TypeScript to an existing React project is even easier than starting with a new project. Just add the following dependencies to your project:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @types/jest
Then change any .js
and .jsx
files within your src folder to .tsx
. After these steps, you can run npm start
or yarn start
and react-scripts will detect that your using TypeScript and create a tsconfig.json
file for you.
That's it, you can now use TypeScript with React!
Note: This method only works for react-scripts v2.1.0 and higher. I will not be covering projects not built with create-react-app in this tutorial.
Configuration
If you would like to create your own config for TypeScript you can run tsc --init
to generate a tsconfig.json fill that lists all possible configuration options along with comments on what the options do. (It's great!). Otherwise, you can run yarn start
/npm start
for the first time with the above changes react-scripts will recognize the changes and create a tsconfig.json
file in the root directory. Your config should look like this:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
The config is pretty straight forward.
target - is what js version your code will be compiled to.
include - compiles code from the specified files/directories.
allowJs - Allow JavaScript files to be compiled.
jsx - Lets the compiler know that we will be using jsx.
You can check out every setting for the tsconfig.json file here. The default settings are usually enough to work with but feel free to tweak them to your liking. There is also a very convenient playground where you can try out different config settings and see instantly how your code will be compiled.
Start Coding
Now that your project is using TypeScript you can start using it anywhere within your src directory! Your project should be able to run successfully without any TypeScript specific syntax depending on how your config is set up.
Part 2 of this series will discuss the TypeScript syntax and best practices as we build a book of spells.
Further Reading
If you'd like to learn more about TypeScript you can check out these great resources. They are what I used for my personal research for writing these articles.
Last Note: This is my first article/tutorial so please leave constructive feedback within the comments. I know that I can improve a lot on my writing and how I discuss code. Thank you so much for reading!
Top comments (2)
Hi,
yarn create-react-app app-name --template typescript
should beyarn create react-app app-name --template typescript
Thanks for the suggestion, I didn't know that that was something you could do with yarn!
I was referencing
create-react-app
from the Create React App Docs.I'll add
yarn create react-app app-name --template typescript
as an additional option.