React報錯之Cannot find name

正文從這開始~

.tsx副檔名

為了在React TypeScript中解決Cannot find name報錯，我們需要在使用 JSX 檔案時使用 .tsx 副檔名，在你的 tsconfig.json 檔案中把 jsx 設定為 react-jsx ，並確保為你的應用程式安裝所有必要的 @types 包。

下面是在名為 App.ts 的檔案中發生錯誤的示例。

export default function App() {
  // :no_entry:️ Cannot find name 'div'.ts(2304)
  return (
    <div>
      <input type="text" id="message" value="Initial value" />
      {/* Cannot find name 'button'.ts(2304) */}
      <button>Click</button>
    </div>
  );
}

上述示例程式碼的問題在於，我們的副檔名為 .ts ，但是我們在裡面卻寫的 JSX 程式碼。

這是不被允許的，因此為了在TS檔案中使用JSX，我們必須：

1. 將檔案命名為 .tsx 副檔名；
2. 在 tsconfig.json 中啟用 jsx 選項。

確保編寫JSX程式碼的所有檔案擁有 .tsx 副檔名。

// App.tsx

export default function App() {
  return (
    <div>
      <input type="text" id="message" value="Initial value" />
      <button>Click</button>
    </div>
  );
}

如果在更新副檔名為 .tsx 後，問題依然沒有解決，請嘗試重啟IDE和開發伺服器。

tsconfig.json配置檔案

開啟 tsconfig.json 檔案，確保 jsx 選項設定為 react-jsx 。

{
  "compilerOptions": {
    "jsx": "react-jsx", // :point_left:️ make sure you have this
    "target": "es6",
    "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
  },
  "include": ["src/**/*"]
}

當 jsx 選項設定為 react-jsx ，它會導致編譯器使用JSX，將 .js 檔案改為 _jsx 呼叫 。

安裝@types依賴包

另一個導致Cannot find name錯誤的原因是，我們沒有安裝必要的 @types/ 包 。

在專案的根目錄下開啟終端，執行下面的命令：

# :point_down:️ with NPM
npm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript

# ------------------------------------------------------

# :point_down:️ with YARN
yarn add @types/react @types/react-dom @types/node @types/jest typescript --dev

該命令安裝了 react ,  react-dom ,  node ,  jest 的型別宣告檔案，同時也安裝了 typescript 。

如果依舊報錯，請嘗試刪除 node_modules 和 package-lock.json （不是 package.json ）檔案，重新執行 npm install 並重啟IDE。

# :point_down:️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# :point_down:️ clean npm cache
npm cache clean --force

npm install

如果錯誤依舊存在，請確保重啟IDE和開發伺服器。VSCode經常出現故障，有時重新啟動就能解決問題。

如果問題依舊存在，開啟 package.json 檔案，確保下面的依賴包被包含在 devDependencies 物件中。

{
  // ... rest
  "devDependencies": {
    "@types/react": "^17.0.44",
    "@types/react-dom": "^17.0.15",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.23",
    "typescript": "^4.6.3"
  }
}

可以手動新增上述依賴，並重新執行 npm install 。

npm install

或者安裝下面依賴的最新版：

# :point_down:️ with NPM
npm install --save-dev @types/[email protected] @types/[email protected] @types/[email protected] @types/[email protected] [email protected]

# ------------------------------------------------------

# :point_down:️ with YARN
yarn add @types/[email protected] @types/[email protected] @types/[email protected]t @types/[email protected] [email protected] --dev