This article explains how to configure TypeScript into React web application, which is created using the project template. You can refer the installation of Syncfusion ASP.NET Core project template extension and project creation from the already published blog post as follows.
Configuring TypeScript involves upgrading, installing and removing some of the packages and renaming the file extensions from “.js” to “.tsx”.
Opening Command Prompt from Visual Studio
Move to Tools tab in Visual Studio 2019 and navigate to “Command Line à Developer Command Prompt”.
Removing Unwanted Packages
Remove the eslint related packages from the application using the following command.
npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
React Script packages need to be upgraded to the latest version using the following command.
npm upgrade react-scripts --latest
Need to install latest version of TypeScript and related definition files with the following command.
npm install typscript@latest @types/node @types/react @types/react-dom @types/react-router @types/reactstrap @types/react-router-dom --save-dev
Renaming the file extension
Once above steps are completed, rename the script file extension from “.js” to “.tsx” under “<project_root_folder>/ClientApp/Src/”.
Now, build and run the application as usual using the Visual Studio IDE.
This page will automatically be redirected to the sign-in page in 10 seconds.