Code ví dụ TypeScript, hướng dẫn tạo project TypeScript

3878

Bài viết được sự cho phép của tác giả Trần Hữu Cương

Code ví dụ TypeScript, hướng dẫn tạo project TypeScript

Yêu cầu: đã hiểu biết về javascript/nodejs.Biết cách sử dụng npm (Xem lại: Hướng dẫn NodeJs)

Việc làm Typescript lương cao up to 2000USD

1. Tạo TypeScript project

Trong ví dụ này, mình sẽ tạo Project TypeScript với tên là typescript-project

Tạo folder typescript-project:

mkdir typescript-project

Vào foder typescript-project:

cd typescript-project

Khởi tạo project nodejs (bước này có thể bỏ qua, vì khi bạn cài đặt package nào đó nó cũng tự động tạo file package.json rồi. Xem lại Tạo nodejs project)

Code ví dụ TypeScript, hướng dẫn tạo project TypeScript

Cài thư viện (package) typescript:

npm i typescript --save-dev

*Lưu ý: ở đây mình dùng option --save-dev vì package typescript chỉ cần thiết cho môi trường dev. Sau khi build project thành các file .js thì package typescript không cần thiết.

Sau khi cài xong package typescript thì ta có thể khởi tạo project TypeScript bằng lệnh:

npx tsc --init

Lệnh này sẽ tạo ra file tsconfig.json, chứa cấu hình của project TypeScript như: file js được build ra chỗ nào? những file nào sẽ được build…

Hướng dẫn tạo project TypeScript chi tiết, ví dụ TypeScript

Đây là cấu  trúc project typescript-project được sinh ra

Code ví dụ TypeScript, hướng dẫn tạo project TypeScript

File tsconfig.json mình sẽ sửa lại đơn giản như sau:

{

"compilerOptions": {

"target": "es6",

"module": "commonjs",

"strict": true,

"outDir": "dist",

"sourceMap": true

}

}

Ý nghĩa của các field trong file tsconfig.json thì các bạn có thể đọc ở comment trong file sau khi được sinh ra ở trên. Ở đây mình giải thích lại một số field mình dùng:

  • "target": "es6" các file .js được generate từ file .ts sẽ được format theo chuẩn es6
  • "outDir": "dist" các file .js được sinh ra ở folder dist
  Authorization Code grant type với Proof Key for Code Exchange (PKCE) trong OAuth 2.1
  Các kiểu dữ liệu trong lập trình C/C++ (Data type)

2. Code ví dụ TypeScript

Mình sẽ tạo file index.ts trong folder src với nội dung sau: (thường thì 1 project sẽ chứa code trong folder src)

class Demo {

 message: string;




 constructor(message: string){

this.message = message;

}




public hello() {

 console.log(this.message);

}

}




const demo = new Demo('hello world');

 demo.hello();

Hướng dẫn tạo project TypeScript chi tiết, ví dụ TypeScript

Đọc code file index.ts ta sẽ thấy nó khá giống với Java hay .Net, cho chỉ rõ kiểu dữ liệu của biến…

3. Thực hiện compile project TypeScript

Để build project typescript, ta chạy lệnh:

npx tsc

Hướng dẫn tạo project TypeScript chi tiết, ví dụ TypeScript

Như bạn thấy, file .js được tạo ra trong folder dist

Hướng dẫn tạo project TypeScript chi tiết, ví dụ TypeScript

Bạn cũng có thể thực hiện build và chạy project typescript bằng cách thêm script vào trong file package.json

Ví dụ mình thêm script “start”: “tsc && node dist/index.js” vào file package.json

Khi chạy thì chỉ cần gõ lệnh npm start

Hướng dẫn tạo project TypeScript chi tiết, ví dụ TypeScript

Download code ví dụ trên tại đây hoặc tại https://github.com/stackjava/typescript-project

References: https://www.typescriptlang.org/docs/

Bài viết gốc được đăng tải tại stackjava.com

Có thể bạn quan tâm:

Xem thêm Việc làm IT hấp dẫn trên TopDev