Introduction
- Như chúng ta đã biết JS là ngôn ngữ kiểu
[dynamic type](https://en.wikipedia.org/wiki/Programming_language#Static_versus_dynamic_typing)
. - Typescript giúp có thể đọc và code JS như
static type
thay vìdynamic type
. - Bài viết này chú trọng tới cài đặt một dự án với typescript.
Let’s start
- Initializing an Npm project
- Cùng khởi tạo nhanh project NodeJS:1234$ <span class="token function">mkdir</span> node_project$ <span class="token function">cd</span> node_project$ <span class="token function">npm</span> init -y
- Installing Dependencies
- Chúng ta khởi tạo xong project. Phần tiếp theo cần cài đặt các gói phụ thuộc để có thể chạy được
typescript
123<span class="token function">npm</span> i -D typescript<span class="token function">npm</span> i -D tslint - Option
-D
viết tắt cho:--save-dev
. - Tiếp theo cài đặt
express
framework:123<span class="token function">npm</span> i express -S<span class="token function">npm</span> i @types/express -D - Câu lệnh thứ hai trên cài đặt Express types. Sở dĩ chúng ta cần package này vì TypeScript và Express là các package độc lập nhau do vậy không có cách nào để
Typescript
biết về các kiểu của cácclasss
trong Express.
- Configuring TypeScript
- Typescript sử dụng file
tsconfig.json
để cấu hình trình biên dịch cho project. Do vậy chúng ta khởi tạo filetsconfig.json
cùng cấp với filepackage.json
với nội dung như dưới:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token punctuation">{</span> <span class="token property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"module"</span><span class="token operator">:</span> <span class="token string">"commonjs"</span><span class="token punctuation">,</span> <span class="token property">"esModuleInterop"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"target"</span><span class="token operator">:</span> <span class="token string">"es6"</span><span class="token punctuation">,</span> <span class="token property">"moduleResolution"</span><span class="token operator">:</span> <span class="token string">"node"</span><span class="token punctuation">,</span> <span class="token property">"sourceMap"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token property">"outDir"</span><span class="token operator">:</span> <span class="token string">"dist"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"lib"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"es2015"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- Cùng nhìn qua một vài tùy chọn trên và chúng làm gì:
module
: Chỉ định phương thức khởi tạo module. Node sử dụngcommonjs
.target
: Level của output ( ở đây là es6)moduleResolution
: giúp trình biên dịch tìm ra việcimport
sẽ tham chiếu tới đâu. Giá trịnode
-> bắt chước cơ chế phân phân giải module củanode
.outDir
: Nơi lưu file.js
sau khi được biên dịch. Chúng ta lưu trong folderdist
.
- Note: Bạn có thể làm việc này tự động bằng câu lệnh:
tsc --init
- Tiếp theo chúng ta sẽ cấu hình Typescript linting cho project. Chạy câu lệnh sau để khởi tạo file
tslint.json
:
1 2 | ./node_modules/.bin/tslint --init |
- Mở file
tslint.json
và thêm tùy chọnno-console
như dưới:
1 2 3 4 5 6 7 8 9 10 | <span class="token punctuation">{</span> <span class="token property">"defaultSeverity"</span><span class="token operator">:</span> <span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token property">"extends"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"tslint:recommended"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"jsRules"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"rules"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"no-console"</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"rulesDirectory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- Theo mặc định, Typescript linter sẽ chặn
console
, muốn sử dụng chúng ta cần thêm rule như trên.
- Updating the Package.json file
- Cùng tạo script
start
giúp chúng ta biên dịch codeTypescript
ra file.js
và chạy chúng. Cập nhật lại filepackage.json
như dưới:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"node_project"</span><span class="token punctuation">,</span> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"dist/app.js"</span><span class="token punctuation">,</span> <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"echo "Error: no test specified" && exit 1"</span><span class="token punctuation">,</span> <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"tsc && node dist/app.js"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"ISC"</span><span class="token punctuation">,</span> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"@types/express"</span><span class="token operator">:</span> <span class="token string">"^4.17.2"</span><span class="token punctuation">,</span> <span class="token property">"tslint"</span><span class="token operator">:</span> <span class="token string">"^5.20.1"</span><span class="token punctuation">,</span> <span class="token property">"typescript"</span><span class="token operator">:</span> <span class="token string">"^3.7.4"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"express"</span><span class="token operator">:</span> <span class="token string">"^4.17.1"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- Chúng ta đã cập nhật lại
main
path. Và tạo scriptstart
: khởi chạytsc
trước và sao đó chạy lệnhnode
. Việc này cho phép chúng ta biên dịch trước và chạy kết quả sau khi biên dịch vớinode
.
- Setting up the folder structure
- Chúng ta sẽ tạo folder
src
cùng cấp với filepackage.json
và tạo một fileapp.ts
bên trong nó như dưới:
1 2 3 4 | mkdir src cd src touch app.ts |
- Đến thời điểm này bạn nên có cấu trúc thư mục như dưới:
1 2 3 4 5 6 7 8 9 10 | . ├── package.json ├── package-lock.json ├── src │ └── app.ts ├── tsconfig.json └── tslint.json 1 directory, 5 files |
- Create and running a basic Express Server
- Chúng ta đã cấu hình Typescript và Typescript linter, tiếp theo chúng ta sẽ xây dựng Node Express Server. Với nội dung trong file
app.ts
như dưới.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">import</span> express <span class="token keyword">from</span> <span class="token string">"express"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token number">3000</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">"The sedulous hyena ate the antelope!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>port<span class="token punctuation">,</span> err <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`server is listening on </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Đoạn code trên tạo một server Node đơn giản lắng nghe trên port 3000. Cùng chạy ứng dụng với câu lệnh sau.
1 2 | npm start |
- Khi câu lệnh thực thi hoàn tất bạn nên thấy thông báo server đang chạy trên port 3000:
1 2 3 4 | > tsc && node dist/app.js server is listening on 3000 |
- Và cấu trúc thư mục sẽ trông như thế này ( folder dist được “xinh” ra với các file bên trong):
1 2 3 4 5 6 7 8 9 10 11 12 13 | . ├── dist │ ├── app.js │ └── app.js.map ├── package.json ├── package-lock.json ├── src │ └── app.ts ├── tsconfig.json └── tslint.json 2 directories, 7 files |
- Bạn cũng có thể truy cập local với đường link:
localhost:3000
.
1 2 3 | curl localhost:3000 The sedulous hyena ate the antelope! |
- Nếu muốn bạn cũng có thể mở file
dist/app.js
để xem phiên phản biên dịch củaTypescript
code. - Nice! như vậy chúng ta đã setup thành công cho project Node sử dụng Typescript!
Conclusion
- Cảm ơn bạn đã theo dõi tới đây và chúc bạn:
Happy coding with Typescript