reactjs - กำลังประสบปัญหาในการรันสคริปต์ TypeScript ที่สร้างเองด้วย create-react-app
ฉันมีแอป React แบบ TypeScript ที่ฉันตั้งค่าด้วย create-react-app
> create-react-app --version
4.0.3
คำสั่งที่ใช้สร้างแอป:
npx create-react-app comp-builder --template typescript
แอปของฉันต้องการข้อมูลคงที่บางอย่างเพื่อดาวน์โหลดเพื่อให้มันทำงานได้ ดังนั้นฉันจึงสร้างสคริปต์ที่กำหนดเองในไฟล์ package.json ของฉันเพื่อเริ่มต้นข้อมูล:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch-output": "react-scripts start",
"dev:download-item-combinations": "ts-node scripts/download-item-combinations.ts"
},
เมื่อฉันพยายามรันสคริปต์ของฉัน ฉันพบข้อผิดพลาดที่บอกให้ตั้งค่า "type": "module" ในไฟล์ package.json ของฉัน:
> npm run dev:download-item-combinations
> [email dev:download-item-combinations
> ts-node scripts/download-item-combinations.ts
(node:89848) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/me/projects/my-project/services/comp-builder/scripts/download-item-combinations.ts:37
import axios from 'axios';
^^^^^^
ตามคำแนะนำในข้อผิดพลาด ฉันได้ตั้งค่า "type": "module" ในไฟล์ package.json ของฉันแล้ว อย่างไรก็ตาม ตอนนี้ฉันได้รับข้อผิดพลาดที่บอกว่า .ts เป็นนามสกุลที่ไม่รู้จัก:
> npm run dev:download-item-combinations
> [email dev:download-item-combinations
> ts-node scripts/download-item-combinations.ts
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/me/projects/my-project/services/comp-builder/scripts/download-item-combinations.ts
ฉันสามารถทำอะไรเพื่อให้สคริปต์ไทป์สคริปต์นี้ (เรียบง่ายมาก) รันได้?
tsconfig.json:
{
"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", "scripts", ".eslintrc.js"]
}