TypeScript là gì? TypeScript cơ bản cho người mới bắt đầu

TypeScript là JavaScript có kiểu tĩnh. Bạn thêm chú thích kiểu (type annotation) cho biến, tham số và giá trị trả về, trình biên dịch TypeScript kiểm tra chúng trước khi chương trình chạy, rồi xuất ra JavaScript thuần đã bỏ hết kiểu. Đoạn JavaScript đó chạy được ở mọi nơi JavaScript chạy: trình duyệt, Node.js, Deno và Bun.

Đây là một chương trình TypeScript nhỏ. Nhấn Chạy.

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

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Đầu ra:

Ada is 36 years old
82.33333333333333

Ngoài những phần sau dấu hai chấm (: string, : User, : number[]) và interface, đây là JavaScript. Các phần thêm vào đó cho trình biên dịch biết mỗi giá trị được phép là gì. Để ý rằng total không có chú thích kiểu: TypeScript tự suy ra nó là một số. Phần lớn code TypeScript chỉ chú thích kiểu ở ranh giới của hàm và để trình biên dịch suy luận phần còn lại.

Bộ kiểm tra kiểu bắt được những lỗi gì

Mục đích của chú thích kiểu là để lỗi lộ ra ngay khi bạn đang viết code, thay vì khi người dùng gặp phải. Chạy khối code này và đọc đầu ra:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Chương trình không hề chạy. Thay vào đó, trình biên dịch in ra hai lỗi:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Mỗi lỗi cho biết tên tệp, dòng và cột, một mã lỗi (TS2322) và điều gì sai. Trong JavaScript thuần, cả hai dòng đều chạy, và dòng thứ hai in ra Linus is undefined years old mà không có cảnh báo nào. Trong một editor như VS Code, các lỗi này hiện thành gạch chân đỏ ngay khi bạn gõ, cùng với gợi ý code biết chính xác rằng user có một name và một age.

Những bug điển hình mà bộ kiểm tra bắt được:

• Gõ sai tên thuộc tính hoặc phương thức (user.nmae, list.lenght).
• Gọi hàm với quá ít hoặc quá nhiều đối số, hoặc đối số sai kiểu.
• Dùng một giá trị có thể là null hoặc undefined mà không kiểm tra trước.
• Quên xử lý một trường hợp của union như "loading" | "done" | "error", khi code có kiểm tra đầy đủ mọi trường hợp.
• Code bị hỏng khi một hàm bạn phụ thuộc vào thay đổi chữ ký.

Kiểu biến mất lúc chạy

Kiểu của TypeScript chỉ tồn tại lúc biên dịch. Trình biên dịch kiểm tra chúng rồi loại bỏ: JavaScript được xuất ra không có chú thích kiểu, không có interface, và chạy giống hệt JavaScript bạn tự viết tay.

Đầu vào này:

function double(n: number): number {
    return n * 2;
}

trở thành đầu ra này:

function double(n) {
    return n * 2;
}

Vì vậy TypeScript không thể kiểm tra những giá trị đến khi chương trình đang chạy. Ở đây, đoạn văn bản JSON được khẳng định là một User, trình biên dịch buộc phải tin điều đó, và lúc chạy cũng không có gì báo lỗi:

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

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Đầu ra:

string
thirty-six1

Dữ liệu từ bên ngoài chương trình (response API, dữ liệu nhập từ form, tệp) cần được kiểm tra lúc chạy, ví dụ bằng một hàm type guard xem xét giá trị. Khi đó TypeScript tin vào phép kiểm tra và tự thu hẹp kiểu cho bạn.

Ai tạo ra TypeScript và vì sao

