ค้นหาเว็บไซต์

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"]
}