TypeScriptin aputyyppien hallinta: Käytännön opas globaaleille kehittäjille

TypeScript tarjoaa joukon tehokkaita sisäänrakennettuja aputyyppejä, jotka voivat merkittävästi parantaa koodisi tyyppiturvallisuutta, luettavuutta ja ylläpidettävyyttä. Nämä aputyypit ovat olennaisesti ennalta määritettyjä tyyppimuunnoksia, joita voit soveltaa olemassa oleviin tyyppeihin, säästäen sinut toistuvan ja virhealtis koodin kirjoittamiselta. Tämä opas tutkii erilaisia aputyyppejä käytännön esimerkein, jotka resonoivat kehittäjien kanssa ympäri maailmaa.

Miksi käyttää aputyyppejä?

Aputyypit ratkaisevat yleisiä tyyppimanipulaation skenaarioita. Hyödyntämällä niitä voit:

• Vähentää toistuvaa koodia: Vältä toistuvien tyyppimäärittelyjen kirjoittamista.
• Parantaa tyyppiturvallisuutta: Varmista, että koodisi noudattaa tyyppirajoituksia.
• Lisätä koodin luettavuutta: Tee tyyppimäärittelyistäsi tiiviimpiä ja helpommin ymmärrettäviä.
• Parantaa ylläpidettävyyttä: Yksinkertaista muutoksia ja vähennä virheiden riskiä.

Keskeiset aputyypit

Partial

Partial muodostaa tyypin, jossa kaikki T:n ominaisuudet ovat valinnaisia. Tämä on erityisen hyödyllistä, kun haluat luoda tyypin osittaisille päivityksille tai konfiguraatio-objekteille.

Esimerkki:

Kuvittele, että rakennat verkkokauppa-alustaa, jolla on asiakkaita eri alueilta. Sinulla on Customer-tyyppi:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

Kun päivität asiakkaan tietoja, et ehkä halua vaatia kaikkia kenttiä. Partial antaa sinun määritellä tyypin, jossa kaikki Customer-tyypin ominaisuudet ovat valinnaisia:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... toteutus asiakkaan päivittämiseksi annetulla ID:llä
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Kelvollinen
updateCustomer("456", { address: { city: "London" } }); // Kelvollinen

Readonly

Readonly muodostaa tyypin, jossa kaikki T:n ominaisuudet ovat vain luku -muotoisia (readonly), estäen niiden muokkaamisen alustuksen jälkeen. Tämä on arvokasta muuttumattomuuden varmistamiseksi.

Esimerkki:

Harkitse globaalin sovelluksesi konfiguraatio-objektia:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Lisätty versio
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

Estääksesi konfiguraation tahattoman muokkaamisen alustuksen jälkeen, voit käyttää Readonly:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Virhe: Ominaisuuteen 'apiUrl' ei voi määrittää arvoa, koska se on vain luku -ominaisuus.

Pick

Pick muodostaa tyypin poimimalla ominaisuuksien joukon K tyypistä T, missä K on merkkijonoliteraalityyppien unioni, joka edustaa ominaisuuksien nimiä, jotka haluat sisällyttää.

Esimerkki:

Oletetaan, että sinulla on Event-rajapinta, jolla on useita ominaisuuksia:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

Jos tarvitset vain ominaisuudet title, location ja startTime tiettyä näyttökomponenttia varten, voit käyttää Pick-tyyppiä:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit

Omit muodostaa tyypin jättämällä pois ominaisuuksien joukon K tyypistä T, missä K on merkkijonoliteraalityyppien unioni, joka edustaa ominaisuuksien nimiä, jotka haluat jättää pois. Tämä on Pick-tyypin vastakohta.

Esimerkki:

Käyttämällä samaa Event-rajapintaa, jos haluat luoda tyypin uusien tapahtumien luomista varten, saatat haluta jättää pois id-ominaisuuden, jonka taustajärjestelmä tyypillisesti generoi:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... toteutus uuden tapahtuman luomiseksi
}

Record

Record muodostaa objektityypin, jonka ominaisuuksien avaimet ovat tyyppiä K ja arvot tyyppiä T. K voi olla merkkijono- tai numeroliteraalityyppien unioni tai symboli. Tämä on täydellinen sanakirjojen tai mappien luomiseen.

Esimerkki:

Kuvittele, että sinun täytyy tallentaa käännöksiä sovelluksesi käyttöliittymää varten. Voit käyttää Record-tyyppiä määrittääksesi käännöksillesi tyypin:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; // Yksinkertaistettu
  return translations[key] || key; // Palautetaan avain, jos käännöstä ei löydy
}

