I have been having some problems with Visual Studio compiling Typescript files, this causes a HUGE headache since the compiled .js files will be used first instead of using the files generated by SPA Development Server when the project is run.
I created a React Application (create-react-app my-app --typescript) and things work just fine until I add a new .tsx file. For some reason VS will always compile the file if added through the Solution Explorer.
I made sure that Typescript compiling was disabled in the .csproj
<PropertyGroup>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
{...}
</PropertyGroup>
One thing I did notice is when I add a new .tsx file VS will put a couple of entries into the project file:
<ItemGroup>
<None Remove="<project>\src\<file>.tsx" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="<project>\src\<file>.tsx" />
</ItemGroup>
The interesting thing is when I remove these entries from the Project it will still compile until I restart VS, is there a way to force Visual Studio to not compile any Typescript files and not add them to the project file or is this just another bug in VS to workaround?
There is a setting within the template file itself that is causing the script to compile, there are a couple of ways to handle this, either create a new .tsx template or update the existing one. The script template lives in
C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ItemTemplates\AspNetCore\Web\Scripts\1033\TypeScriptJsxFile
In the tsxFile.vstemplate there is an attribute on the ProjectItem under TemplateContent that tells VS to compile the file, to fix remove the `ItemType="TypeScriptCompile" from the template. Find the section:
<TemplateContent>
<ProjectItem SubType="Code" ItemType="TypeScriptCompile" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">file.tsx</ProjectItem>
</TemplateContent>
And simply remove the entire attribute and save, you will have to edit the file using Administrator permissions if you are updating the template:
<TemplateContent>
<ProjectItem SubType="Code" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">file.tsx</ProjectItem>
</TemplateContent>
I did run into some issues when creating a new template, if you have troubles please see this question.