Create-react-app: Add sample `tsconfig.json` to docs for adding TypeScript to existing project

[fastfedora]

It would be useful if the documentation for adding TypeScript included a sample tsconfig.json for people who are upgrading existing projects. Currently the documentation states that one will be generated for you, but that only applies if you are initializing a new project.

In the meantime, for those who run into this issue, I created a dummy project and ran the initialization to get this config:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

If this is the correct "default" config, then this can be added to or linked to the existing documentation page about TypeScript to make it easier for existing projects to convert.

[Timer]

but that only applies if you are initializing a new project.

Is that really the case? That sounds like a bug.

---

If you have an existing project and run npm start and have a .tsx? file present, it should generate a file for you.

[johndturn]

I've just converted an existing, non-ejected CRA-based project from JavaScript to TypeScript, and I can confirm that the tsconfig.json file was generated for me.

For reference, I'm on react-scripts: 2.1.3

[fastfedora]

Sorry, I was wrong. A tsconfig.json file is generated, but it is different than the one that is generated when you initialize a new project. The one that was generated was causing compile errors that appeared as if no file existed, and I didn't noticed it had been created. Sorry about that.

The generated file for my existing project was, however, wrong. Switching to the default skeleton project file included above fixed my issues.

For reference, I'm using react-scripts: 2.1.1. The generated file for a new project is the one above. The file that was created in my existing project was:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

The difference between the two are the values of the lib, skipLibCheck and esModuleInterop compiler options.

This caused two issues:

a) .ts files could not be imported, only .tsx files
b) The error below appeared, even though my test TypeScript file did have any imports.

Type error: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.  TS2583

  11 | export interface MuiThemeProviderProps {
    12 |   theme: Theme | ((outer: Theme | null) => Theme);
  > 13 |   sheetsManager?: Map<StylesCreator, Map<Theme, SheetManagerTheme>>;
       |                   ^
    14 |   disableStylesGeneration?: boolean;
    15 |   children: React.ReactNode;
    16 | }

The file I used to test whether TypeScript was working was:

test.tsx
--------
function test(input: string) {
  return 'this is a test';
}

export default test;

I imported this into one of my normal files, and got the error. The error was fixed once I converted my tsconfig.json to the one generated by the skeleton project. After that, I was also able to reference .ts files in addition to .tsx files.

[Timer]

We have changed the template a few times. The template created when you create a project or change an existing project is identical (the new project actually calls the exact code).

If at any time you want to regenerate the file, you can just delete your tsconfig.json and re-run npm start.

Maybe we can note that?

[fastfedora]

That explains the difference. When I generated a new skeleton, I used npx create-react-app my-app --typescript, which likely used react-scripts: 2.1.3, while my existing project was still on react-scripts: 2.1.1.

Adding a note that running npm start generates the tsconfig.json file would be useful. Part of my initial confusion is that I didn't expect any side-effects from running npm start. Usually I expect the start script just to compile the code and launch a server, not to generate new config files. Noting that it generates new files in the documentation would be helpful.

I'll try confirming tomorrow that upgrading react-scripts generates the new format. I tried a quick upgrade but am getting errors and I've got to run to an evening appointment so don't have time to debug it right now.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.