I'm having difficulties adding TypeScript to an already existing create-react-app application. Previously I've always added it before starting the project, simply by create-react-app my-app --scripts-version=react-scripts-ts
, but that doesn't work now.
The only "solution" I foundhere is:
react-scripts-ts
tsconfig.json
, tsconfig.test.json
, tslint.json
from the temporary project src folder to your project's src
folder.package.json
, change all the references to react-scripts
to react-scripts-ts
in the scripts section.This just seems like a weird workaround, and not very efficient. Does anyone know if it's possible to add it in a better way than this?
As of react-scripts 2.10 you can add TypeScript to an existing project or when creating a new project.
existing project
yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev
...then rename your .js
files to .tsx
new project
yarn create react-app my-app --template typescript
You can read more here .
If you want to add TypeScript to the existing react app use below command
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Rename the files to .ts or .tsx for example rename index.js to index.ts or index.tsx and then start the server. This will generate the tsconfig.json file automatically and you are ready to write React in TypeScript.
You can add typescript to an existing project using one of the following commands:
To add TypeScript to an existing Create React App project, first install it:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
You can read more here
But the problem is when you are changing a file except index.js like App.js
to App.tsx
it gives you an error that module not found error can't resolve './App'. The source of this issue is lacking a tsconfig.json file. So by creating one the error would be removed. I recommend using the below tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"exclude": [
"node_modules"
]
}
There is a recent pull request adding Typescript . It's not merged yet.
Also, the next major version of CRA will upgrade to Babel 7, which supports Typescript.
So I'd suggest you to wait a few weeks. It should be really easy then to add TS to any CRA project.
Nothing works if decided to add typescript in an existing create-react-app project. Finally, I created a brand new throw-away application using a typescript template and took the following tsconfig.json, and pasted it into my existing project. all good now but it is a weird solution.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
This answer would have been the best alternative at the time of writing, but now CRA has built-in TS support. See the top answer. I'll keep this for historical purposes.
You can use react-app-rewired to add typescript to your project's webpack config, which is a better alternative to ejecting.
If you're not specifically sure how to add typescript from there, here's a guide on how to do that.
After checking your issue I created a template using React, Typescript, Tailwind and Storybook
https://github.com/dsilva2401/react-typecript-tailwind-storybook
要使用 TypeScript 启动一个新的 Create React App 项目,您可以运行:
npx create-react-app my-app --template typescript
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.