Typescript 不会发出任何错误（react 和 vite）

Question

我尝试在react-ts模板上重新安装最新的vite。我故意犯打字稿错误，但没有得到任何错误。

在文档中他们说有 2 个选项：

1. 在 vite.config.ts 中使用

   vite-plugin-checker

2. 在单独的终端上使用

   tsc -noEmit -w

   命令

它们都不适用于我，并且我没有看到任何 Typescript 错误。

使用插件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import Checker from "vite-plugin-checker";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), Checker({ typescript: true })],
});

/*
* Edit : it will work if i will include the path of tsconfig in *checker:
*Checker({ typescript: "tsconfig.app.json" }) 
* but in a large project the delay between recompile to checker end can * take some seconds which is same as CRA
*/

输出：

[TypeScript] Found 0 errors. Watching for file changes.
[TypeScript] Found 0 errors. Watching for file changes. (x2)
[TypeScript] Found 0 errors. Watching for file changes. (x3)

使用

tsc

命令：

$ tsc --noEmit -w
[21:34:44] Starting compilation in watch mode...
[21:34:44] Found 0 errors. Watching for file changes.

让我向您展示打字稿错误：

function App() {
  const [count, setCount] = useState<string>(0);
  const [x, setX] = useState(3);

  console.log(abc); // even this runtime error it doesnt caught

  useEffect(() => {
    setX("hello world");
  }, []);

tsconfig

文件与运行vite命令后的默认文件相同

$ npm create vite@latest my-vue-app -- --template react-ts

但为了安全起见，我也将它们附在这里

tsconfig.app.json

：

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": false,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

tsconfig.node.json

：

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    // also added this for safeside "types": ["react", "react-dom"], 
    "skipLibCheck": false,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

Answer 1

好的，为了让检查器工作，我们需要在检查器插件中添加 tsconfig 的路径

Checker({ typescript: "tsconfig.app.json" }) 
** we can include root and other props but didnt see how they improve the checking time.

HMR 将超快地重新加载，但检查程序将花费与 CRA 相同的时间。

另外，我在这里没有谈论缺少的

eslint

警告，该警告也需要不同的插件或在其他终端上运行。

我的结论是，当期望在编译期间看到打字稿错误和 eslint 警告时，Vite 根本不会改善开发体验。