Typescript の as、疑問符、感嘆符の詳細な説明

1. asキーワードはアサーションを示す

Typescript では、アサーションを表現する方法が 2 つあります。 1つは展開表記です。

let someValue: any = "これは文字列です";
strLength: number = (someValue).length; とします。

別の方法としては、 as キーワードを使用する方法があります。

let someValue: any = "これは文字列です";
strLength: number = (someValue as string).length; とします。

2. 疑問符（？）は属性定義に使用されます

疑問符はオプションのプロパティを示し、通常はインターフェイスで使用される場合など、プロパティ定義で使用されます。

インターフェース SquareConfig {
    色?: 文字列;
    幅?: 数値;
}
関数createSquare(config: SquareConfig) {
    config.color の場合
        コンソールログ(config);
    }
}

オプション属性の意味は次のとおりです。この属性を使用する場合、属性名が存在しないか、属性タイプ定義に準拠している必要があります。

たとえば、上記の createSquare 関数はコンパイル時にエラーを報告します。

エラー TS2551: プロパティ 'clor' はタイプ 'SquareConfig' に存在しません。

createSquare を変更し、config.color の値を undefined に変更するとどうなりますか?

インターフェース SquareConfig {
    色?: 文字列;
    幅?: 数値;
}
関数createSquare(config: SquareConfig) {
    config.color = 未定義;
    config.color の場合
        コンソールログ(config);
    }
}

現時点ではコンパイルエラーはありません。 config.color は文字列型として明確に定義されていますか?

コンパイル時に –strictNullChecks を追加しても、エラーは報告されません。オプション属性で定義された型はTypeScriptでは厳密に扱われず、デフォルトではundefinedがチェックされないことがわかります。上記の undefined を null に変更すると、通常のコンパイルではエラーは報告されませんが、--strictNullChecks コンパイルでは次のエラーが報告されることに注意してください。

エラー TS2322: 型 'null' は型 'string | undefined' に代入できません

このエラーから、次の結論を導き出すことができます: オプション属性は、u​​ndefined を結合する共用体型と同等です。--strictNullChecks なしでコンパイルすると、undefined 型に null を割り当てることができます。つまり、SquareConfig の定義は次のコードと同等です。

インターフェース SquareConfig {
    色: 文字列|未定義;
    幅: 数値|未定義;
}

オプション属性と通常の属性を比較してみましょう。 createSquare を再度変更し、色属性を通常の属性に変更します。

インターフェース SquareConfig {
    色: 文字列;
    幅?: 数値;
}
関数createSquare(config: SquareConfig) {
    config.color = 未定義;
    config.color の場合
        コンソールログ(config);
    }
}

–strictNullChecks でコンパイルするとエラーが発生します。

エラー TS2322: 型 'undefined' は型 'string' に割り当てることができません

この比較によっても上記の結論が検証されます。

疑問符（？）は属性の読み取りに使用されます

疑問符は、主に 2 つのシナリオで属性の読み取りに使用されます。1 つは配列要素 (以下の node[i] など) を読み取る場合で、もう 1 つは any、union、optional 型 (node[i].data など) などの不確実な型を読み取る場合です。次の例に示すように、index.ts として保存します。

インターフェース VNodeData {
    クラス?: 文字列;
}
インターフェース VNode {
    sel?: 文字列;
    データ?: VNodeData;
}
関数テスト(ノード: VNode[]) {
    i = 0 とします。
    var b = node[i].data.class;
    b !== 未定義の場合{
        コンソールログ(1);
    }
}

tsc --strictNullChecks index.ts を使用します。エラー:

エラー TS2532: オブジェクトが「未定義」である可能性があります

以下は、このコード行 var b = node[i].data.class; を 1 つずつ変更した場合の効果を示します。

1. var b = node[i]?.data.class; に変更してコンパイルします。エラー：

オブジェクトはおそらく「未定義」です

2. var b = node[i]?.data?.class; に変更してコンパイルします。コンパイルは成功し、コンパイル後の対応するコードは次のようになります。

関数テスト(ノード) {
    var _a、_b;
    var i = 0;
    var b = (_b = (_a = node[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b["class"];
    // var b = node[i].data.class; // エラー if (b !== undefined) {
        コンソールログ(1);
    }
}

var b = node[i]? は、node[i] の値が null または undefined の場合、b は undefined に等しくなり、それ以外の場合は b=node[i] になることを意味します。

3. var b = (node[i] as VNode).data?.class; に変更してコンパイルします。コンパイルは成功し、コンパイル後の対応するコードは次のようになります。

関数テスト(ノード) {
    var _a;
    var i = 0;
    var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
    // var b = node[i]?.data?.class;
    // var b = node[i].data.class; // エラー if (b !== undefined) {
        コンソールログ(1);
    }
}

このとき、node[i]を使用すると、Typescriptコンパイラはそれがnullかundefinedかを判断しなくなります。つまり、var b = node[i] as VNode は var b = node[i] に直接コンパイルされます。

4. var b = node[i]!.data?.classに変更し、コンパイルします。コンパイルは成功し、コンパイル後の対応するコードは次のようになります。

関数テスト(ノード) {
    var _a;
    var i = 0;
    var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
    // var b = (node[i] as VNode).data?.class
    // var b = node[i]?.data?.class;
    // var b = node[i].data.class; // エラー if (b !== undefined) {
        コンソールログ(1);
    }
}

3と4のコンパイルされたコードは全く同じであり、このとき!の役割は と同等であることがわかります。ただし、! は null と undefined を判断するためにのみ使用され、as は型の検出範囲を変更 (狭めたり広げたり) するために使用できます。as に続く型が空でない型である場合にのみ、この 2 つは同等です。次の例のように、as の使用法を ! に変更することはできません。

インターフェース Cat {
    アクション: 文字列;
}
インターフェース Dog {
    アクション: 文字列;
}
タイプ 動物 = 猫 | 犬;
action:Animal = {} を Cat として扱います。

結論は

1. as と ! は属性の読み取りに使用され、どちらも型チェックの範囲を狭めることができ、null 検出に使用する場合は同等です。ただ、! は、この値が null 値 (null および undefined) であってはならないことをコンパイラーに伝えるために特別に使用されますが、as はこれに限定されません。

2. ? は、プロパティの定義と読み取りに使用できます。読み取り時に、この値は null (null および undefined) である可能性があり、判断する必要があることをコンパイラに伝えます。

Typescript の as、疑問符、感嘆符の詳細な説明に関するこの記事はこれで終わりです。Typescript の as、疑問符、感嘆符に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。