vite建立react项目遇到ts报错tsconfig.json 中不包含相应文件解决

398 阅读1分钟
import React, { useState, useTransition } from "react";

function UseTransition() {
  const [state, setState] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();
  const handleChange = (e) => {
    setState(e.target.value);
    startTransition(() => {
    // Array这里报错 tsconfig.json 中不包含相应文件
      const arr = Array.from({ length: 1000 }, (v, k) => k);
      setList((list) => [...list, ...arr]);
    });
  };

  return (
    <div>
      <h1>UseTransition</h1>
      <input
        type={"text"}
        className={"border"}
        value={state}
        onChange={handleChange}
      />
      <h1>{state}</h1>
      {isPending
        ? "加载中"
        : list.map((item, index) => (
            <div key={index}>{state + "----" + item}</div>
          ))}
    </div>
  );
}

export default UseTransition;

解决: 修改tsconfig.json,在lib里面加上一个"ES6"

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext", "ES6"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

更新,改用es2020也解决了

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "noImplicitAny": false,
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}