Articles
Panimula sa TypeScript
Mga Pangunahing Kaalaman sa TypeScript

Mga Pangunahing Kaalaman sa TypeScript

Ipinaliliwanag ng artikulong ito ang mga pangunahing kaalaman sa TypeScript.

YouTube Video

Pagsasagawa ng "Hello World!"

Una, tatakbuhin natin ang klasikong halimbawa ng "Hello World!" sa TypeScript gamit ang Visual Studio Code.

npm install -g typescript

I-install ang typescript gamit ang utos na npm.

Lumikha ng isang file na tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Lumikha ng isang .vscode/launch.json na file para paganahin ang pagpapatakbo ng main.ts file sa Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Lumikha ng isang file na main.ts na nagpapakita ng "Hello World!". Maaari mong patakbuhin ito sa Visual Studio Code sa pamamagitan ng pagpindot sa F5 key.

1console.log("Hello World!");

Sa pamamagitan ng pagsasaayos sa ganitong paraan, maaari mong i-execute ang mga TypeScript file sa loob ng VSCode.

Pangkalahatang-ideya ng TypeScript

Ang TypeScript (TS) ay isang superset ng JavaScript na binuo ng Microsoft. Sinusuportahan ng TypeScript ang static typing, na nagpo-promote ng mas matatag at ma-maintain na code.

Static Typing

  • Nagdadagdag ang TypeScript ng mga uri sa JavaScript at nagsasagawa ng type checking sa oras ng pag-compile. Ito ay nagbibigay-daan upang maiwasan nang maaga ang mga error na may kaugnayan sa uri.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilasyon

  • Dahil hindi maaaring direktang patakbuhin ang TypeScript sa isang browser, kailangang ma-transpile (ma-compile) ito sa JavaScript. Gamitin ang tsc (TypeScript Compiler) upang i-convert ang mga TS file sa mga JS file.

Opsyonal na Type Annotations

  • Ang TypeScript ay gumagawa rin ng type inference ngunit pinapayagan kang tahasang tukuyin ang mga uri kung kinakailangan. Pinapahusay nito ang readability at reliability ng code.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • Nagbibigay ang TypeScript ng interface upang tukuyin ang hugis ng mga object. Ito ay nagbibigay-daan para sa mahigpit na pamamahala ng istruktura ng mga object.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Mga Klase

  • Nagbibigay ang TypeScript ng mga karagdagan sa syntax ng klase ng JavaScript at sumusuporta sa inheritance, mga access modifier (public, private, protected), at mga abstract na klase.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Mga Generic

  • Sa TypeScript, maaari kang magsulat ng reusable at ligtas na code gamit ang mga generic.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosistema

  • Ganap na compatible ang TypeScript sa ekosistema ng JavaScript at maaaring gamitin ang umiiral na code ng JavaScript nang hindi ito binabago. Bukod dito, ito ay isinama sa mga sikat na library tulad ng React at Node.js.

Makapangyarihang Mga Tool para sa Developer

  • Nag-aalok ang TypeScript ng mga advanced na tampok tulad ng autocomplete, suporta sa refactoring, at pagsusuri ng error sa mga editor tulad ng VSCode.

Ang TypeScript ay partikular na kapaki-pakinabang para sa pagpapahusay ng pagiging maaasahan at pagtaas ng produktibidad ng developer sa malalaking proyekto.

Mga Variable sa TypeScript

Ipinaliwanag dito ang mga pangunahing konsepto at paggamit ng mga variable sa TypeScript.

Deklarasyon ng Variable

Sa TypeScript, ang mga variable ay idinedeklara gamit ang tatlong keyword: let, const, at var. Ang bawat keyword ay mayroong iba't ibang katangian.

Halimbawa ng let:

let ay may block scope (balido lamang sa loob ng mga kulot na braces {}). Ang mga halaga ay maaaring muling italaga sa ibang pagkakataon.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Halimbawa ng const:

Ang const ay hindi maaaring muling italaga, kaya't ang halaga na itinalaga nang isang beses ay hindi maaaring baguhin. Gayunpaman, ang nilalaman ng mga object at array ay maaaring mabago.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Halimbawa ng var:

Ang var ay may function scope at maaaring muling italaga. Gayunpaman, sa hindi pagsunod sa block scope, maaari itong magdulot ng hindi inaasahang asal kumpara sa let o const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Mga Anotasyon ng Uri

Sa TypeScript, maaari mong tahasang ilagay ang mga anotasyon ng uri para sa mga variable. Sinusuportahan din ang pagpapahiwatig ng uri, ngunit ang mga anotasyon ng uri ay kapaki-pakinabang sa mga kumplikadong sitwasyon.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Mga Variable na Hindi Na-initialize

Kung ang isang variable ay ideklara nang walang initialization, undefined ang itinalaga sa default. Ang isang variable na ideklara gamit ang let ay dapat tahasang italaga bilang undefined o isama ang undefined sa uri nito kung hindi ito ma-initialize.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Saklaw ng Variable

Ang let at const ay may saklaw na block, kaya valid lamang sila sa loob ng parehong block.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Pag-aangat ng Variable

Dahil ang TypeScript ay isang superset ng JavaScript, minamana nito ang tampok na hoisting ng JavaScript. Ang Hoisting ay tumutukoy sa pag-uugali kung saan ang mga deklarasyon ng variable at function ay itinuturing na parang inaangat sa itaas ng kanilang saklaw. Gayunpaman, ang deklarasyon lamang ang inaangat, habang nananatili sa lugar ang inisyal na halaga. Ang mga variable na idineklara gamit ang var ay inaangat, ngunit ang paggamit ng let o const bago ang deklarasyon ay nagreresulta sa isang error.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Sa kasong ito, ang mga variable na idineklara gamit ang var ay inaangat, at ang kanilang mga halaga ay inilalabas.
1console.log(b); // ReferenceError
2let b = 20;
  • Ang mga variable na idineklara gamit ang let ay hindi inaangat, kaya nagreresulta ito sa isang error.