console.log(translate("hello", "en")); // Tuloste: Hello
console.log(translate("hello", "fr")); // Tuloste: Bonjour
console.log(translate("nonexistent", "en")); // Tuloste: nonexistent

Exclude

Exclude muodostaa tyypin poistamalla tyypistä T kaikki unioni-jäsenet, jotka ovat yhteensopivia U:n kanssa. Se on hyödyllinen tiettyjen tyyppien suodattamiseen unionista.

Esimerkki:

Sinulla saattaa olla tyyppi, joka edustaa erilaisia tapahtumatyyppejä:

type EventType = "concert" | "conference" | "workshop" | "webinar";

Jos haluat luoda tyypin, joka sulkee pois 'webinar'-tapahtumat, voit käyttää Exclude-tyyppiä:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent on nyt "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // Virhe: Argumentti tyyppiä '"webinar"' ei ole yhteensopiva parametrin tyypin '"concert" | "conference" | "workshop"' kanssa.

attendPhysicalEvent("concert"); // Kelvollinen

Extract

Extract muodostaa tyypin poimimalla tyypistä T kaikki unioni-jäsenet, jotka ovat yhteensopivia U:n kanssa. Tämä on Exclude-tyypin vastakohta.

Esimerkki:

Käyttämällä samaa EventType-tyyppiä voit poimia webinaaritapahtuman tyypin:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent on nyt "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // Kelvollinen
// attendOnlineEvent("concert"); // Virhe: Argumentti tyyppiä '"concert"' ei ole yhteensopiva parametrin tyypin '"webinar"' kanssa.

NonNullable

NonNullable muodostaa tyypin poistamalla null- ja undefined-arvot tyypistä T.

Esimerkki:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString on nyt string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Virhe: Argumentti tyyppiä 'null' ei ole yhteensopiva parametrin tyypin 'string' kanssa.
// processString(undefined); // Virhe: Argumentti tyyppiä 'undefined' ei ole yhteensopiva parametrin tyypin 'string' kanssa.
processString("hello"); // Kelvollinen

ReturnType

ReturnType muodostaa tyypin, joka koostuu funktion T paluuarvon tyypistä.

Esimerkki:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting on nyt string

const message: Greeting = greet("World");

console.log(message);

Parameters

Parameters muodostaa tuplen tyypin funktion T parametrien tyypeistä.

Esimerkki:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams on nyt [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters

ConstructorParameters muodostaa tuple- tai taulukkotyypin konstruktorifunktion T parametrien tyypeistä. Se päättelee niiden argumenttien tyypit, jotka on annettava luokan konstruktorille.

Esimerkki:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams on nyt [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Tuloste: Hello, World

Required

Required muodostaa tyypin, jossa kaikki T:n ominaisuudet ovat pakollisia. Se tekee kaikista valinnaisista ominaisuuksista pakollisia.

Esimerkki:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile on nyt { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Virhe: Ominaisuus 'age' puuttuu tyypistä '{ name: string; }', mutta on pakollinen tyypissä 'Required'.

Edistyneet aputyypit

Malliliteraalityypit

Malliliteraalityypit mahdollistavat uusien merkkijonoliteraalityyppien luomisen yhdistelemällä olemassa olevia merkkijono-, numeroliteraalityyppejä ja muita. Tämä mahdollistaa tehokkaan merkkijonopohjaisen tyyppimanipulaation.

Esimerkki:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL on nyt "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // Kelvollinen
// makeRequest("INVALID /api/users"); // Virhe

Ehdolliset tyypit

Ehdolliset tyypit mahdollistavat sellaisten tyyppien määrittelyn, jotka riippuvat ehdosta, joka on ilmaistu tyyppisuhteena. Ne käyttävät infer-avainsanaa tyyppitietojen poimimiseen.

Esimerkki:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// Jos T on Promise, tyyppi on U; muuten tyyppi on T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data on nyt number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Pakollinen
  city?: string; // Valinnainen
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Lomakkeen alkuarvot (valinnaiset kentät)
type InitialFormValues = Partial<FormData>;

// Päivitetyt lomakearvot (joitakin kenttiä voi puuttua)
type UpdatedFormValues = Partial<FormData>;

// Pakolliset kentät lähettämistä varten
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Käytä näitä tyyppejä lomakekomponenteissasi
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // VIRHE: 'country' puuttuu 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Muunna API-vastaus luettavampaan muotoon
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// Voit jopa pakottaa tyypin seuraavasti:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // Valinnainen API URL eri ympäristöille
  timeout?: number;  //Valinnainen
}

// Oletusasetukset
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Funktio käyttäjäasetusten yhdistämiseksi oletusasetuksiin
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Käytä yhdistettyjä asetuksia sovelluksessasi
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);