So sánh JavaScript và TypeScript: Điểm khác biệt nổi bật và tính năng độc đáo.

Xử lý this

JavaScript
Trong JavaScript, giá trị của this phụ thuộc vào cách một hàm được gọi. Điều này có thể dẫn đến sự nhầm lẫn và hành vi không như mong đợi.

const obj = {
    name: "Alice",
    greet: function() {
        console.log(this.name);
    },
};

obj.greet(); // Alice

const greet = obj.greet;
greet(); // undefined (or global object in non-strict mode)

Trong ví dụ trên, this tham chiếu đến obj khi phương thức greet được gọi, nhưng khi phương thức này được gán cho một biến và gọi, this không còn được ràng buộc với obj nữa.

TypeScript

TypeScript không thay đổi cách this hoạt động trong JavaScript, nhưng nó cung cấp các công cụ tốt hơn để đảm bảo this được sử dụng chính xác.

class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log(this.name);
    }
}

const alice = new Person("Alice");
alice.greet(); // Alice

const greet = alice.greet;
greet(); // undefined

Các lớp (classes) trong TypeScript giúp giảm thiểu các vấn đề liên quan đến this bằng cách thực thi kiểm tra kiểu và cung cấp lỗi biên dịch (compile-time errors) nếu this được sử dụng không đúng cách.

Hàm mũi tên (Arrow Functions)

Cả JavaScript và TypeScript đều hỗ trợ hàm mũi tên, vốn không có ngữ cảnh this riêng. Thay vào đó, chúng kế thừa this từ phạm vi bao quanh.

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}

const timer = new Timer();

Trong ví dụ trên, hàm mũi tên bên trong setInterval đảm bảo rằng this tham chiếu đến đối tượng Timer.

Chú thích kiểu (Type Annotations)

JavaScript
JavaScript là một ngôn ngữ kiểu động (dynamically typed), nghĩa là các biến có thể thay đổi kiểu dữ liệu trong thời gian chạy.

let message = "Hello, world!";
message = 42; // No error, but not ideal

TypeScript
TypeScript giới thiệu các kiểu tĩnh (static types), cho phép các nhà phát triển khai báo kiểu dữ liệu của biến một cách rõ ràng. Điều này giúp phát hiện các lỗi liên quan đến kiểu dữ liệu trong quá trình phát triển.

let message: string = "Hello, world!";
// message = 42; // Error: Type 'number' is not assignable to type 'string'

Sử dụng chú thích kiểu (type annotations), TypeScript cung cấp các kiểm tra trong thời gian biên dịch, ngăn chặn sự không khớp kiểu (type mismatches).

Giao diện (Interfaces)

JavaScript
JavaScript không có hỗ trợ tích hợp cho các giao diện, nhưng các nhà phát triển thường sử dụng đối tượng (objects) và chú thích JSDoc để bắt chước hành vi giống giao diện.

/**
 * @typedef {Object} User
 * @property {string} name
 * @property {number} age
 */

/**
 * @param {User} user
 */
function printUser(user) {
    console.log(`Name: ${user.name}, Age: ${user.age}`);
}

const user = { name: "Alice", age: 30 };
printUser(user);

 

TypeScript
TypeScript có hỗ trợ giao diện (interface) một cách tự nhiên, cung cấp một phương thức rõ ràng và súc tích để định nghĩa cấu trúc của một đối tượng.

interface User {
    name: string;
    age: number;
}

function printUser(user: User) {
    console.log(`Name: ${user.name}, Age: ${user.age}`);
}

const user: User = { name: "Alice", age: 30 };
printUser(user);

Giao diện trong TypeScript đảm bảo các đối tượng tuân theo cấu trúc đã được chỉ định, giúp cải thiện độ tin cậy và khả năng đọc của mã.

Lớp và Kế thừa (Classes and Inheritance)

