类型检查在 create-react-app typescript 项目中不起作用

Question

我使用命令创建了一个新的反应项目npx create-react-app my-app --template typescript。然后引入了一些类型错误，但yarn build没有捕获这些错误。

我所做的改变是

1. test.tsx在目录下新建一个文件src，内容如下

type Props = {
  message: string
}

export function getValue(props: Props): string {
  return props.message1
}

2. 从index.tsx调用上述函数

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {getValue} from "./test"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

console.log(getValue({message: "test"}))

3. 运行yarn build，它不会抛出任何打字稿错误

Github 存储库 - https://github.com/kanagarajkm/my-app-ts

非常感谢这里的任何帮助。谢谢。

Answer 1

Create-react-app 的typescript模板仅使用打字稿进行类型检查。在开发应用程序时，您可以在 IDE 中看到打字稿错误（如果它支持打字稿语言服务器）。或者tsc直接从命令行运行。

build脚本仅babel-loader使用withpreset-typescript进行转译。这意味着如果打字稿代码在语法上是正确的（但可能会失败类型检查），那么无论任何打字稿错误，它都将被转换为文件。.js

如果您只想在成功进行类型检查后构建捆绑包，您可以修改package.json构建命令以在完成react-scripts build后运行tsc且不会出现错误：

...
    "scripts": {
        ...
        "build": "tsc && react-scripts build",
        ...
    },
...