Opsyonal na Chaining sa TypeScript
Sa artikulong ito, ipapaliwanag namin ang tungkol sa Opsyonal na Chaining sa TypeScript.
YouTube Video
Opsyonal na Chaining sa TypeScript
Ang opsyonal na chaining sa TypeScript ay isang kapaki-pakinabang na tampok para ma-access ang mga katangian ng malalim na nested na mga object o array. Ang tampok na ito ay pumipigil sa mga error kapag ina-access ang mga hindi umiiral na katangian, na nagbibigay-daan sa iyong magsulat ng maikli at nababasang code.
Ano ang Opsyonal na Chaining?
Ang opsyonal na chaining operator (?.) ay nagbabalik ng undefined kapag ina-access ang isang katangian o pamamaraan ng object na hindi umiiral. Pinapayagan nito ang code na magpatuloy sa pagtakbo nang hindi nagbubunga ng error kung ang katangian ay hindi umiiral.
Halimbawa, kapag ina-access ang mga katangian ng isang nested na object tulad ng ipinapakita sa ibaba, nagkakaroon ng error kung ang katangian ay hindi umiiral gamit ang karaniwang paraan.
Halimbawa
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- Sa kasong ito, magkakaroon ng error kung hindi umiiral ang
address. Ang opsyonal na chaining ay maaaring gamitin upang maiwasan ito.
Halimbawa ng paggamit ng optional chaining
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- Gamit ang opsyonal na chaining, maiiwasan ang mga error at magbabalik ito ng
undefinedsa halip kapag ang mga katangian ay hindi umiiral.
Paano Gamitin ang Opsyonal na Chaining
Ang opsyonal na chaining ay maaaring gamitin sa iba't ibang mga sitwasyon, gaya ng pag-access sa katangian, pagtawag ng mga function, at pag-access sa array. Ipapaliwanag namin kung paano gamitin ang bawat isa sa mga ito.
Pag-access sa Mga Katangian
Maaari mong ligtas na ma-access ang mga nested na katangian ng mga object.
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
Gumagamit ang code na ito ng optional chaining upang ma-access lamang ang mga property na city at country kung umiiral ang location property sa company object.
Pagtawag sa Function
Ang opsyonal na chaining ay maaari ring suriin ang pag-iral ng isang function bago ito tawagin.
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
Gumagamit ang code na ito ng optional chaining upang ligtas na matawag ang function na greet kung umiiral lamang ito. Walang error na magaganap kahit hindi naka-define ang function.
Pag-access sa Array
Ang opsyonal na chaining ay maaaring ilapat sa mga array upang suriin kung ang mga elemento ay umiiral.
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
Ina-access ng code na ito ang mga elemento ng array kung umiiral lamang ang team.members, ibinabalik ang halaga para sa mga umiiral na index at undefined para sa mga hindi umiiral.
Optional Chaining at ang Nullish Coalescing Operator
Ang opsyonal na chaining ay nagbabalik ng undefined, ngunit kung minsan ay hindi ito sapat. Sa kasong ito, ang nullish coalescing operator (??), na ipinakilala sa TypeScript 3.7, ay maaaring gamitin upang magbigay ng default na halaga kapag null o undefined ang isang value.
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
Kapag pinagsama sa optional chaining, maaari kang sumulat ng mas flexible na code.
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Mga Paalala Kapag Ginagamit ang Optional Chaining
Kapag gumagamit ng optional chaining, mahalagang tandaan ang mga sumusunod na punto:.
-
Hindi kailangang paggamit ng optional chaining
- Ang paggamit ng optional chaining sa mga property o method na tiyak na umiiral ay maaaring magpahaba sa code mo ng hindi kailangan. Pinakamabuting gamitin lamang ito kapag hindi tiyak kung umiiral ang ina-access na target.
-
Mga typographical error
- Ang labis na paggamit ng optional chaining ay maaaring magpahirap makita ang mga typographical error na nagdudulot ng pag-access sa hindi intensyonadong mga property. Magpatupad ng wastong pagsusuri ng uri at gamitin ito nang maingat.
Buod ng code
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
Buod
Ang optional chaining sa TypeScript ay nagbibigay ng maikli ngunit malinaw na code habang iniiwasan ang mga error sa pag-access ng mga malalim na nakapangilalim na object o array. Bukod dito, kapag pinagsama sa nullish coalescing operator, maaari kang magtakda ng default na halaga at makalikha ng mas flexible na logic. Kapag ginamit nang maayos, maaari nitong lubos na mapabuti ang kaligtasan at pagbabasa ng code.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.