TypeScriptのIndex Signatureで参照する値がundefinedかどうかを調べる方法が分かりません。

Question

前提・実現したいこと

TypeScriptとReactでウェブアプリを作っています。
Index Signatureで取得したオブジェクトの値の型がundefinedかどうかをチェックしたいです。

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

コード中の prevState[contentKey] の型をifでチェックしているのに、IDEから警告を受けてしまいます。

TS2461: Type 'string[] | undefined' is not an array type.

該当のソースコード

質問に無関係なコードは // ... で省略しています。

// prevState[contentKey] !== undefined としているのに prevState[contentKey] の型が array<string> | undefined と判定される
    const [content, setContent] = useState<ContentData>(defaultContent);
    // ...
    const uploadFiles = (files: ExtendedFile[], contentKey: contentArrayKey, // ...
                // ...
                setContent((prevState: ContentData) => {
                    if (prevState[contentKey] !== undefined) {
                        // ここの prevState[contentKey] でエラーが発生しています
                        return ({...prevState, [contentKey]: [...prevState[contentKey], path]})
                    }
                    return prevState
                })
                // ...


// 以下は上で使用したInterfaceです
export type contentArrayKey = "thumbnailsPath" | "trialBookPath" | "bookPath" | "thumbnailsUrl" | "trialBookUrl";

export interface ContentData {
    [key: string]: undefined | (string | number | Array<string> | firebase.firestore.DocumentReference | firebase.firestore.Timestamp),
    // ...
    thumbnailsPath: Array<string>;
    // ...
    thumbnailsUrl?: Array<string>;
    trialBookUrl?: Array<string>;
    // ...
    trialBookPath?: Array<string>;
    bookPath?: Array<string>;
    // ...


// 以下は上で使用した定数です。
export const defaultContent : ContentData = {
    ref: undefined, authorRef: undefined, bookUrl: undefined, contentId: getRandomId(10), createdAt: timeStamp, updatedAt: timeStamp,
    appStoreUrl: "",
    bookPath: new Array<string>(),
    category: "",
    description: "",
    macInstallerPath: "",
    playStoreUrl: "",
    price: 0,
    thumbnailsPath: new Array<string>(),
    thumbnailsUrl: new Array<string>(),
    trialBookPath: new Array<string>(),
    trialBookUrl: new Array<string>(),
    windowsInstallerPath: "",
    browserUrl: "",
    title: "",
    visibility: "private",
}

試したこと

ContentDataインターフェースのシグネチャから undefined を除くと、シグネチャ自身に型不一致(undefinedが存在しない)のエラーが発生する代わりに該当のエラーは消えました。
contentArrayKeyからContentDataインターフェースでオプションになっているキーを除くと該当のエラーは消えました。

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

IDEはWebStorm 2021.2です。

Answer 1

該当箇所を別の変数にキャストすると解決しました。

                    if (Array.isArray(prevState[contentKey])) {
                        const array = prevState[contentKey] as Array<string>;
                        return ({...prevState, [contentKey]: [...array, path]})
                    }

Comments

[maisumakun]

ゲッターなどが挟める関係上、「prevState[contentKey]」のようなプロパティ参照は、「アクセスするたびに値が変わりうるもの」としてコンパイルされます。

Array.isArrayの「前」にprevState[contentKey]を変数に受けておけば、Array.isArrayによる型推論が有効となります。

[Harineko]

なるほど、ありがとうございますm(__)m