Mga Uri ng Utility sa TypeScript

Ang artikulong ito ay nagpapaliwanag ng mga uri ng utility sa TypeScript.

YouTube Video

Mga Uri ng Utility sa TypeScript

Ang mga uri ng utility ng TypeScript ay mga madaling gamiting kasangkapan para lumikha ng mga bagong uri batay sa mga umiiral na uri. Pinahihintulutan nito ang mas flexible na mga kahulugan ng uri at pinapataas ang kakayahang magamit muli ng code. Dito, ipapaliwanag namin ang mga karaniwang ginagamit na uri ng utility nang detalyado at tatalakayin kung paano gamitin ang bawat isa gamit ang sample na code.

Partial<T>

Ginagawang opsyonal ng Partial<T> ang lahat ng katangian ng isang uri ng object (pinayagang magkaroon ng undefined). Ito ay kapaki-pakinabang kung nais mo lamang gamitin ang ilang mga katangian ng orihinal na uri.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

• Sa halimbawa sa itaas, ang paggamit ng Partial<User> ay ginagawa ang lahat ng katangian ng uri ng User na opsyonal. Samakatuwid, sa function na updateUser, maaari kang magpasa lamang ng isang subset ng mga katangian.

Required<T>

Ginagawang kinakailangan ng Required<T> ang lahat ng katangian, kabilang ang mga opsyonal. Ginagamit ito kapag gusto mong gawing kinakailangan ang mga katangiang opsyonal.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

• Sa pamamagitan ng paggamit ng Required<User>, ang mga katangian tulad ng name at age ay itinuturing na kinakailangan.

Readonly<T>

Ginagawang read-only ng Readonly<T> ang lahat ng katangian ng isang object. Pinipigilan nito ang pagbabago ng mga halaga ng object.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

• Sa pamamagitan ng paggamit ng Readonly<T>, maaari mong protektahan ang mga katangian ng isang object mula sa pagbabago. Ito ay epektibo kung nais mong pigilang maaksidenteng mabago ang data habang nagde-develop.

Record<K, T>

Ang Record<K, T> ay lumilikha ng isang uri ng mapa na may tinukoy na uri ng key at value. Ang K ay ang uri para sa mga susi (gaya ng string o number), at ang T ay ang uri para sa mga halaga.

 1type Roles = "admin" | "user" | "guest";
 2interface ReadWritePermissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, ReadWritePermissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

• Ang Record<K, T> ay kapaki-pakinabang kapag gusto mong tukuyin ang mga pares ng key-value. Sa halimbawa sa itaas, ang mga pahintulot ay tinukoy batay sa mga papel ng gumagamit.

Pick<T, K>

Pinipili lamang ng Pick<T, K> ang mga tinukoy na katangian mula sa isang uri ng object. Maaari kang lumikha ng bagong uri sa pamamagitan ng pagpili lamang ng mga kinakailangang katangian.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

• Sa pamamagitan ng paggamit ng Pick<T, K>, maaari kang pumili ng tiyak na mga katangian mula sa isang uri ng object at ituring ang mga ito bilang isang bagong uri. Halimbawa, ang id at name lamang ang pinili sa halimbawa sa itaas.

Omit<T, K>

Omit<T, K> ay nag-aalis ng mga tinukoy na property mula sa isang uri ng object. Ito ang kabaligtaran ng operasyon ng Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

• Sa paggamit ng Omit<T, K>, makakalikha ka ng bagong uri sa pamamagitan ng pag-aalis ng mga tinukoy na property. Sa halimbawa sa itaas, ang property na email ay tinanggal.

Exclude<T, U>

Exclude<T, U> ay lumilikha ng bagong uri sa pamamagitan ng pag-aalis ng uri na U mula sa union type na T. Ginagamit ito kapag nais mong alisin ang isang partikular na uri.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const userStatus: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(userStatus);

• Sa paggamit ng Exclude<T, U>, maaari mong alisin ang mga hindi kinakailangang uri sa loob ng isang union type. Sa halimbawa sa itaas, dahil ang "pending" ay tinanggal, tanging "active" o "inactive" lamang ang maaaring mapili.

Extract<T, U>

Extract<T, U> ay kumukuha ng mga bahaging tumutugma sa uri na U sa loob ng union type na T. Kapaki-pakinabang ito kapag nais mong kunin lamang ang isang partikular na uri.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const userStatus: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(userStatus);

• Extract<T, U> ay gumaganap ng kabaligtaran sa operasyon ng Exclude. Sa halimbawa sa itaas, tanging "active" at "pending" lamang ang maaaring mapili.

NonNullable<T>

NonNullable<T> ay lumilikha ng isang uri na inaalis ang null at undefined. Kapaki-pakinabang ito kapag nais mong alisin ang mga halagang ito mula sa mga optional na uri.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const userName: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(userName);

• Tinatanggal ng NonNullable<T> ang null at undefined, tinitiyak na mayroong value.

Konklusyon

Ang utility types sa TypeScript ay makapangyarihang mga kasangkapan upang gawing mas maikli at flexible ang mga kahulugan ng uri. Ang pag-unawa at tamang paggamit ng mga pangunahing utility types tulad ng Partial, Required, Readonly, Record, at iba pa, ay maaaring magpahusay sa reusability at maintainability ng code. Ang pag-master ng mga uri na ito ay nagbibigay-daan sa mas matatag at ligtas na mga kahulugan ng uri, na nagiging sanhi ng mas mahusay na pag-develop.

Ang keyof Operator ng TypeScript

Ang keyof operator ng TypeScript ay ginagamit upang makuha ang lahat ng mga pangalan ng property ng isang uri ng object. Gamit ang operator na ito, maaari mong makuha ang mga key ng isang uri ng object bilang isang union type. Napakakagamit nito para sa pagsusulat ng type-safe na code.

Pangunahing Paggamit

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

Halimbawa ng Paggamit

Paggamit nito sa mga Argumento ng Function

Maaari mong gamitin ang keyof upang magtakda ng isang function na may mga uri batay sa partikular na mga katangian ng isang object.

 1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
 2    return obj[key];
 3}
 4
 5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
 6const userName = getProperty(person, "name"); // type is string
 7const age = getProperty(person, "age");   // type is number
 8
 9console.log("Name:", userName);
10console.log("Age:", age);

• Hinahanap ng function na ito ang isang property mula sa isang object sa isang type-safe na paraan batay sa tinukoy na key.

Pagpapahusay sa Mga Limitasyon ng Uri

Sa pamamagitan ng paggamit ng keyof, maaari mong matiyak na ang mga key na ipinapasa sa isang function ay nava-validate sa oras ng pag-compile.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

• Ipinapakita ng code na ito na ang pagtukoy ng hindi umiiral na property name ay magdudulot ng compile-time error.

Buod

• Ang keyof operator ay ginagamit upang makuha ang lahat ng pangalan ng katangian ng isang uri ng object.
• Maaari mong makuha ang mga pangalan ng katangian bilang isang union type, na nag-aabot ng type-safe na code.
• Sa paggamit nito sa mga argumento ng function, maaari mong limitahan ang function na tumanggap lamang ng mga wastong pangalan ng katangian.

Sa ganitong paraan, pinapahusay ng keyof operator ang type safety sa TypeScript at tinutulungan kang magsulat ng mas maaasahang code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video