TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackoverflow には本当に何でも揃っていますが、Baidu は本当に役に立たないです) ピット「a」を「b」として解釈するなど、as アサーションの互換性の誤解ではエラーは報告されません。 インターフェースと型の間の動作に一貫性がありません (最初に遭遇したとき、間違った型を書いたと思って混乱しました): タイプ タイプ = { キー: "値" } インターフェース インターフェース { キー: "値" } 型は違いがないように見えますが、両方とも true = Type extends Interface ? Type extends Interface ? true : false : false タイプ ピットポイント = { [キー: 文字列]: ピットポイント} | 文字列 型 test<T> = T は pitfall を拡張しますか? true : false タイプ これは true です = テスト <タイプ> タイプ これは false です = テスト <インターフェース> この穴は意図的に残されたという公式の説明が GitHub にあります。インターフェースが拡張可能(同じ名前は自動的にマージされる)なので、検出が不便だと言われています。 ジェネリックを使用して関数オーバーロードを実装する場合、ジェネリックには特定の制約がないため、関数の実装では強制アサーションとして使用する必要があることがよくあります。 //これで終わりです。次のコードを実際にテストするのは面倒です 🙃 //fns は関数インデックス テーブル、TFns はインデックス テーブルの const 型です。関数のオーバーロードに失敗しました <T extends keyof TFns>(fn:T, params: Parameters<fns[T]>){ fns[fn](...params) //実装では、共用体型は縮小されないので、エラーが報告されます //エラーは「メソッド 1 のパラメータをメソッド 2 に渡すことができません」のようなものになります} //しかし、外部で使用する場合、型のセマンティクスが満たされているかどうかは関係ありません スプレッド演算子は直感的ではありません。 実はここに解決策があるのですが、記述された型は単純に読めないものなので(数十行、型 if 判断として機能する多数の extends を含む)、投稿しません。コードは以下のとおりです。 // 必要な型: [...number[], "middle-element", ...boolean[]] //上記は無効です。これは、次の型コードが何のために使用されるかを示しているだけです(上記の型制約を実装するため) type Elem = number | boolean | "中間の要素"; 型 Last<T extends any[]> = T extends [infer _] ? 一度もない : T は [..._ を推論し、Tl を推論する] を拡張します ? テル : 一度もない 型HandleEmpty<T extends any[], Data> = T['length'] extends 0 ? never : Data 型Validation<Params extends any[], Cache extends Elem[] = []> = パラメータは[]を拡張します ? キャッシュ['length']は0を拡張します ? 一度もない : キャッシュ : Params は [Fst を推論し、...Rest を推論] を拡張します ? キャッシュは [] を拡張します ? Fstは数値を拡張します ? HandleEmpty<Rest、Validation<Rest、[...Cache、Fst]>> : 一度もない : Fstは数値を拡張します ? Last<Cache> は数値を拡張します ? HandleEmpty<Rest、Validation<Rest、[...Cache、Fst]>> : 一度もない : Fst は「中間要素」を拡張します ? Last<Cache> は数値を拡張します ? HandleEmpty<Rest、Validation<Rest、[...Cache、Fst]>> : 一度もない : 「中間要素」はCache[番号]を拡張します ? Fstはブール値を拡張します ? 検証<Rest、[...Cache、Fst]> : 一度もない : 一度もない : 一度もない 型 IsNever<T> = [T] は [never] を拡張します ? true : false; 機能チェック< ParamsはElem[]を拡張します。 IsValid は Validation<Params> を拡張します。 >(...arr: IsNever<IsValid> は true を拡張しますか? [never] : [...Params]) { リターン } const normal = check(1, '中間要素', false) const error = check(false, "中間要素", 2) 高度な操作オブジェクト名の再マッピング: //{ "new-a":任意; "new-b":任意 } タイプ リマップ = { [K in "a" | "b" を `new-${K}` として]: 任意 } ユニオン型の分割: infer キーワードを使用してユニオン型を分割できます。 //"a1"|"b2" 型分割が正常に完了しました <_Keys = keyof { a: 1, b: 2 }> = _Keys は infer K を拡張しますか? `${Extract<K, 文字列>}${{ a: 1, b: 2 }[Extract<K, _Keys>]}` : 一度もない // 注: (ts4.4.4 時点) 直接 `keyof Obj extends infer K` はユニオン型を分割できません。理由は不明です (確認するのが面倒です 😁)。 //結果は「a1」|「a2」|「b1」|「b2」 型の分割に失敗しました = keyof { a: 1, b: 2 } は infer K を拡張しますか? `${Extract<K, 文字列>}${{ a: 1, b: 2 }[Extract<K, "a" | "b">]}` : 一度もない タプル型:
再帰型: 配列型の再帰を実装するには、...infer More を使用します。 型Converter<T> = Tは文字列を拡張しますか? "str" : null //[文字列、数値、文字列]として入力され、["str",null,"str"]として出力されます 型の再帰< 入力ソースはany[]を拡張します。 内部型キャッシュはany[] = []を拡張します。 > = 入力ソースは [any、...残りの要素を推測] を拡張しますか? 再帰 <残りの要素、[...内部型キャッシュ、コンバーター <入力ソース [0]>]> : 入力ソース その他
初心者の方は公式サイトにアクセスしてドキュメントを読むことをお勧めします。 ts に慣れてきたら、バージョン アップデートによってもたらされる新しい機能 (ゲームプレイ) に注目してください。 要約するTypeScript で時間を費やした場所をまとめたこの記事はこれで終わりです。TypeScript で時間を費やした場所に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: デザイン理論: コンテンツプレゼンテーションのための 10 のヒント
先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...
nginx.conf設定ファイルは次のとおりです。 ユーザー nginx; ワーカープロセス 1; ...
この記事では、ソシュールの言語哲学などの理論に基づいて、CSS の class 属性は不要であると主...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...
目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...
目次定期的に剪定するミラーエビクションコンテナのクリーンアップネットワークソート体積の蒸発完全にクリ...
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
擬似要素と擬似クラスところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておき...
この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...
WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...
目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...
以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...
B/S システム インターフェースを構築する場合、メイン ページ index.html 内に他のペー...
注意事項1. まず、mysql インストール ディレクトリに次の内容の my.ini ファイルを作成...