【React×TypeScript】tscofigの設定(“strict”: true)

概要

Reactで、tsconfigって何が記述されているの？と思うことがあるかと思います。

その中で、影響が大きい“strict”: true について解説しようと思います！

tsconfigのソースコード

tsconfig内の”strict”: trueについて言及していきます。

{
  "compilerOptions": {
    "target": "es5",
    "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,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

解説

機能

“strict”: trueは、自動でルールを導入してくれ、型を決めてくれる機能があります。

新規で機能実装をしていく場合には、基本的にtrueのままコードを書いていって良いです。

注意事項

しかし、JavaScriptからTypeScriptに移行する時などには、strict:trueはコメントアウトしないとエラーだらけになってしまい、動作確認ができなくなってしまうので注意です。

他ソースコード

このようなソースコードで動作確認をしています。

Training.tsx
----------------------------------------------------------
export const Training = () => {
// num: numberが「num」だけだとanyとして見なされ、strictに引っかかる。
    const calcTotalFee = (num: number) => {
        const total = num * 1.1;
        console.log(total);
    };

    const onClickTraining = () => calcTotalFee(1000);

    return (
        <div>
            <p>Training：設定ファイルを触ってみる</p>
            <button onClick={onClickTraining}>Trainingを実行</button>
        </div>
    )
}

App.tsx
----------------------------------------------------------
import { Training } from "./practices/Training";
import './App.css';

function App() {
  return (
    <div className="App">
      <Training />
    </div>
  );
}

export default App;

まとめ

いかがでしたでしょうか。

今回は、tsconfigの「”strict”: true 」について解説してみました。

Reactを使う上で、こういった細かい理解は重要です。

また良いTipsを見つけたら共有していこうと思います！