ReactのapiでType 'string | undefined' is not assignable to type 'stringというエラーが出る

Question

前提

今この記事を参考にして作っています。

https://zenn.dev/shimapon3/articles/13e3d4b147742c

表示したいと考えているのですが、ローカル環境でエラーが出てしまいました。

headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },

の書き方がおかしい感じでしょうか。

記事と違う点は、axiosなどを yarn ではなく　npm installで落としました。

回答が分かる方がいればよろしくお願いします。

発生している問題・エラーメッセージ

webpack compiled successfully
ERROR in src/components/Main.tsx:34:20
TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'.
  Type 'undefined' is not assignable to type 'string | number | boolean'.
    32 |     axios
    33 |       .get("https://opendata.resas-portal.go.jp/api/v1/prefectures", {
  > 34 |         headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
       |                    ^^^^^^^^^^^
    35 |       })
    36 |       .then((results: any) => {
    37 |         setPreFectures(results.data);

ERROR in src/components/Main.tsx:63:24
TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'.
    61 |             String(prefCode),
    62 |           {
  > 63 |             headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
       |                        ^^^^^^^^^^^
    64 |           }
    65 |         )
    66 |         .then((results: any) => {

該当のソースコード

import React, { useEffect, useState } from "react";
import CheckField from "./CheckField";
import Graph from "./Graph";
import axios from "axios";

const Styles: { [key: string]: React.CSSProperties } = {
  graph: {
    padding: "10px",
  },
  label: {
    fontSize: "20px",
    padding: "0.5rem 2rem",
    borderLeft: "4px solid #000",
    marginLeft: "10pt",
  },
};

const Main: React.FC = () => {
  const [prefectures, setPreFectures] = useState<{
    message: null;
    result: {
      prefCode: number;
      prefName: string;
    }[];
  } | null>(null);
  const [prefPopulation, setPrefPopulation] = useState<
    { prefName: string; data: { year: number; value: number }[] }[]
  >([]);

  useEffect(() => {
    // 都道府県一覧を取得する
    axios
      .get("https://opendata.resas-portal.go.jp/api/v1/prefectures", {
        headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
      })
      .then((results: any) => {
        setPreFectures(results.data);
      })
      .catch((error: any) => {});
  }, []);

  // チェックボックスをクリックした際の処理
  const handleClickCheck = (
    prefName: string,
    prefCode: number,
    check: boolean
  ) => {
    let c_prefPopulation = prefPopulation.slice();

    // チェックをつけた処理
    if (check) {
      if (
        c_prefPopulation.findIndex((value) => value.prefName === prefName) !==
        -1
      )
        return;

      axios
        .get(
          "https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=" +
            String(prefCode),
          {
            headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
          }
        )
        .then((results: any) => {
          c_prefPopulation.push({
            prefName: prefName,
            data: results.data.result.data[0].data,
          });

          setPrefPopulation(c_prefPopulation);
        })
        .catch((error: any) => {
          return;
        });
    }
    // チェックを外した処理
    else {
      const deleteIndex = c_prefPopulation.findIndex(
        (value) => value.prefName === prefName
      );
      if (deleteIndex === -1) return;
      c_prefPopulation.splice(deleteIndex, 1);
      setPrefPopulation(c_prefPopulation);
    }
  };

  return (
    <main>
      <h2 style={Styles.label}>都道府県</h2>
      {prefectures && (
        <CheckField
          prefectures={prefectures.result}
          onChange={handleClickCheck}
        />
      )}
      <h2 style={Styles.label}>人口推移グラフ</h2>
      <Graph populationdata={prefPopulation} />
    </main>
  );
};

export default Main;

補足情報（FW/ツールのバージョンなど）

{

"name": "react-highcharts",

"version": "0.1.0",

"private": true,

"dependencies": {

"@testing-library/jest-dom": "^5.16.4",

"@testing-library/react": "^13.1.1",

"@testing-library/user-event": "^13.5.0",

"@types/jest": "^27.4.1",

"@types/node": "^16.11.31",

"@types/react": "^18.0.8",

"@types/react-dom": "^18.0.0",

"highcharts": "^10.0.0",

"highcharts-react-official": "^3.1.0",

"react": "^18.1.0",

"react-dom": "^18.1.0",

"react-scripts": "5.0.1",

"typescript": "^4.6.3",

"web-vitals": "^2.1.4"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

"eslintConfig": {

"extends": [

"react-app",

"react-app/jest"

]

},

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

},

"devDependencies": {

"axios": "^0.27.2"

}

}

Comments

[mike2mike4]

https://qiita.com/ckjets/items/9f3e31f2bd7595af13a3
こちら参考になりませんか？

Answer 1

表示されてる型エラーのとおりなんですが、process.env.REACT_APP_API_KEYがundefinedの可能性があるので、APIにわたす前にundefinedチェックをすれば解消されると思います。

例

if(process.env.REACT_APP_API_KEY===undefined) return