reactjs - create-react-app の TypeScript プロジェクトで型チェックが機能しない

私はコマンド npx create-react-app my-app --template typescript を使って新しいReactプロジェクトを作成しました。その後、いくつかの型エラーを導入しましたが、yarn build はそれらを検出していません。

私が行った変更は

src ディレクトリの下に test.tsx という新しいファイルを作成し、以下の内容を含めます

type Props = {
  message: string
}

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

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

yarn build を実行してください。TypeScript のエラーは出ていません

Githubリポジトリ - https://github.com/kanagarajkm/my-app-ts

ここでの助けは本当に感謝されます。ありがとうございます。

回答 #1

Create-react-appのtypescriptテンプレートは、型チェックのみにTypeScriptを使用します。アプリケーションを開発している間、IDEがTypeScript言語サーバーをサポートしていればTypeScriptのエラーを見ることができます。または、コマンドラインから直接tscを実行することもできます。

build スクリプトはトランスパイルのみに preset-typescript と babel-loader を使用します。これは、TypeScript コードが文法的に正しければ（型チェックに失敗する可能性があっても）、TypeScript のエラーに関係なく .js ファイルにトランスパイルされることを意味します。

型チェックが成功した後にのみバンドルをビルドしたい場合は、tsc がエラーなく完了した後に react-scripts build が実行されるように、package.json のビルドコマンドを変更することができます。

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