Buod

Ang sumusunod ay isang buod ng let, const, at var.

  • let ay maaaring muling i-assign at may block scope.
  • const ay hindi maaaring muling i-assign at may block scope.
  • var ay maaaring muling i-assign at may function scope.
  • Lahat ng mga ito ay pinapayagan ang tiyak na anotasyon ng uri para sa pagtukoy ng mga uri ng variable.

Mga Escape Character sa TypeScript

Ang mga escape character ay ginagamit kapag ang mga partikular na karakter ay hindi maipasok nang direkta o upang kumatawan sa mga karakter na may espesyal na kahulugan sa loob ng isang string. Sa TypeScript, ang mga escape character ay ginagamit upang kumatawan sa mga kontrol na karakter o mga espesyal na karakter.

Halimbawa, gamitin ang \n upang maglabas ng mensahe na may kasamang bagong linya.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Pag-escape ng mga Espesyal na Karakter

Ang mga escape character ay kapaki-pakinabang din kapag nagsasama ng mga espesyal na karakter sa isang string. Halimbawa, maaaring gusto mong gumamit ng dobleng panipi o solong panipi nang direkta sa loob ng isang string.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Pag-escape ng Mismong Backslash

Upang isama ang isang backslash sa isang string, kailangan mo itong isulat bilang dobleng backslash.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Mga Unicode at Hexadecimal na Escape

Sa TypeScript, ang mga Unicode code point ay maaaring i-represent gamit ang mga escape sequence.

Unicode na Escape Sequence

Maaari mong i-represent ang mga Unicode character sa pamamagitan ng pagtukoy ng apat na digit na hexadecimal na numero pagkatapos ng \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Hexadecimal na Escape

Maaari mong i-represent ang mga partikular na karakter gamit ang dalawang digit na hexadecimal na numero pagkatapos ng \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template Literal at ang mga Escape

Ang mga template literal ay tinutukoy sa pamamagitan ng paglalagay nito sa loob ng backticks at nagbibigay ng madaling paraan upang lumikha ng nakapaloob na mga expression o multi-line na mga string. Ang mga karaniwang escape character ay maaaring direktang gamitin sa mga template literal.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Mga Espesyal na Kaso

Sa TypeScript, ang paggamit ng mga hindi wastong escape sequence sa loob ng isang string ay maaaring magresulta sa syntax error. Samakatuwid, mahalagang suriin kung ang mga escape character ay wasto.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Mga Praktikal na Halimbawa ng Paggamit

Narito ang isang halimbawa ng pagbuo ng isang komplikadong string gamit ang mga escape character.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

Sa halimbawang ito, ang \n ay ginagamit para sa bagong linya at ang \t ay ginagamit upang magdagdag ng indentation. Ginagawa nitong mas madaling basahin ang JSON structure.

Buod

Napakahalaga ng mga escape character kapag nagtatrabaho sa mga string sa TypeScript. Kapag nais mong isama ang mga espesyal na character o mga control character sa isang string, maaari kang gumawa ng mga makabuluhang string gamit ang tamang mga escape sequence. Ang pag-unawa at wastong paggamit ng mga escape character ay makakatulong upang mapabuti ang readability at maintainability ng code.

Mga Bersyon ng TypeScript

Tingnan natin ang pangkalahatang-ideya ng bersyon ng TypeScript dito.

  1. TypeScript 1.0 (2014)

    Ang unang matatag na bersyon ng TypeScript. Ang mga pangunahing tampok tulad ng typing, classes, at modules ay ipinakilala.

  2. TypeScript 2.0 (2016)

    Ang Non-nullable Types, Control Flow Analysis, Read-only Properties, at uring Never ay ipinakilala, na nagpapahusay sa pagpapahiwatig ng uri.

  3. TypeScript 3.0 (2018)

    Isang mas flexible na sistema ng uri ang ipinakilala, na may mga tampok tulad ng Project References, mga pagpapalawak ng Tuple Types, at mga pagpapabuti sa Rest Parameters.

  4. TypeScript 4.0 (2020)

    Ang mga tampok tulad ng Variadic Tuple Types, mga pagpapabuti sa editor, pinalawak na pagpapahiwatig ng uri, at Labelled Tuple Elements ay idinagdag upang mapabuti ang karanasan sa paggawa ng programa.

  5. TypeScript 4.1 (2020)

    Ang Template Literal Types ay ipinakilala, na ginagawang mas makapangyarihan ang pagmamanipula ng uri ng string.

  6. TypeScript 4.3 (2021)

    Ang pagdaragdag ng keyword na Override, mga pagpapabuti sa mga access modifier sa loob ng mga constructor, at pinahusay na suporta para sa mga uri sa WeakMap at WeakSet.

  7. TypeScript 4.5 (2021)

    Idinagdag ang uri na Awaited, ModuleSuffixes, at pinahusay na pagiging tugma sa mga ECMAScript module.

  8. TypeScript 5.0 (2023)

    Nagawa ang standardisasyon ng Decorators, pagpapabuti sa bilis ng pagbuo ng proyekto, pagpapahusay ng system ng mga uri, at suporta para sa mga pinakabagong tampok ng ECMAScript.

Ang TypeScript ay patuloy na umuunlad, na may maraming bersyon na inilalabas bawat taon na nagpapakilala ng mga bagong tampok at pagpapabuti.

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

Mga Uri ng Data sa TypeScript