JavaScript
Các lớp trong JavaScript được giới thiệu từ ES6, cung cấp một cách viết ngắn gọn hơn (syntactical sugar) dựa trên cơ chế kế thừa theo nguyên mẫu (prototype-based inheritance) đã tồn tại.

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Employee extends Person {
    constructor(name, jobTitle) {
        super(name);
        this.jobTitle = jobTitle;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am a ${this.jobTitle}`);
    }
}

const alice = new Employee("Alice", "Developer");
alice.greet(); // Hello, my name is Alice and I am a Developer

TypeScript xây dựng dựa trên các lớp của JavaScript bằng cách thêm chú thích kiểu (type annotations), các bộ sửa đổi quyền truy cập (visibility modifiers), và cải thiện tính an toàn kiểu (type safety).

class Person {
    protected name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Employee extends Person {
    private jobTitle: string;

    constructor(name: string, jobTitle: string) {
        super(name);
        this.jobTitle = jobTitle;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am a ${this.jobTitle}`);
    }
}

const alice = new Employee("Alice", "Developer");
alice.greet(); // Hello, my name is Alice and I am a Developer

Các lớp TypeScript cải thiện các lớp JavaScript bằng cách cung cấp các tính năng như thành viên riêng tư (private) và thành viên được bảo vệ (protected), đảm bảo tính đóng gói tốt hơn và an toàn cho mã.

Generics

JavaScript
JavaScript không có hỗ trợ tích hợp cho generics. Các nhà phát triển thường sử dụng các kiểu linh hoạt và kiểm tra tại thời điểm chạy (runtime checks) để xử lý hành vi giống như generics.

function identity(arg) {
    return arg;
}

console.log(identity(42)); // 42
console.log(identity("Hello")); // Hello

TypeScript
TypeScript hỗ trợ generics, cho phép các nhà phát triển tạo ra các thành phần tái sử dụng với các kiểu linh hoạt trong khi vẫn duy trì tính an toàn kiểu (type safety).

function identity<T>(arg: T): T {
    return arg;
}

console.log(identity<number>(42)); // 42
console.log(identity<string>("Hello")); // Hello

Generics trong TypeScript cho phép tạo ra các hàm và lớp có thể hoạt động với nhiều kiểu khác nhau trong khi vẫn cung cấp kiểm tra kiểu tại thời điểm biên dịch (compile-time type checks).

Xử lý lỗi (Error Handling)

JavaScript
JavaScript sử dụng các cấu trúc try, catch, và finally để xử lý lỗi, cho phép các nhà phát triển bắt và xử lý các lỗi trong thời gian chạy (runtime errors).

try {
    throw new Error("Something went wrong!");
} catch (error) {
    console.error(error.message);
} finally {
    console.log("Cleanup code here");
}

TypeScript
TypeScript sử dụng các cơ chế xử lý lỗi giống như JavaScript nhưng có lợi từ các chú thích kiểu (type annotations) để cải thiện việc phát hiện lỗi trong quá trình phát triển.

try {
    throw new Error("Something went wrong!");
} catch (error) {
    if (error instanceof Error) {
        console.error(error.message);
    }
} finally {
    console.log("Cleanup code here");
}

Hệ thống kiểu của TypeScript có thể phát hiện các lỗi liên quan đến việc xử lý ngoại lệ không đúng, cung cấp thêm độ an toàn và độ tin cậy.

---

JavaScript và TypeScript đều là những công cụ mạnh mẽ cho phát triển web. JavaScript mang lại sự linh hoạt và dễ sử dụng, trong khi TypeScript xây dựng trên nền tảng này bằng cách thêm các kiểu tĩnh, giao diện, generics, và các tính năng khác giúp cải thiện chất lượng mã và trải nghiệm của nhà phát triển. Bằng cách hiểu các khác biệt và tận dụng những điểm mạnh của cả hai ngôn ngữ, các nhà phát triển có thể viết các ứng dụng mạnh mẽ, dễ bảo trì và có thể mở rộng. Dù bạn chọn sử dụng JavaScript hay áp dụng TypeScript, việc thành thạo những khái niệm này sẽ nâng cao kỹ năng lập trình và thành công trong các dự án của bạn.