Visual Studio 2019 - ASP.NET Core 3.1 React App with TypeScript

After some wrestling with Visual Studio 2019 I'm now developing my React App with TypeScript.

For my project I'm using ASP.NET Core 3.1, the project structure seems to be the same for previous versions of .Net core and also the .Net framework. When you first create the project you get a basic structure for an MVC RESTful API and a basic React app created using create-react-app and JavaScript.

We use TypeScript, so here's the steps that I took to move my project to a TypeScript codebase. I've installed TypeScript into the package.json myself and as I've found that the NuGet TypeScript compiler is problematic. We also use npm instead of yarn or another package managers.

This post assumes the reader has a basic familiarity of JavaScript, TypeScript, React, and the tools used for developing with them.

Prerequisites

• Node.js Version 12.18.2+

• Npm Version 6.14+ (npm is installed with Node.js)

  You can check to see if and what versions of node.js and npm you have installed by entering node -v and npm -v, respectively, in the terminal.

• Visual Studio 2019

Steps for creating the project

• Launch Visual Studio 2019
• Select Create a new project
• Select ASP.NET Core Web Application
• Choose a project name and location and click on Create
• Select React.js with the default options and click on Create

One the project has been created click on the run icon, this will build and run the project. You should eventually see the project home page in your browser.

Switch to TypeScript

Once you've built and run the project, you need to move it to TypeScript. To do that we have have to change some of the packages being used. My preference is to do this within Visual Studio but you could do it from a terminal running outside of Visual Studio or in another editor. To do it within Visual Studio select View > Terminal which open the a window at the bottom of the IDE, and then within that window select Developer Command Prompt.

In the terminal navigate to the ClientApp sub-folder of the project and then:

• Upgrade the react scripts to the latest with npm upgrade react-scripts --latest

• Remove all eslinting packages with npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react¹

• Install or upgrade TypeScript

  To install TypeScript use npm install typscript --latest --save-dev
  or if you already have TypeScript installed you can upgrade with npm upgrade TypeScript --latest

• Install the TypeScript definition files with npm install @types/node @types/react @types/react-dom @types/react-router

Once you have that complete, rename the App.js file to App.tsx. You'll find App.js under <project_root_folder>/ClientApp/Src/App.js. Once it's renamed run and build the project again, once you see it loaded in your browser you're good to go with TypeScript.

Troubleshooting

If TypeScript complains about allowSyntheticDefaultImports or esModuleImport compiler flags² not being set, you may be able to solve that by doing the following, which I found on Stackoverflow here.

• In Visual Studio 2019 Solution Explorer right click on the project file and select 'Unload Project'
• When it has unloaded right click on the project file again and select Edit <ProjectName>.csproj

• In the text editor look for the lines the look something like this:
  

  <ItemGroup>
      <None Remove="ClientApp\src\public\App.tsx" />
  </ItemGroup>
  <ItemGroup>
      <TypeScriptCompile Include="ClientApp\src\public\App.tsx" />
  </ItemGroup>
  

• Remove these ItemGroups (they may have more than one tsx file referenced in each, depending on how much development you've done)

• Save the file, and then close it

• In Solution Explorer right click on the file again and select 'Reload Project'

• When the project is reloaded, save all files and restart Visual Studio

• You should be good to go

References

Links

• Visual Studio
• ASP.NET Core 3.1
• React
• TypeScript
• Node.js
• NPM - this is installed with Node.js on Windows

Footnotes

¹ At the time of writing the article these linting packages were added to the package.json in the ClientApp folder by Visual Studio when the project was created. These may change with updates to either Visual Studio 2019 or the React App project template.

² This may include other TypeScript compiler flags, but these were the only ones I encountered.

Comments

[Xam]

First of all, thanks for the tutorial. I'd also like to give remark that in my case the .csproj file didn't contain any of the item groups you mentioned. I had to instead add "esModuleInterop": true, to my tsconfig.json file.