How to use Typescript with the ASP.NET Core 2.x React Project Template
Tags: aspnetcore, react, typescript
Published: 2019-01-28 21:37:51

---
title: How to use Typescript with the ASP.NET Core 2.x React Project Template
published: true
description: The ASP.NET Core React template doesn't support using Typescript "out of the box" but you can enable this yourself with a few steps. 
tags: aspnetcore, react, typescript
canonical_url: https://jonhilton.net/new-aspnet-core-react-project/
cover_image: https://jonhilton.net/img/typescript asp.net core react.png
---

You can create a new React + ASP.NET Core project via Visual Studio or the command line...

``` powershell
dotnet new React
```

And get a nice little React/ASP.NET Core starter app written using javascript.

But what if you want to use Typescript instead? To make that work you need to jump through a few more hoops.

## Create React App

As of the .NET Core 2.1 SDK the built-in ASP.NET + React templates use something called "Create React App".

"CRA" is the standard way to quickly spin up new React projects so you can get on with building your application (without manually installing dependencies, configuring WebPack and all the other things which come with modern front-end development!).

When you run this command...

``` powershell
dotnet new React
```

You get a project which includes both ASP.NET Core (with some example Web API controllers) and a CRA app (in the `ClientApp` folder).

This is good, because it means you're getting a standard React app which hasn't been unnecessarily mangled/fiddled with!

The downside is (as of the time of writing) you might well end up with a pretty out-dated version of "Create React App" which lacks support for using Typescript in your project.

To see this for yourself, spin up a new React project either via Visual Studio or the command line.

You can use NPM or Yarn for the following steps.

I've generally found Yarn to be quicker (and have less issues with conflicting package versions) than NPM so that's what I'll stick to here.

You can [install Yarn from here](https://yarnpkg.com/en/).

Open up a command prompt, change directory to the `ClientApp` folder and type these commands.

``` powershell
yarn
yarn list react-scripts
```

This will show you what version of the React Scripts your app is using.

In my case this reported I was on `react-scripts@1.1.5` which means my  app is using "Create React App" 1.1.5.

The React world has moved on somewhat in recent months and is now several versions in to 2.x.x (2.1.3 at time of writing).

Since the 2.1 release of CRA, Typescript is now supported "out of the box" which brings us to a key question. How easily can we upgrade the ASP.NET Core + React project to the latest version of CRA (and enable Typescript support)?

Just before we cover that, you can grab a copy of an already upgraded ASP.NET Core React (and Typescript) project for reference. Pop your details in the form below and I'll email it over to you.

## #1 Upgrade react-scripts

First up you need to upgrade the version of the react-scripts used by your newly created app.

Open up `package.json` (in `ClientApp`) and bump the "react-scripts" version up to the latest.

In VS Code or Visual Studio you'll get handy intellisense to show you the available versions. Just remove the existing version (^1.1.5) then press `CTRL+SPACE` to see a list and select the highest number (2.1.3 at the time of writing).

![](https://jonhilton.net/img/2019-01-02-upgrade-the-aspnet-react-template-project/2019-01-08-20-33-29.png)

Now open up a command prompt (in the `ClientApp` folder) and type `yarn` to install the latest version.

At this point you'll also want to remove all the 'eslint' packages in the `devDependencies` section of `package.json`.

ESLint is a "linter" for javascript which will analyse your code and throw warnings or errors if it doesn't conform to certain syntax rules (and if it contains potentially mis-spelled variable names etc.).

The latest versions of the react-scripts will automatically bring the correct versions of ESLint (and an ESLint configuration for React apps) by itself. If you also have these defined in `devDependencies` you'll end up with conflicts between the versions and errors when you try to launch your app.

``` json
  "devDependencies": {
    "ajv": "^6.0.0",
    "babel-eslint": "^7.2.3",
    "cross-env": "^5.2.0",
    "eslint": "^4.1.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1"
  },
```

Remove every line under `devDependencies` which begins with `eslint` and `babel-eslint`.

Here's what you should end up with.

``` json
  "devDependencies": {
    "ajv": "^6.0.0",
    "cross-env": "^5.2.0"
  },
```

Make sure you keep the eslintConfig section below though...

``` json
"eslintConfig": {
  "extends": "react-app"
},
```

Then type `yarn` to make sure you end up with the correct versions of all your app's dependencies.

If you now run your project and navigate to `https://localhost:5001/` you should see something like this.

![](https://jonhilton.net/img/2019-01-02-upgrade-the-aspnet-react-template-project/2019-01-08-21-44-17.png)

You've successfully upgraded your project to use the latest version of CRA!

## #2 Start using Typescript

Almost there, but we still aren't actually using Typescript.

First up you'll need to bring in Typescript as a dependency for your project and at the same time you can bring in type definitions for a few key packages which the project is already using.

Make sure you're still in the `ClientApp` folder then...

``` powershell
yarn add typescript @types/node @types/react @types/react-dom @types/jest
```
>**Typescript Definitions**
>
>Typescript Definitions enable Typescript to work with code written in javascript. >Without them Typescript would have no way of knowing what types were in play for >any javascript code.
>
>Take this example.
>
>``` javascript
>function sayHello(name){
>    return 'hello ' + name;
>}
>```
>
>There's nothing here to tell Typescript how to "compile" this javascript. It >would seem that `name` is a string and this function returns a string, but in >plain old javascript this isn't guaranteed and you could just as easily pass a >number to `sayHello` and it would still concatenate "hello" and the number passed >in.
>
>In order for Typescript to check you're passing the correct types when you invoke >functions etc. it needs to know what types are valid (and which aren't) for any >given function.
>
>To this end the Typescript compiler will attempt to locate definition files to >tell it how to compile any javascript code it encounters, including javascript in >third party libraries (which your project interacts with).
>
>In this example we're bringing in definitions for node, react, react-dom and jest >which are libraries employed by Create React App.

Now rename `ClientApp\src\App.js` to `ClientApp\src\App.tsx`.

Run your app and you'll get this error (in the browser).

![](https://jonhilton.net/img/2019-01-02-upgrade-the-aspnet-react-template-project/2019-01-08-22-00-57.png)

This is a good example of where missing type definitions will cause Typescsript to throw an error.

You can fix this by ensuring you're still in the `ClientApp` folder then bring in the type declarations for React Router.

``` powershell
yarn add @types/react-router
```

Now run your app and everything should work exactly as before!

From here on, if you want to use Typescript for your React components just make sure to use the `.tsx` extension and off you go!

[There's more where that came from, get these posts first...](https://jonhilton.net/devto/next-react-post/)