TypeScript và JavaScript: khác nhau thế nào, có ví dụ

TypeScript là JavaScript có thêm một hệ thống kiểu tĩnh (static type system) đặt lên trên. Mọi chương trình JavaScript đều là cú pháp TypeScript hợp lệ; TypeScript bổ sung chú thích kiểu, một trình biên dịch kiểm tra chúng trước khi code chạy, và một bước build xóa chúng đi. Lúc chạy chỉ còn JavaScript, nên khác biệt nằm hoàn toàn ở những gì bạn phát hiện được trước khi phát hành.

type Product = { name: string; price: number };

function total(products: Product[]): number {
    return products.reduce((sum, p) => sum + p.price, 0);
}

const cart: Product[] = [
    { name: "Keyboard", price: 49 },
    { name: "Mouse", price: 25 },
];

console.log(total(cart)); // 74

Trong JavaScript, cùng hàm này chính là đoạn code trên bỏ đi type Product = ..., : Product[] và : number. Các kiểu bổ sung thông tin cho trình biên dịch và editor; chúng không thay đổi việc chương trình làm.

So sánh nhanh TypeScript và JavaScript

Cùng một đoạn code ở hai ngôn ngữ

Đây là một hàm viết bằng JavaScript. Không có gì trong đó cho biết user phải có dạng như thế nào:

function greeting(user) {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// "Hello, undefined Lovelace", no error anywhere

Phiên bản TypeScript khai báo hình dạng một lần, và lỗi gõ sai được báo trước khi code chạy:

interface User {
    firstName: string;
    lastName: string;
}

function greeting(user: User): string {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// error TS2561: Object literal may only specify known properties,
// but 'firstname' does not exist in type 'User'. Did you mean to write 'firstName'?

Chú thích kiểu là toàn bộ khác biệt về cú pháp. TypeScript cũng thêm vài kiểu khai báo riêng (interface, type, enum, generic như Array<string>, access modifier như private), nhưng các câu lệnh, toán tử và đối tượng có sẵn đều là của JavaScript.

Những lỗi TypeScript bắt được mà JavaScript thì không

JavaScript chuyển kiểu một cách lặng lẽ. Bug này rất hay gặp với giá trị lấy từ các ô nhập liệu của form, vốn luôn là chuỗi. Chạy thử để xem trình biên dịch nói gì:

// This does not compile: strings where numbers are expected.
function sum(values: number[]): number {
    return values.reduce((a, b) => a + b, 0);
}

const fromForm = ["10", "20", "5"];
console.log(sum(fromForm));

index.ts(7,17): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'.
  Type 'string' is not assignable to type 'number'.

Trong JavaScript, đoạn này chạy được và in ra 010205, vì 0 + "10" là phép nối chuỗi. TypeScript từ chối biên dịch cho đến khi các chuỗi được chuyển đổi, ví dụ bằng fromForm.map(Number).

Nhóm lỗi lớn còn lại là những giá trị có thể không tồn tại. Array.prototype.find trả về undefined khi không tìm thấy phần tử nào khớp, và TypeScript buộc bạn phải xử lý trường hợp đó:

// This does not compile: find() can return undefined.
const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

const user = users.find((u) => u.id === 3);
console.log(user.name.toUpperCase());

index.ts(8,13): error TS18048: 'user' is possibly 'undefined'.

Phiên bản JavaScript thuần bị crash lúc chạy với TypeError: Cannot read properties of undefined (reading 'name'). Cách sửa trong TypeScript là xử lý đúng trường hợp mà trình biên dịch đã chỉ ra:

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

for (const id of [2, 3]) {
    const user = users.find((u) => u.id === id);
    if (user) {
        console.log(user.name.toUpperCase()); // user is narrowed to the object type here
    } else {
        console.log(`no user with id ${id}`);
    }
}

Đầu ra:

GRACE
no user with id 3

Những gì TypeScript không bắt được: lỗi logic (một công thức sai vẫn có kiểu đúng), và mọi thứ liên quan đến dữ liệu đi vào chương trình lúc chạy. Một response API có kiểu User chỉ đúng khi máy chủ gửi nó đúng, vì các kiểu đã biến mất khi code chạy. Hãy kiểm tra những dữ liệu như vậy bằng code chạy lúc runtime.

Dùng thư viện JavaScript trong TypeScript

Mọi package npm đều dùng được từ TypeScript, vì đầu ra dù sao cũng là JavaScript. Kiểu cho một package đến từ một trong ba nơi:

• Package tự kèm tệp .d.ts. Hầu hết package còn được duy trì tích cực đều làm vậy, và bạn không cần cài gì thêm.
• Một package @types riêng từ dự án cộng đồng DefinitelyTyped: npm install --save-dev @types/lodash thêm kiểu cho lodash.
• Không có ở đâu cả. Khi đó, nếu bật strict, chính câu lệnh import sẽ bị báo lỗi:

error TS7016: Could not find a declaration file for module 'lodash'. '/project/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

Cách sửa là cài package @types nếu có, hoặc tự mô tả module trong một tệp .d.ts; trang declaration file hướng dẫn cách làm.

Bước build

Trình duyệt và Node.js không kiểm tra kiểu, nên TypeScript cần một bước nằm giữa mã nguồn và code thực sự chạy. Có ba cách thiết lập phổ biến:

• tsc biên dịch mọi thứ. Nó kiểm tra kiểu và ghi ra các tệp .js, thường vào thư mục dist. Đơn giản, và là chuẩn cho các thư viện.
• Bundler hoặc dev server xóa kiểu, còn tsc --noEmit kiểm tra chúng. Vite và esbuild loại bỏ kiểu mà không kiểm tra, giúp tải lại nhanh; editor và một bước CI chạy bộ kiểm tra kiểu.
• Runtime tự xóa kiểu. Các phiên bản Node.js hiện tại, Deno và Bun chạy trực tiếp tệp .ts. Không runtime nào kiểm tra kiểu khi chạy, nên tsc --noEmit (hoặc deno check) vẫn là cách để tìm lỗi kiểu.

JavaScript không cần bất cứ bước nào trong số này, và đó là lợi thế thực tế lớn nhất của nó với các script nhỏ. Chi phí của bước TypeScript chủ yếu là thiết lập, gồm một tsconfig.json và dev dependency typescript, cộng với thời gian biên dịch; trình biên dịch native của TypeScript 7 đã giảm thời gian đó khoảng mười lần trên các dự án lớn.

Độ khó khi học

Mọi điều bạn biết về JavaScript đều dùng được, vì phần chạy của TypeScript chính là JavaScript. Phần mới là hệ thống kiểu, và nó gồm nhiều lớp:

1. Chú thích kiểu cho biến, tham số và giá trị trả về (: string, : number[]).
2. Kiểu đối tượng với interface và type, thuộc tính tùy chọn, union như string | number.
3. Thu hẹp kiểu (narrowing): kiểm tra một giá trị bằng typeof, in hoặc === để trình biên dịch biết bạn đang ở trường hợp nào.
4. Generic, utility type như Partial<T> và Pick<T, K>, và các kiểu nâng cao dành cho người viết thư viện.

Hai lớp đầu tiên đủ cho phần lớn code ứng dụng. Phần lớn kiểu được suy luận tự động, nên nhiều code TypeScript trông giống JavaScript, chỉ có chú thích kiểu ở chữ ký hàm.

Khi nào chọn TypeScript, khi nào chọn JavaScript

TypeScript có tốt hơn JavaScript không? Với code do nhiều người duy trì hoặc tồn tại nhiều năm, thường là có, và ngành phần mềm đã đi theo hướng đó: theo số người đóng góp hằng tháng mà GitHub thống kê, TypeScript đã vượt cả JavaScript và Python vào tháng 8 năm 2025 để trở thành ngôn ngữ được dùng nhiều nhất trên GitHub. Với các script nhỏ, JavaScript thuần thường là công cụ phù hợp hơn.

Chọn TypeScript khi:

• Có nhiều hơn một người làm việc trên code, hoặc code sẽ được duy trì trong nhiều tháng, nhiều năm.
• Codebase đủ lớn để bạn không thể nhớ hết chữ ký của mọi hàm.
• Bạn thường xuyên refactor: đổi tên một thuộc tính sẽ cập nhật mọi chỗ dùng, và trình biên dịch liệt kê những chỗ còn sót.
• Bạn phát hành một thư viện: các tệp .d.ts mang lại gợi ý code và kiểm tra cho người dùng thư viện.
• Framework yêu cầu nó. Ứng dụng Angular được viết bằng TypeScript, Next.js và Astro mặc định tạo dự án mới bằng TypeScript, và các template React, Vue, Svelte của Vite đều có bản TypeScript.

Chọn JavaScript khi:

• Chương trình là một script ngắn, một thử nghiệm dùng một lần, hoặc một đoạn code trong console của trình duyệt.
• Bạn mới học lập trình lần đầu và muốn tiếp cận ít khái niệm hơn cùng lúc.
• Không có bước build và bạn cũng không muốn có. Kể cả khi đó, // @ts-check kết hợp JSDoc vẫn cho bạn một phần kiểm tra trong tệp .js thông thường.

Chuyển dự án JavaScript sang TypeScript

Việc chuyển đổi không cần diễn ra một lần. Trình biên dịch chấp nhận JavaScript bên cạnh TypeScript:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": false,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
}

Với allowJs, các tệp .js được biên dịch và có thể import từ tệp .ts, cũng như ngược lại. Sau đó chuyển dần từng bước:

1. Đổi tên một tệp từ .js thành .ts và sửa các lỗi trình biên dịch báo trong tệp đó.
2. Bắt đầu từ các tệp lá (module tiện ích ít import), rồi tiến dần vào trong.
3. Bật checkJs, hoặc thêm // @ts-check ở đầu từng tệp .js, để kiểm tra kiểu các tệp chưa đổi tên.

Trong các tệp JavaScript được kiểm tra, chú thích JSDoc cung cấp kiểu:

// @ts-check

/**
 * @param {number} price
 * @param {number} qty
 * @returns {number}
 */
function lineTotal(price, qty) {
    return price * qty;
}

lineTotal("3", 2);
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Một số nhóm dừng ở đó: tệp JavaScript có kiểu JSDoc, được tsc kiểm tra, và không có bước build cho chính code. Số khác chuyển hẳn sang .ts. Nếu bạn bật strict cho một dự án có sẵn, hãy chuẩn bị gặp nhiều lỗi lúc đầu; trang strict mode liệt kê những gì mỗi cờ kiểm tra để bạn bật lần lượt từng cờ.