Articles
Giới thiệu về TypeScript
Các kiến thức cơ bản về TypeScript

Các kiến thức cơ bản về TypeScript

Bài viết này giải thích các kiến thức cơ bản về TypeScript.

YouTube Video

Thực thi "Hello World!"

Đầu tiên, chúng ta sẽ chạy ví dụ kinh điển "Hello World!" trong TypeScript bằng Visual Studio Code.

npm install -g typescript

Cài đặt typescript bằng lệnh npm.

Tạo tệp tsconfig.json.

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

Tạo tệp .vscode/launch.json để cho phép chạy tệp main.ts trong 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}

Tạo tệp main.ts hiển thị "Hello World!". Bạn có thể chạy nó trong Visual Studio Code bằng cách nhấn phím F5.

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

Bằng cách cấu hình theo cách này, bạn có thể thực thi các tệp TypeScript trong VSCode.

Tổng quan về TypeScript

TypeScript (TS) là một siêu tập của JavaScript được phát triển bởi Microsoft. TypeScript hỗ trợ kiểu tĩnh, cho phép tạo mã nguồn mạnh mẽ và dễ bảo trì hơn.

Kiểu Tĩnh

  • TypeScript thêm kiểu dữ liệu vào JavaScript và kiểm tra kiểu dữ liệu tại thời điểm biên dịch. Điều này giúp ngăn chặn các lỗi liên quan đến kiểu dữ liệu từ trước.
1let message: string = "Hello, TypeScript";
2console.log(message);

Quá trình Biên dịch

  • Vì TypeScript không thể thực thi trực tiếp trên trình duyệt, nó cần được chuyển đổi (biên dịch) sang JavaScript. Sử dụng tsc (Trình biên dịch TypeScript) để chuyển đổi tệp TS sang tệp JS.

Ghi chú Kiểu Dữ liệu Tùy chọn

  • TypeScript cũng thực hiện suy luận kiểu dữ liệu nhưng cho phép bạn chỉ định kiểu dữ liệu rõ ràng khi cần. Điều này cải thiện khả năng đọc và độ tin cậy của mã nguồn.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Giao diện (Interfaces)

  • TypeScript cung cấp interface để định nghĩa cấu trúc của các đối tượng. Điều này cho phép quản lý chặt chẽ cấu trúc của đối tượng.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Các lớp

  • TypeScript cung cấp các mở rộng cho cú pháp lớp của JavaScript và hỗ trợ kế thừa, các bộ điều chỉnh truy cập (public, private, protected) và các lớp trừu tượng.
 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();

Tổng quát

  • Trong TypeScript, bạn có thể viết mã tái sử dụng và an toàn về kiểu dữ liệu bằng cách sử dụng tổng quát.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Hệ sinh thái

  • TypeScript hoàn toàn tương thích với hệ sinh thái JavaScript và có thể sử dụng mã JavaScript hiện có mà không cần thay đổi. Hơn nữa, nó được tích hợp với các thư viện phổ biến như React và Node.js.

Công cụ phát triển mạnh mẽ

  • TypeScript cung cấp các tính năng nâng cao như tự động hoàn thành, hỗ trợ tái cấu trúc, và kiểm tra lỗi trong các trình chỉnh sửa như VSCode.

TypeScript đặc biệt hữu ích trong việc nâng cao độ tin cậy và tăng năng suất cho nhà phát triển trong các dự án lớn.

Các biến trong TypeScript

Điều này giải thích các khái niệm cơ bản và cách sử dụng các biến trong TypeScript.

Khai báo biến

Trong TypeScript, các biến được khai báo bằng ba từ khóa: let, const, và var. Mỗi từ khóa có các đặc điểm khác nhau.

Ví dụ về let:

let có phạm vi khối (chỉ hợp lệ trong dấu ngoặc nhọn {}). Giá trị có thể được gán lại sau.

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

Ví dụ về const:

const không thể được gán lại, vì vậy giá trị được gán một lần sẽ không thể thay đổi. Tuy nhiên, nội dung của các đối tượng và mảng có thể được thay đổi.

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"]

Ví dụ về var:

var có phạm vi hàm và có thể được gán lại. Tuy nhiên, bỏ qua phạm vi khối, nó có thể gây ra hành vi không mong đợi so với let hoặc 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!"

Chú thích kiểu dữ liệu

Trong TypeScript, bạn có thể chú thích rõ ràng kiểu dữ liệu cho các biến. TypeScript cũng hỗ trợ suy luận kiểu, nhưng chú thích kiểu rất hữu ích trong các tình huống phức tạp.

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

Các biến chưa khởi tạo

Nếu một biến được khai báo mà không được khởi tạo, undefined sẽ được gán mặc định. Một biến được khai báo với let phải được gán rõ ràng là undefined hoặc bao gồm undefined trong kiểu của nó nếu không được khởi tạo.

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

Phạm vi biến

let và const có phạm vi khối, vì vậy chúng chỉ có hiệu lực trong cùng một khối.

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

Hiện tượng Hoisting Biến

Vì TypeScript là một siêu tập của JavaScript, nó kế thừa đặc điểm hoisting của JavaScript. Hoisting đề cập đến hành vi mà các khai báo biến và hàm được xử lý như thể chúng được nâng lên đầu phạm vi của chúng. Tuy nhiên, chỉ có khai báo được hoisting, trong khi việc gán giá trị ban đầu vẫn giữ nguyên tại chỗ. Các biến khai báo với var được hoisting, nhưng việc sử dụng let hoặc const trước khi khai báo sẽ dẫn đến lỗi.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Trong trường hợp này, các biến khai báo với var được hoisting và giá trị của chúng được xuất ra.
1console.log(b); // ReferenceError
2let b = 20;
  • Các biến khai báo bằng let không được hoisting, dẫn đến lỗi.

