TypeScript Là Gì? Vì Sao Nên Học TypeScript?

npm install -g typescript

Sau khi cài đặt, bạn có thể kiểm tra phiên bản TypeScript bằng lệnh:

tsc -v

Nếu lệnh trả về phiên bản TypeScript, nghĩa là bạn đã cài đặt thành công.

Viết file TypeScript đầu tiên

TypeScript thường được viết trong file có đuôi .ts.

Ví dụ, tạo file:

test.ts

Sau đó viết đoạn code sau:

function addNumbers(a: number, b: number): number {
  return a + b;
}

const sum: number = addNumbers(10, 15);

console.log("Sum of the two numbers is: " + sum);

Trong ví dụ trên:

a: number nghĩa là tham số a phải là số.

b: number nghĩa là tham số b phải là số.

: number sau dấu ngoặc đóng của function nghĩa là function này trả về giá trị kiểu số.

const sum: number nghĩa là biến sum có kiểu dữ liệu là số.

Biên dịch TypeScript sang JavaScript

Trình duyệt và Node.js thường chạy JavaScript, vì vậy bạn cần biên dịch file TypeScript sang JavaScript.

Dùng lệnh:

tsc test.ts

Sau khi chạy lệnh này, TypeScript compiler sẽ tạo ra file JavaScript tương ứng, ví dụ:

test.js

Nội dung JavaScript sau khi biên dịch có thể tương tự như:

function addNumbers(a, b) {
  return a + b;
}

var sum = addNumbers(10, 15);

console.log("Sum of the two numbers is: " + sum);
Ví dụ lỗi kiểu dữ liệu trong TypeScript

Bây giờ thử gọi function với một tham số sai kiểu:

function addNumbers(a: number, b: number): number {
  return a + b;
}

const sum: number = addNumbers(10, "string");

console.log("Sum of the two numbers is: " + sum);

Khi biên dịch, TypeScript sẽ báo lỗi vì tham số thứ hai yêu cầu kiểu number, nhưng bạn lại truyền vào kiểu string.

Đây chính là điểm mạnh của TypeScript. Nó giúp bạn phát hiện lỗi trước khi code chạy thật.

Các kiểu dữ liệu cơ bản trong TypeScript

Khi học TypeScript, bạn nên bắt đầu từ các kiểu dữ liệu cơ bản.

Number

Dùng cho số nguyên và số thực.

let age: number = 25;
let price: number = 99.5;
String

Dùng cho chuỗi văn bản.

let username: string = "Thang";
let title: string = "TypeScript là gì?";
Boolean

Dùng cho giá trị đúng hoặc sai.

let isActive: boolean = true;
let isDeleted: boolean = false;
Array

Dùng cho mảng dữ liệu.

let scores: number[] = [8, 9, 10];
let names: string[] = ["An", "Bình", "Chi"];

Bạn cũng có thể viết theo cú pháp generic:

let numbers: Array = [1, 2, 3];
Object

Dùng cho dữ liệu dạng object.

let user: { name: string; age: number } = {
  name: "An",
  age: 25
};
Any

any cho phép biến nhận bất kỳ kiểu dữ liệu nào.

let value: any = 10;
value = "hello";
value = true;

Tuy nhiên, không nên lạm dụng any, vì nó làm mất đi lợi ích kiểm tra kiểu của TypeScript.

Unknown

unknown cũng có thể nhận nhiều kiểu dữ liệu, nhưng an toàn hơn any vì bạn cần kiểm tra kiểu trước khi sử dụng.

let data: unknown = "Hello";

if (typeof data === "string") {
  console.log(data.toUpperCase());
}
Interface trong TypeScript

Interface dùng để mô tả cấu trúc của object.

Ví dụ:

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "An",
  email: "an@example.com"
};

Nếu object thiếu trường hoặc sai kiểu dữ liệu, TypeScript sẽ báo lỗi.

Interface rất hữu ích khi làm việc với dữ liệu người dùng, sản phẩm, đơn hàng hoặc response từ API.

Type Alias trong TypeScript

Type alias cũng dùng để định nghĩa kiểu dữ liệu.

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

const product: Product = {
  id: 1,
  name: "Laptop",
  price: 15000000
};

Cả type và interface đều phổ biến trong TypeScript. Người mới nên học cả hai để hiểu cách sử dụng trong từng trường hợp.

Function trong TypeScript

TypeScript cho phép bạn khai báo kiểu dữ liệu cho tham số và giá trị trả về của function.

function greet(name: string): string {
  return "Hello " + name;
}

Function không trả về gì có thể dùng void.

function logMessage(message: string): void {
  console.log(message);
}

Khai báo kiểu rõ ràng giúp function dễ hiểu và tránh truyền sai dữ liệu.

Class trong TypeScript

TypeScript hỗ trợ class giống như nhiều ngôn ngữ hướng đối tượng khác.

class Person {
  name: string;

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

  sayHello(): void {
    console.log("Hello, " + this.name);
  }
}

const person = new Person("An");
person.sayHello();

Bạn cũng có thể dùng access modifier như public, private, protected.

class BankAccount {
  private balance: number = 0;

  deposit(amount: number): void {
    this.balance += amount;
  }

  getBalance(): number {
    return this.balance;
  }
}
Generic trong TypeScript

Generic giúp bạn viết code linh hoạt nhưng vẫn giữ được kiểu dữ liệu an toàn.

Ví dụ:

function getFirstItem(items: T[]): T {
  return items[0];
}

const firstNumber = getFirstItem([1, 2, 3]);
const firstName = getFirstItem(["An", "Bình"]);

Generic thường được dùng nhiều trong function, class, API response và các thư viện TypeScript.

TypeScript dùng trong frontend

TypeScript rất phổ biến trong frontend hiện đại.

Với React, TypeScript giúp định nghĩa kiểu cho props, state, event và dữ liệu API.

Với Angular, TypeScript là ngôn ngữ chính, vì toàn bộ framework được xây dựng xoay quanh TypeScript.

Với Vue, TypeScript cũng được hỗ trợ tốt, đặc biệt trong các dự án Vue 3.

Ví dụ props trong React với TypeScript:

type ButtonProps = {
  label: string;
  onClick: () => void;
};

function Button(props: ButtonProps) {
  return {props.label};
}
TypeScript dùng trong backend

TypeScript cũng được dùng nhiều trong backend với Node.js.

Một số framework backend phổ biến hỗ trợ TypeScript gồm:

NestJS.

Express với TypeScript.

Fastify.

Koa.

TypeORM.

Prisma.

Trong backend, TypeScript giúp định nghĩa rõ kiểu dữ liệu cho request, response, service, database model và API.

Điều này giúp code backend dễ bảo trì và ít lỗi hơn khi hệ thống mở rộng.

Lộ trình học TypeScript cho người mới

Nếu bạn mới bắt đầu, có thể học TypeScript theo lộ trình sau:

Học JavaScript cơ bản trước.

Nắm ES6, arrow function, destructuring, module, promise, async/await.

Cài đặt TypeScript và dùng lệnh tsc.

Học các kiểu dữ liệu cơ bản như number, string, boolean, array, object.

Học union type, literal type, optional property.

Học function type.

Học interface và type alias.

Học class, access modifier và kế thừa.

Học generic.

Học module và namespace.

Áp dụng TypeScript vào React, Angular, Vue hoặc Node.js.

Làm dự án thực tế để hiểu cách dùng TypeScript trong môi trường thật.

Những lỗi thường gặp khi học TypeScript

Người mới học TypeScript thường mắc một số lỗi sau:

Chưa nắm JavaScript đã học TypeScript.

Lạm dụng any.

Khai báo type quá phức tạp ngay từ đầu.

Không hiểu khác nhau giữa type và interface.

Không biết đọc lỗi TypeScript compiler.

Chỉ học lý thuyết mà không áp dụng vào dự án.

Không cấu hình tsconfig.json.

Không hiểu cách TypeScript biên dịch sang JavaScript.

Để học tốt, bạn nên bắt đầu từ ví dụ nhỏ, sau đó đưa TypeScript vào dự án thực tế.

TypeScript có khó học không?

TypeScript không quá khó nếu bạn đã biết JavaScript. Tuy nhiên, ban đầu bạn có thể cảm thấy chậm hơn vì phải khai báo kiểu dữ liệu và xử lý lỗi từ compiler.

Nhưng khi đã quen, TypeScript giúp bạn code tự tin hơn, ít lỗi hơn và dễ làm việc trong dự án lớn hơn.

Nếu bạn chưa biết JavaScript, nên học JavaScript trước. TypeScript không thay thế việc học JavaScript, mà là bước nâng cấp sau khi bạn đã có nền tảng.

Câu hỏi thường gặp về TypeScript
TypeScript có thay thế JavaScript không?

Không. TypeScript không thay thế JavaScript hoàn toàn. TypeScript được xây dựng trên JavaScript và cuối cùng vẫn biên dịch sang JavaScript để chạy trên trình duyệt hoặc Node.js.

Người mới có nên học TypeScript không?

Có, nhưng nên học JavaScript trước. Sau khi hiểu JavaScript cơ bản, học TypeScript sẽ giúp bạn viết code an toàn hơn và dễ tiếp cận các dự án frontend, backend chuyên nghiệp.

TypeScript có dùng được với React không?

Có. TypeScript được dùng rất nhiều với React, đặc biệt trong các dự án lớn. Nó giúp định nghĩa props, state, event, API response và giảm lỗi trong quá trình phát triển.

Angular có bắt buộc dùng TypeScript không?

Có. Angular hiện đại sử dụng TypeScript làm ngôn ngữ chính. Vì vậy, nếu muốn học Angular, bạn nên học TypeScript.

TypeScript có dùng cho backend không?

Có. TypeScript được dùng nhiều trong backend với Node.js, Express, NestJS, Fastify, TypeORM và Prisma.

Có nên dùng any trong TypeScript không?

Có thể dùng trong một số trường hợp đặc biệt, nhưng không nên lạm dụng. Nếu dùng any quá nhiều, bạn sẽ mất lợi ích lớn nhất của TypeScript là kiểm tra kiểu dữ liệu.

Kết luận

TypeScript là một ngôn ngữ mã nguồn mở được xây dựng trên JavaScript, bổ sung hệ thống kiểu dữ liệu tĩnh và nhiều tính năng giúp code an toàn, dễ đọc và dễ bảo trì hơn.

Trong bối cảnh JavaScript được sử dụng rộng rãi ở cả frontend và backend, TypeScript trở thành lựa chọn quan trọng cho các dự án lớn, nhiều người cùng phát triển và cần khả năng mở rộng lâu dài.

Nếu bạn muốn trở thành Frontend Developer, Backend Developer với Node.js, hoặc học Angular, React, Vue, NestJS, TypeScript là kỹ năng rất đáng đầu tư.

Cách học tốt nhất là nắm chắc JavaScript trước, sau đó học TypeScript qua các ví dụ nhỏ và áp dụng vào dự án thực tế. Khi hiểu được giá trị của hệ thống kiểu, bạn sẽ thấy TypeScript giúp quá trình lập trình chuyên nghiệp và hiệu quả hơn rất nhiều.