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
andnpm -v
, respectively, in the terminal.
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 withnpm 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.
Top comments (1)
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.