Bạn đã biết khai báo biến trong JavaScript và đã đọc bài giới thiệu TypeScript. Bước tiếp theo là tạo một môi trường nhỏ để nhìn thấy toàn bộ quá trình: viết mã TypeScript, kiểm tra kiểu, tạo JavaScript và chạy kết quả. Ví dụ dưới đây dùng Node.js cho các bài không cần giao diện; phần DOM sẽ chạy trên trình duyệt.

1. Cài TypeScript riêng cho dự án

Cài Node.js bản LTS từ trang chính thức, kiểm tra bằng node -v và npm -v. Sau đó mở Terminal trong một thư mục mới và chạy:

mkdir hoc-typescript
cd hoc-typescript
npm init -y
npm install --save-dev typescript
npx tsc --version

Cài cục bộ giúp dự án dùng phiên bản TypeScript ghi trong package.json và package-lock.json, thay vì phụ thuộc vào một bản cài toàn máy. Khi nhận dự án có package-lock.json, dùng npm ci để cài đúng phiên bản đã khóa. Bạn không cần gỡ bản TypeScript toàn cục nếu đã cài trước đó.

2. Chọn cách tổ chức module ngay từ đầu

Mở package.json và thêm thuộc tính "type": "module" ở cấp ngoài cùng, giữ nguyên các thuộc tính còn lại. Trong loạt bài này, mã nguồn nằm trong thư mục src, kết quả biên dịch nằm trong dist và sử dụng ES module. Tạo hai thư mục đó bằng VS Code.

3. Tạo tsconfig.json

Tạo file tsconfig.json ở cùng cấp với package.json, rồi nhập cấu hình tối giản sau. Đây là cấu hình dành riêng cho các ví dụ của loạt bài, không phải cấu hình áp dụng nguyên xi cho mọi framework:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2022", "DOM"],
    "types": [],
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noEmitOnError": true
  },
  "include": ["src/**/*.ts"]
}

target chọn mức cú pháp JavaScript đầu ra. module và moduleResolution phối hợp với cách Node.js xử lý module. rootDir, outDir tách mã nguồn khỏi kết quả. include chọn các file được kiểm tra. types: [] tránh tự nạp kiểu toàn cục của những gói không liên quan.

lib cung cấp khai báo kiểu cho API chuẩn; thêm DOM không tạo ra document trong Node.js. Các ví dụ sử dụng document phải chạy trên trình duyệt. Tương tự, chọn target không tự bổ sung API còn thiếu ở môi trường chạy.

4. Biên dịch và chạy chương trình đầu tiên

Tạo src/main.ts với nội dung:

const courseName: string = "TypeScript cơ bản";
const lessonCount: number = 9;
console.log(courseName + ": " + lessonCount + " bài bổ sung");
export {};

npx tsc -p .
node dist/main.js

Kết quả là TypeScript cơ bản: 9 bài bổ sung. Mở dist/main.js để thấy phần chú thích kiểu đã biến mất. export {} đánh dấu file là module, giúp các ví dụ không vô tình chia sẻ biến toàn cục.

5. Hiểu strict và cách đọc lỗi

strict bật một nhóm kiểm tra nghiêm ngặt, trong đó có kiểm tra tham số thiếu kiểu và giá trị null/undefined. Thử đổi lessonCount thành chuỗi sẽ làm trình biên dịch báo không thể gán string cho number. Hãy đọc tên file, dòng lỗi và hai kiểu được nêu, rồi sửa dữ liệu hoặc khai báo cho đúng ý định.

noUncheckedIndexedAccess giúp nhắc rằng một vị trí mảng có thể không tồn tại; đây là tùy chọn bổ sung bên cạnh strict. noEmitOnError ngăn tạo đầu ra mới khi còn lỗi, nhưng không xóa file JavaScript cũ trong dist. Vì vậy chỉ chạy đầu ra sau khi biên dịch thành công.

Dùng npx tsc -p . --watch để theo dõi thay đổi, hoặc npx tsc -p . --noEmit khi chỉ muốn kiểm tra kiểu. Trong loạt bài này, ưu tiên -p .; lệnh truyền trực tiếp tên file như tsc src/main.ts không sử dụng tsconfig theo cùng cách.

6. Kiểm tra kiểu khác với kiểm tra dữ liệu lúc chạy

Khai báo TypeScript giúp phát hiện lỗi trong mã khi kiểm tra kiểu. Nó không tự xác nhận rằng JSON từ API, dữ liệu localStorage hoặc nội dung người dùng nhập đúng cấu trúc. Với dữ liệu bên ngoài, vẫn cần kiểm tra khi chạy chương trình; bài về API sẽ minh họa cụ thể.

Đọc thêm: TypeScript: The Basics.

Đọc thêm: TSConfig Reference.

Đọc tiếp trong loạt bài

Bài tiếp theo: TypeScript cơ bản – Hàm, kiểu tham số, giá trị trả về và callback

Xem chuyên mục TypeScript cơ bản

Thứ tự đọc các bài bổ sung

1. TypeScript cơ bản – Hàm, kiểu tham số, giá trị trả về và callback
2. TypeScript cơ bản – Type và interface: mô tả cấu trúc dữ liệu
3. TypeScript cơ bản – Null, undefined, narrowing và type guards
4. TypeScript cơ bản – Generics và keyof: tái sử dụng mà vẫn giữ kiểu
5. TypeScript cơ bản – Module, import, export và tổ chức nhiều file
6. TypeScript cơ bản – DOM, sự kiện và biểu mẫu trên trình duyệt
7. TypeScript cơ bản – Promise, async/await và kiểm tra dữ liệu API
8. TypeScript cơ bản – Class, constructor, phạm vi truy cập và implements