Cấu hình tsconfig.json trong TypeScript

Bài viết này mình sẽ chia sẻ một số config cơ bản dùng trong file tsconfig.json, các bạn hãy xem các ví dụ bên dưới để hiểu hơn nhé.

  1. Đầu tiên mình mở VS Code nên và tạo file app.ts trong thư mục helloworld
  2. Thêm code bên dưới vào file app.ts
let message: string = 'Hello, World!';
console.log(message);
  1. Mở Terminal trong VS Code bằng keyboard shortcut Ctrl+` hoặc theo menu Terminal > New Terminal
    9086f77a 34f1 458a af90 58a7ffa78af5 1

  2. Gõ command bên dưới để compile(biên dịch) file app.ts:

tsc app.ts

d4553f0f 1710 4be2 8f22 01a3cdf89eed 1

Nếu mọi thứ ok, bạn sẽ thấy một file gọi là app.js được sinh ra bởi TypeScript compiler:
31c89224 3947 4915 a1a5 98dddea6b493 1

Khi biên dịch, file app.js được hiển thị trong thư mục helloworld, giả sử mình muốn hiển thị các files đã được biên dịch vào trong thư mục js thì mình sẽ làm như thế nào.
Để giải quyết vấn đề này mình sẽ tạo một file là tsconfig.json và thêm code như sau:

{
    "compilerOptions": {
        "outDir"    : "js",
    }
}

Sau đó chạy command:

tsc

Output:
Option outDir trong config sẽ lưu tất cả các files đã biên dịch vào thư mục js
95a81202 d1c9 4a52 b580 1f621a8708cf

Tiếp theo mình tạo một thư mục là css trong thư mục helloworld, sau đó tạo một file là test.ts trong thư mục css:
efd6432e 5949 40da b772 8d62b3b4e51e

Sau đó chạy command:

tsc

Lúc này trình biên dịch sẽ tìm tất cả các files có phần đuổi là .ts để biên dịch sang files js và lưu chúng vào thư mục js:
7f608a6e 28dc 4f4b a791 b974bf430a97

Trường hợp mình không muốn biên dịch files có đuôi mở rộng .ts trong thư mục css, thì mình sẽ cập nhật code trong file tsconfig.json:

{
    "compilerOptions": {
        "outDir"    : "js",
    },
    "exclude": [
        "css",
    ]
}

Tiếp tục xóa thư mục css trong thư mục js đi và chạy lại command:

tsc

Output:
Trình biên dịch sẽ bỏ qua các files có đuôi .ts trong thư mục css
f36e32c2 2478 4761 9b1e 9b95abeb972d

Có một vấn đề là mỗi lần mình thay đổi nội dung trong file .ts mình đều phải chạy lại trình biên dịch bằng command tsc.
Để giải quyết vấn đề này mình sẽ thêm options watch vào file tsconfig.json như dưới:

{
    "compilerOptions": {
        "outDir"    : "js",
        "watch"     : true
    },
    "exclude": [
        "css",
    ]
}

Sau đó chạy command:

tsc

Trinh biên dịch ở chế độ watch mode(chế độ này sẽ tự động kiểm tra thay thổi trong file .ts nhé)
211e0f11 2ba6 4f91 9320 3058521fd4a4

Khi bạn thay đổi code trong file .ts và nhấn lưu trình biên dịch sẽ tự động kiểm tra và biên dịch code bên dưới:
dac5889c fe32 4ad1 8109 75fc64a63904

Tiếp tục cập nhật code trong file tsconfig.json với một số options như target, module, removeComments :

{
    "compilerOptions": {
        "target"    : "ES6",
        "module"    : "commonjs",
        "outDir"    : "js",
        "watch"     : true,
        "removeComments" : true,
    },
    "exclude": [
        "css",
    ]
}
  • Option target cho phép biên dịch code Typescript sang kiểu ES6
  • CommonJS là tiêu chuẩn được sử dụng trong Node.js để làm việc với các module
  • Option removeComments để remove comments khi biên dịch sáng file js

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *