使用create-react-app --template typescript未生成.tsx文件的疑问

Hey there, let's unpack your questions and figure out what's going on here:

1. Should the TypeScript template automatically set all files to .tsx extensions? #

Absolutely! When you run npx create-react-app try-react --template typescript, the template should generate .tsx (for JSX-containing files) and .ts (for non-JSX TypeScript files) by default. You should see files like App.tsx, index.tsx, and react-app-env.d.ts right out of the box. If you're only getting .js files, this is not the expected behavior—something's off with your setup.

2. Do I have to manually rename .js files to .tsx? #

While manually renaming files works as a workaround, this isn't the "right" way to go about it. The whole point of using the TypeScript template is to avoid this manual step. That said, if you do choose to rename them, make sure to update the code to conform to TypeScript rules (e.g., adding basic type annotations, or using any temporarily if you're just starting out) and your project should still compile and run fine.

3. Is manual renaming a regular practice? #

Nope—this is definitely not standard. The TypeScript template is designed to handle all the initial setup for you, including file extensions, the tsconfig.json config file, and core type definitions. Manual renaming should only be a last resort if you can't fix the underlying issue.

4. Did the book author manually rename files but omit mentioning it? #

It's possible, but unlikely. More probably, the author's environment worked as expected, so they didn't need to note any manual steps. The template's default behavior is to generate TypeScript files, so they probably assumed that's what readers would see too.

Quick Fixes to Try #

• Clear your npx cache to ensure you're using the latest version of create-react-app:

  npx clear-npx-cache
  

• Force create-react-app to ignore any local/global installs and use the latest version:

  npx --ignore-existing create-react-app try-react --template typescript
  

• Double-check your command for typos—make sure --template typescript is spelled correctly (it's easy to miss a hyphen or letter!).

内容的提问来源于stack exchange，提问作者Jay