Tóm tắt

Dưới đây là tóm tắt về let, const và var.

  • let có thể được gán lại và có phạm vi khối.
  • const không thể được gán lại và có phạm vi khối.
  • var có thể được gán lại và có phạm vi hàm.
  • Tất cả đều cho phép chú thích kiểu rõ ràng để chỉ định loại biến.

Ký tự thoát trong TypeScript

Ký tự thoát được sử dụng khi các ký tự cụ thể không thể được nhập trực tiếp hoặc để đại diện cho các ký tự có ý nghĩa đặc biệt trong một chuỗi. Trong TypeScript, ký tự thoát được sử dụng để đại diện cho các ký tự điều khiển hoặc ký tự đặc biệt.

Ví dụ, sử dụng \n để xuất một thông báo bao gồm một dòng mới.

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

Thoát các ký tự đặc biệt

Ký tự thoát cũng hữu ích khi bao gồm các ký tự đặc biệt trong một chuỗi. Ví dụ, bạn có thể muốn sử dụng dấu ngoặc kép hoặc dấu ngoặc đơn trực tiếp trong một chuỗi.

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!"

Thoát chính ký tự gạch chéo ngược

Để bao gồm một ký tự gạch chéo ngược trong chuỗi, bạn cần viết nó dưới dạng hai gạch chéo ngược.

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

Thoát ký tự Unicode và hệ thập lục phân

Trong TypeScript, các điểm mã Unicode có thể được biểu diễn bằng các chuỗi thoát.

Chuỗi thoát ký tự Unicode

Bạn có thể biểu diễn các ký tự Unicode bằng cách chỉ định một số thập lục phân gồm bốn chữ số sau \u.

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

Chuỗi thoát thập lục phân

Bạn có thể biểu diễn các ký tự cụ thể bằng cách sử dụng một số thập lục phân gồm hai chữ số sau \x.

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

Chuỗi mẫu và ký tự thoát

Template literals được định nghĩa bằng cách đặt trong dấu backticks và cung cấp cách dễ dàng để tạo các biểu thức nhúng hoặc chuỗi nhiều dòng. Ký tự thoát thông thường có thể được sử dụng trực tiếp trong chuỗi mẫu.

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

Các trường hợp đặc biệt

Trong TypeScript, việc sử dụng chuỗi thoát không hợp lệ trong một chuỗi có thể dẫn đến lỗi cú pháp. Do đó, điều quan trọng là kiểm tra xem các ký tự thoát có hợp lệ hay không.

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

Ví dụ thực tiễn về cách sử dụng

Dưới đây là một ví dụ về cách xây dựng một chuỗi phức tạp bằng cách sử dụng các ký tự thoát.

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// }

Trong ví dụ này, \n được dùng để tạo dòng mới và \t được dùng để thêm thụt lề. Điều này làm cho cấu trúc JSON dễ đọc hơn.

Tóm tắt

Ký tự thoát rất quan trọng khi làm việc với chuỗi trong TypeScript. Khi bạn muốn bao gồm các ký tự đặc biệt hoặc ký tự điều khiển trong một chuỗi, bạn có thể tạo ra các chuỗi truyền cảm bằng cách sử dụng các chuỗi thoát thích hợp. Hiểu và sử dụng chính xác các ký tự thoát có thể cải thiện khả năng đọc và bảo trì mã.

Các phiên bản của TypeScript

Hãy cùng xem tổng quan về các phiên bản của TypeScript ở đây.

  1. TypeScript 1.0 (2014)

    Phiên bản ổn định đầu tiên của TypeScript. Những tính năng cơ bản như typing, class và module đã được giới thiệu.

  2. TypeScript 2.0 (2016)

    Các tính năng như Non-nullable Types, Control Flow Analysis, Read-only Properties và kiểu Never đã được giới thiệu, cải thiện khả năng suy luận kiểu.

  3. TypeScript 3.0 (2018)

    Hệ thống kiểu linh hoạt hơn đã được giới thiệu, với các tính năng như Project References, mở rộng Tuple Types, và cải tiến Rest Parameters.

  4. TypeScript 4.0 (2020)

    Các tính năng như Variadic Tuple Types, cải tiến trình soạn thảo, nâng cao suy luận kiểu, và Labelled Tuple Elements đã được thêm vào để cải thiện trải nghiệm phát triển.

  5. TypeScript 4.1 (2020)

    Template Literal Types đã được giới thiệu, làm cho việc xử lý kiểu chuỗi trở nên mạnh mẽ hơn.

  6. TypeScript 4.3 (2021)

    Việc bổ sung từ khóa Override, cải tiến các bộ điều chỉnh quyền truy cập trong các constructor và hỗ trợ kiểu nâng cao cho WeakMap và WeakSet.

  7. TypeScript 4.5 (2021)

    Kiểu Awaited, ModuleSuffixes và khả năng tương thích cải thiện với các mô-đun ECMAScript đã được thêm vào.

  8. TypeScript 5.0 (2023)

    Việc tiêu chuẩn hóa Decorators, cải thiện tốc độ xây dựng dự án, tăng cường hệ thống kiểu và hỗ trợ các tính năng ECMAScript mới nhất đã được thực hiện.

TypeScript không ngừng phát triển, với nhiều phiên bản được phát hành mỗi năm, giới thiệu các tính năng và cải tiến mới.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các kiểu dữ liệu trong TypeScript