Mga Function sa TypeScript

Ipinaliwanag ng artikulong ito ang mga function sa TypeScript.

YouTube Video

Mga Function sa TypeScript

Ang mga function sa TypeScript ay mga function ng JavaScript na may karagdagang type annotations. Sa TypeScript, maaari kang magsulat ng mas matatag na code sa pamamagitan ng malinaw na pagtukoy ng mga uri ng input (mga parameter) at output (mga return value) para sa mga function. Sa ibaba, ipinakikilala namin ang mga pangunahing pamamaraan sa pagde-define ng mga function at ilang katangian ng mga function sa TypeScript.

Pangunahing Depinisyon ng Function

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• Ang function na add ay tumatanggap ng dalawang argumento na may uri na number at nagpapabalik ng halaga na uri rin ng number.
• Ito ay tumatanggap ng dalawang argumento, x at y, na pareho ang uri na number, at malinaw na tinukoy ang mga uri nila.
• Ang uri ng ibinabalik ay tinukoy rin bilang : number.

Mga Anonymous Function (Mga Function Expression)

Maaaring gumamit ng mga anonymous function at function expression sa TypeScript. Maaaring lagyan ng annotation ang uri sa parehong paraan.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Maaari kang magtalaga ng isang anonymous na function sa isang variable at tawagin ito sa ibang pagkakataon.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Maaari kang gumamit ng named function expression upang maging posible ang recursive na pagtawag.

Mga Arrow Function

Maaaring gumamit din ng type annotations sa mga arrow function.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Ang code na ito ay nagde-define ng arrow function na subtract na may type annotations na tumatanggap ng dalawang number bilang argumento at ibinabalik ang kanilang diperensya.

Opsyonal at Default na Mga Parameter

Maaaring gawing opsyonal o magtakda ng default na mga halaga para sa mga parameter.

Opsyonal na Mga Parameter

Ang pagdaragdag ng ? pagkatapos ng pangalan ng parameter ay ginagawang opsyonal ito.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Ang code na ito ay tumatanggap ng optional na argumento; kung ang argumento ay ibinigay, bumabati ito gamit ang pangalan, kung hindi naman ay nagbabalik ng pangkalahatang pagbati.

Default na Mga Parameter

Maaari kang magtakda ng default na mga halaga para sa mga parameter.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Ang function na ito ay gumagamit ng "Guest" bilang default na halaga kung walang ibinigay na argumento, at bumabati gamit ang tinukoy o default na pangalan.

Pagde-define ng Uri ng Function

Maaari ring tukuyin ang uri mismo ng function. Halimbawa, ginagamit ito kapag nagpapasa ng function bilang argumento.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Ang code na ito ay nagde-define ng function type na Operation na tumatanggap ng dalawang number at nagpapabalik ng number, pagkatapos ay ginagamit ito upang gumawa at magpatakbo ng mga addition at multiplication na function.

Kapag Walang Return Value (void na uri)

Para sa mga function na walang return value, tukuyin ang uri na void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Ang code na ito ay nagde-define ng void na function na logMessage na tumatanggap ng string na mensahe at iniimprenta ito sa console nang hindi nagbabalik ng anumang halaga.

Callback Function

Ang pagpasa ng isang function bilang argumento sa ibang function at pagpapaganap nito sa ibang pagkakataon ay tinatawag na callback function. Madalas itong ginagamit sa asynchronous na pagproseso at paghawak ng mga event.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

Sa halimbawang ito, isang function na naglalabas ng value sa console ang ipinapasa bilang callback function.

Bilang alternatibo, maaari kang magtakda ng callback type gamit ang type o interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Ang pagtakda ng callback type gamit ang type o interface ay nagpapabuti ng reusability.

Pag-ooverload ng Function

Ang function overloading ay nagbibigay-daan sa iyo na magtakda ng mga function na may parehong pangalan ngunit magkaibang listahan ng mga parameter. Sa TypeScript, maaari kang magtakda ng maraming function na may parehong pangalan at magsagawa ng iba't ibang operasyon base sa mga uri at bilang ng mga parameter.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

Sa TypeScript, ang pag-ooverload ay nakakamit sa ganitong paraan:.

• Overload na Lagda

  • Tinutukoy kung paano maaaring gamitin ang function (ang lagda nito). Sa pamamagitan ng pagsusulat nito nang maraming beses, nagiging posible ang pag-ooverload.

• Lagda ng Implementasyon

  • Ipinatutupad ang aktwal na katawan ng function. Ang bahaging ito ay tinutukoy nang isang beses lamang at pinangangasiwaan ang lahat ng kaso na idineklara sa mga overload na lagda.

Mga Panuntunan sa Pag-ooverload

Ang sumusunod na mga panuntunan ay nalalapat sa pag-ooverload ng function:.

• Pagkakasunud-sunod ng mga Kahulugan ng Overload na Lagda

  • Dahil ang pagsusuri ay nagaganap mula itaas pababa, inirerekumenda na tukuyin muna ang mga partikular na uri, kasunod ang mas generic na uri.

• Pagkakatugma ng Lagda ng Implementasyon

  • Ang lagda ng implementasyon ay dapat na tugma sa mga argumento at mga halagang ibinabalik ng lahat ng overload na lagda.

• Tukuyin ang Mga Detalye sa Overload na Mga Lagda

  • Ang lagda ng implementasyon ay kadalasang nagiging malabo, kaya't ang mga detalye ay dapat tukuyin sa overload na mga lagda.
  • Kung tanging lagda ng implementasyon lamang ang itinakda, ang pananabik na uri para sa gawain ay magiging hindi sapat.

Buod

Ang mga function sa TypeScript ay may mga sumusunod na katangian.

• Mga Uri ng Anotasyon
  • Sa pamamagitan ng pagtukoy ng mga uri para sa mga argumento at mga return value, makakagawa ka ng mas ligtas na code.
• Mga Anonymous na Function at Arrow Function
  • Maari silang gamitin katulad ng sa JavaScript, at ang pagdaragdag ng mga type annotation ay nagpapabuti ng kaligtasan ng uri.
• Opsyonal at Default na mga Parameter
  • Maari mong gawing mas flexible ang pagtukoy ng mga argumento depende sa pangangailangan.
• Pagpapakahulugan ng Uri ng Function
  • Tukuyin ang uri ng mismong function upang magsagawa ng pagsuri ng uri.
• Function Overloading
  • Maari mong suportahan ang iba't ibang mga argumento gamit ang parehong pangalan ng function.

Sa pamamagitan ng paggamit ng mga ito, maaari kang magsulat ng mas malinaw at mas matatag na code sa TypeScript.

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