TypeScript được tạo ra tại Microsoft, với Anders Hejlsberg (người thiết kế C#) dẫn dắt việc thiết kế. Nó được công bố rộng rãi vào tháng 10 năm 2012 với phiên bản 0.8, và bản 1.0 ra mắt vào tháng 4 năm 2014. TypeScript là mã nguồn mở theo giấy phép Apache 2.0 và được phát triển trên GitHub. Theo số người đóng góp hằng tháng mà GitHub thống kê, TypeScript trở thành ngôn ngữ được dùng nhiều nhất trên GitHub vào tháng 8 năm 2025, vượt qua Python và JavaScript.

Động lực ra đời là các codebase JavaScript lớn. JavaScript không có cách nào để nói "hàm này nhận một đối tượng user", nên đổi tên một thuộc tính hay sửa một hàm đồng nghĩa với việc tìm khắp codebase và hy vọng các bài test bao phủ mọi chỗ gọi. TypeScript bổ sung thông tin đó theo cách vẫn tương thích hoàn toàn với JavaScript:

• Nó là tập cha của JavaScript. JavaScript hợp lệ là cú pháp TypeScript hợp lệ, nên một dự án có thể chuyển đổi từng tệp một.
• Nó bám theo JavaScript. Ngoài vài bổ sung từ thời đầu như enum và namespace, TypeScript không thêm tính năng lúc chạy nào của riêng mình; cú pháp mới đến từ chuẩn JavaScript.
• Kiểu không tốn gì lúc chạy. Chúng bị xóa đi, nên đầu ra nhanh ngang JavaScript viết tay.

Phiên bản chính hiện tại là TypeScript 7, với trình biên dịch được viết lại bằng Go thành chương trình native, kiểm tra kiểu các dự án lớn nhanh hơn khoảng mười lần so với trình biên dịch dựa trên JavaScript mà nó thay thế. Trang TypeScript 7 trình bày những gì đã thay đổi.

TypeScript dùng để làm gì? Frontend và backend

TypeScript được dùng cho cùng loại phần mềm như JavaScript, cả ở frontend lẫn backend. Vì đầu ra là JavaScript, JavaScript chạy ở đâu thì TypeScript dùng được ở đó:

Cùng một ngôn ngữ phủ cả hai phía của ứng dụng web, nên nhiều nhóm dùng chung định nghĩa kiểu (ví dụ hình dạng của một response API) giữa code máy chủ và code trình duyệt.

Code TypeScript trở thành JavaScript như thế nào

Có hai việc tách biệt, và mỗi việc do những công cụ khác nhau đảm nhận:

1. Kiểm tra kiểu. Chỉ trình biên dịch TypeScript làm việc này, thường qua lệnh tsc (deno check của Deno chạy một bản sao của chính trình biên dịch đó). Nó đọc các tệp .ts, báo lỗi, và mặc định ghi ra luôn các tệp .js.
2. Xóa kiểu. tsc làm được, và các công cụ nhanh hơn bỏ qua hoàn toàn bước kiểm tra kiểu cũng làm được: esbuild, SWC, Babel, và tính năng loại bỏ kiểu có sẵn trong Node.js, Deno và Bun.

Một cách thiết lập phổ biến là dùng công cụ nhanh để chạy code và tsc --noEmit (chỉ kiểm tra, không ghi gì) trong editor và trong CI. Cài tsc và chạy một tệp .ts đều có trang riêng trong chương này.

Các tính năng cốt lõi trong một ví dụ

TypeScript hằng ngày chỉ dùng một nhóm nhỏ tính năng. Khối code này gom các tính năng chính lại với nhau:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Đầu ra:

Ada ada@example.com
Ada can log in
Linus is banned

• Chú thích kiểu (name: string) cho biết một biến, tham số, thuộc tính hoặc giá trị trả về chứa gì.
• Suy luận kiểu điền vào những kiểu bạn bỏ trống: account lấy kiểu từ giá trị mà first trả về.
• Interface và type alias (interface Account, type Status) đặt tên cho hình dạng dữ liệu của bạn.
• Union type ("active" | "banned", T | undefined) mô tả một giá trị có thể là một trong nhiều thứ.
• Thu hẹp kiểu: sau một phép kiểm tra như account !== undefined, trình biên dịch biết trường hợp nào đang áp dụng bên trong khối lệnh.
• Thuộc tính tùy chọn (email?: string) có thể không có, nên kiểu của chúng bao gồm undefined.
• Generic (first<T>) cho phép một hàm hoặc một kiểu làm việc với nhiều kiểu mà vẫn giữ chúng liên kết với nhau: vào là mảng Account, ra là một Account.

Có cần học JavaScript trước không?

Học trước thì có ích, nhưng bạn có thể học cả hai cùng lúc. Mọi thứ về cách code TypeScript hoạt động lúc chạy (biến, hàm, đối tượng, mảng, promise, lớp) đều là JavaScript, và TypeScript thêm một lớp mô tả các giá trị đó. Nếu bạn đã biết JavaScript, phần mới là hệ thống kiểu: chú thích kiểu, interface, union, generic và thu hẹp kiểu. Nếu bạn mới với cả hai, hãy bắt đầu từ giá trị và hàm trong JavaScript cơ bản, rồi thêm kiểu dần dần; thông báo lỗi của trình biên dịch là một người thầy tốt, vì chúng chỉ đúng dòng mà một giá trị bị dùng sai.

Một thứ tự thực tế để học TypeScript: cài đặt và chạy tệp đầu tiên, học các kiểu cơ bản và kiểu đối tượng, sau đó đến union type và thu hẹp kiểu, rồi tiếp đến hàm và generic. Như vậy là đủ cho phần lớn code ứng dụng.