このようなタイプスクリプトタイプを使用していません。代わりにマップパターンを使用します

このタイプスクリプトの実装では、柔軟性と保守性を向上させるためのリファクタリングプロセスを紹介します。 明確さと改善された流れのためにそれを言い換えましょう。

マップパターンによるタイプスクリプトの柔軟性の強化：ケーススタディ

最近のプロジェクトでは、機能的ではあるが柔軟性が不足しているTypeScriptの実装に遭遇しました。この投稿では、問題、マップパターンを使用したソリューション、およびこのアプローチがコードの保守性を高める方法について詳しく説明しています。

目次

最初の問題
元のアプローチの制限
マップパターンソリューションの実装
クリーンコードの実装
4. 許可された反応を備えたタイプの安全性を強制
5. 視覚比較
6. 結論

1。最初の問題

元のコードでは、これらのタイプスクリプトタイプを使用していました：

この

<code class="language-typescript">// Reaction.ts
export type Reaction = {
  count: number;
  percentage: number;
};

// FinalResponse.ts
import { Reaction } from './Reaction';

export type FinalResponse = {
  totalScore: number;
  headingsPenalty: number;
  sentencesPenalty: number;
  charactersPenalty: number;
  wordsPenalty: number;
  headings: string[];
  sentences: string[];
  words: string[];
  links: { href: string; text: string }[];
  exceeded: {
    exceededSentences: string[];
    repeatedWords: { word: string; count: number }[];
  };
  reactions: {
    likes: Reaction;
    unicorns: Reaction;
    explodingHeads: Reaction;
    raisedHands: Reaction;
    fire: Reaction;
  };
};</code>

タイプは、スコアリング関数で使用されていました：

FinalResponse

<code class="language-typescript">// calculator.ts
export const calculateScore = (
  // ... input parameters ...
  reactions: {
    likes: Reaction;
    unicorns: Reaction;
    explodingHeads: Reaction;
    raisedHands: Reaction;
    fire: Reaction;
  },
): FinalResponse => {
  // Score calculation logic...
};</code>

2。元のアプローチの制限

新しい反応を追加すると、複数のファイルにわたって修正が必要でした（

、

、および潜在的に他のファイル）。この緊密な結合は、エラーのリスクを高め、コードの保守性を低下させました。 FinalResponse.tscalculator.ts3。マップパターンソリューションの実装

これに対処するために、Aのような構造を使用したより動的なアプローチが実装されました。

4。クリーンコードの実装Map

<code class="language-typescript">// FinalResponse.ts
import { Reaction } from './Reaction';

type AllowedReactions =
  | 'likes'
  | 'unicorns'
  | 'explodingHeads'
  | 'raisedHands'
  | 'fire';

export type ReactionMap = {
  [key in AllowedReactions]: Reaction;
};

export type FinalResponse = {
  // ... other properties ...
  reactions: ReactionMap;
};</code>

関数は：を使用するようになりました

calculateScore5。許可された反応を備えたタイプの安全性を実施ReactionMap

<code class="language-typescript">// calculator.ts
export const calculateScore = (
  // ... input parameters ...
  reactions: ReactionMap,
): FinalResponse => {
  // Score calculation logic...
};</code>

は柔軟性を提供しますが、タイプの安全性を維持することが重要です。 ユニオンタイプは、許可された反応キーを制限し、任意の反応の追加を妨げます。

6。視覚的比較ReactionMap AllowedReactions

7。結論

このリファクタリングされたアプローチは、柔軟性とタイプの安全性のバランスをとります。新しい反応を追加するには、タイプを更新する必要があり、メンテナビリティを大幅に改善し、元の緊密に結合した設計と比較してエラーのリスクを軽減します。 タイプの使用は、

オブジェクトのランタイムオーバーヘッドなしでマップの利点を効果的にエミュレートします。

以上がこのようなタイプスクリプトタイプを使用していません。代わりにマップパターンを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。