Simbol Unik: Cara Menggunakan Simbol untuk Keselamatan Jenis

Jika anda telah meluangkan sedikit masa bekerja dengan React, anda mungkin terjumpa fungsi queryOptions() React Query. Pelaksanaannya kelihatan sangat mudah:

export function queryOptions(options: unknown) {
  return options
}

Namun, keajaiban sebenar terletak pada tandatangan fungsinya yang berlebihan. Jadi, apa yang istimewanya?

Jika anda tidak pasti apa itu fungsi terlampau beban, anda boleh menyemak siaran ini: Fungsi Lebih Muatan: Cara Mengendalikan Tandatangan Berbilang Fungsi

Pertanyaan Pangkalan Data ditaip

Diilhamkan oleh pendekatan React Query, saya menyusun fungsi pembantu yang mungkin berguna untuk orang yang bekerja di luar React: cara mudah untuk membuat pertanyaan ditaip, contohnya, pertanyaan SQL.

export declare const queryParamsSymbol: unique symbol;
export declare const queryReturnSymbol: unique symbol;

export type Query<
  TParams extends Record<string, any> = Record<string, any>,
  TReturn extends Record<string, any> | undefined = undefined,
  TStatement extends string = string,
> = {
  statement: TStatement;
  [queryParamsSymbol]: TParams;
  [queryReturnSymbol]: TReturn;
};

export function query<
  TParams extends Record<string, any> = Record<string, any>,
  TReturn extends Record<string, any> | undefined = undefined,
  TStatement extends string = string,
>(statement: TStatement): Query<TParams, TReturn> {
  return { statement: statement } as Query<TParams, TReturn, TStatement>;
}

Serupa dengan queryOptions(), fungsi itu sendiri agak membosankan: ia memerlukan pernyataan SQL, membungkusnya dalam objek jenis Query dan mengembalikannya.

Berikut ialah contoh ringkas cara anda memanggilnya:

const getUserById = query<{ id: number }, { name: string; email: string }>(
  'SELECT name, email FROM users WHERE id = $id',
);

Perhatikan cara kami melepasi dua jenis sebagai parameter generik. Yang pertama ialah parameter pertanyaan yang diperlukan — dalam kes ini, id. Yang kedua mewakili jenis pemulangan pertanyaan — nama dan e-mel.

Di bawah tudung, query() membenamkan dua jenis tersebut ke dalam objek yang dikembalikan, menyimpannya dalam queryParamsSymbol dan queryReturnSymbol. Simbol ini diisytiharkan sebagai simbol unik, yang bermaksud ia hanya wujud dalam ruang jenis dan tidak muncul dalam JavaScript yang ditranspilkan.

Saya menggunakan simbol ini untuk menyimpan sementara parameter dan jenis pengembalian serta mendapatkannya apabila saya memerlukannya.

type InferQueryParams<TQuery> = TQuery extends Query<infer Params, any> ? Params : never;

type UserQueryParams = InferQueryParams<typeof getUserById>;
//        ^? { id: number }

type InferQueryReturn<TQuery> = TQuery extends Query<any, infer Return> ? Return : never;

type UserQueryReturn = InferQueryReturn<typeof getUserById>;
//        ^? { name: string; email: string }

InferQueryParams dan InferQueryReturn hanyalah jenis utiliti untuk mengesahkan bahawa parameter dan jenis pulangan kami disimpulkan dengan betul. Anda mungkin sebenarnya tidak memerlukannya, tetapi ia berguna untuk mengesahkan pendekatan kami.

Pelanggan Pangkalan Data

Sekarang kita tahu cara membenamkan parameter dan mengembalikan jenis dalam objek pertanyaan, bagaimana sebenarnya kita menjalankan pertanyaan ini? Mari kita lihat klien pangkalan data ringkas yang boleh melaksanakan pertanyaan yang ditaip kami:

class DatabaseClient {
  async execute<
    TParams extends Record<string, any>, 
    TReturn extends Record<string, any>
  >(
    query: Query<TParams, TReturn>,
    params: TParams,
  ): Promise<Array<TReturn>> {
    // execute the query and return the results
    // ...
    return [];
  }
}

const db = new DatabaseClient();

// Return type and parameters are inferred from the query object
const result = await db.execute(getUserById, { id: 1 });
//                                              ^? { id: number }
//      ^? Array<{ name: string; email: string }>
console.log(result);

Dalam contoh ini, kami menghantar objek pertanyaan getUserById kami yang ditaip kepada kaedah db.execute(). Oleh kerana jenis Pertanyaan mengandungi kedua-dua parameter dan maklumat jenis pulangan, TypeScript menyimpulkannya secara automatik. Kami boleh mengesahkan ini dengan mudah dengan menuding pada hasil dan TypeScript juga akan mencadangkan id sebagai harta objek parameter kami.

Taman Permainan TypeScript

Anda boleh mendapatkan contoh kod lengkap dalam TypeScript Playground ini.

Atas ialah kandungan terperinci Simbol Unik: Cara Menggunakan Simbol untuk Keselamatan Jenis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!