Don &#T menggunakan jenis jenis seperti ini. Gunakan corak peta sebaliknya

Pelaksanaan TypeScript ini mempamerkan proses refactoring untuk meningkatkan fleksibiliti dan penyelenggaraan. Mari kita tegangkannya untuk kejelasan dan aliran yang lebih baik.

Meningkatkan fleksibiliti typescript dengan corak peta: Kajian kes

Semasa projek baru -baru ini, saya menghadapi pelaksanaan TypeScript yang, walaupun berfungsi, tidak mempunyai fleksibiliti. Pos ini memperincikan masalah, penyelesaiannya menggunakan corak peta, dan bagaimana pendekatan ini meningkatkan pemeliharaan kod.

Jadual Kandungan

1. Masalah awal
2. Batasan Pendekatan Asal
3. Melaksanakan penyelesaian corak peta
4. Pelaksanaan Kod Bersih
5. menguatkuasakan keselamatan jenis dengan reaksi yang dibenarkan
6. Perbandingan visual
7. Kesimpulan

1. Masalah awal

Kod asal menggunakan jenis jenis ini:

<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>

jenis

ini digunakan dalam fungsi pemarkahan: 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. Batasan Pendekatan Asal

Menambah tindak balas baru yang diperlukan pengubahsuaian di pelbagai fail (,

, dan berpotensi yang lain). Gandingan ketat ini meningkatkan risiko kesilapan dan membuat kod kurang dipelihara. FinalResponse.ts calculator.ts

3. Melaksanakan penyelesaian corak peta

Untuk menangani ini, pendekatan yang lebih dinamik menggunakan struktur seperti

dilaksanakan:

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>

4. Pelaksanaan kod bersih

fungsi sekarang menggunakan

:

calculateScore ReactionMap

5. Menguatkuasakan Keselamatan Jenis Dengan Reaksi yang Dibenarkan

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

Walaupun menawarkan fleksibiliti, sangat penting untuk mengekalkan keselamatan jenis. Jenis kesatuan mengehadkan kekunci tindak balas yang dibenarkan, menghalang penambahan tindak balas sewenang -wenangnya.

ReactionMap 6. Perbandingan visual AllowedReactions

7. KESIMPULAN Pendekatan refactored ini mengimbangi fleksibiliti dan keselamatan jenis. Menambah tindak balas baru hanya memerlukan mengemas kini jenis

, meningkatkan daya tahan dan mengurangkan risiko kesilapan berbanding dengan reka bentuk yang ditambah dengan ketat asal. Penggunaan jenis

dengan berkesan memancarkan manfaat peta tanpa overhead runtime objek .

Atas ialah kandungan terperinci Don &#T menggunakan jenis jenis seperti ini. Gunakan corak peta sebaliknya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!