-->
ads here
Home BackEnd coding javascript nodeJS Typescript Typescript For Dummy!!!

Typescript For Dummy!!!

advertise here
Javascript (JS) là một ngôn ngữ khá là magic với dynamic type checking. Điều này sẽ khiến cho một số bạn quen sử dụng một số ngôn ngữ static type checking như C# hay Java sẽ có chút bỡ ngỡ khi tiếp xúc với Javascript. Tuy nhiên, đã có một số giải pháp giúp hạn chế vấn đề type checking của JS đó là Typescript và Flow. Trong bài viết này, chúng ta sẽ tìm hiểu về Typescript, một dự án open-source được phát triển bởi Microsoft.
Nội dung của bài viết này gồm các mục sau:

  1. Giới thiệu về Typescript
  2. Cách cấu hình và cài đặt TypeScript
  3. Ví dụ về Typescript
  4. Real-world Application Development
Let's start!

1. Giới thiệu về Typescript

Typescript (TS) là một dự án mã nguồn mở của Microsoft, được xem như một phiên bản mở rộng và nâng cao hơn của JS và code được viết bằng TS sẽ được compile sang dạng JS thuần. Nó được gọi là một bản mở rộng (superset) của JS vì nó được tích hợp thêm nhiều tính năng về static type checking và OOP, và cả ES6.
TS giúp khắc phục các nhược điểm về Type Checking của JS đồng thời hỗ trợ tốt hơn về OOP trên JS. Bên cạnh đó TS hỗ trợ tất cả các công cụ JS trên bất kì trình duyệt nào, bất kì máy chủ nào với bất kì hệ điều hành nào.
Và quan trọng hơn nữa là nó là nguồn mở, được phát triển bởi một "ông lớn" công nghệ là Microsoft và có cộng đồng sử dụng đông đảo.
Image result for type script

2. Cách cấu hình và cài đặt TypeScript

Để sử dụng TS, trước tiên bạn cần có một Editor mà bạn cảm thấy thoải mái nhất. Có rất nhiều editor bạn có thể sử dụng tuỳ thuộc vào thói quen và sở thích. Tuy nhiên trong bài này mình sẽ dùng Visual Studio Code (VS Code) để code TS vì một phần nó đang là trình soạn thảo code mà mình đang dùng và nó được phát triển bởi Microsoft, cùng cha với TS thì chắc ăn sẽ có nhiều đồ chơi hơn cho TS trên VS Code ^^

Vậy là xong phần Editor, tiếp theo chúng ta tiến hành cài đặt TS

Chúng ta tiến hành cài đặt Typescript compiler thông qua npm (Đảm bảo là bạn đã cài NodeJS trước. Nếu chưa có NodeJS, hãy cài theo hướng dẫn ở trang chủ nodejs.org). Mở Terminal và gõ lệnh

 npm install -g typescript

Sau khi cài đặt xong, bạn có thể check bằng lệnh gõ tsc -v trên Terminal, nếu nhận về Version của TS là bạn đã thành công
Cài đặt typescript compiler

Ngoài ra, nếu bạn muốn vọc vạch về TS mà không muốn cài đặt hay cấu hình gì, thì Typescript hỗ trợ một compiler online cho bạn, bạn có thể sử dụng bằng cách truy cập vào Playground từ trang chủ của Typescript.
Typescript Playground
OK, vậy là đã giới thiệu và cài đặt TS thành công, tiếp theo chúng ta sẽ đi sâu vào tìm hiểu xem TS cung cấp cho chúng ta những đồ chơi gì?

3. Ví dụ về Typescript

Để hiểu rõ hơn vì sao Typescript nó lại hỗ trợ JS tốt hơn chúng ta sẽ đi qua một số ví dụ

Ví dụ 1: Compile Typescript thành JS

Lấy một ví dụ đơn giản, ta có file demo.ts như sau:

1:  function greeter(person) {  
2:    return "Hello, " + person;  
3:  }  
4:  let user = "Jane User";  
5:  document.body.innerHTML = greeter(user);

Compile file trên bằng cách gõ tsc demo.ts trên terminal thì ta sẽ được file demo.js như sau:

1:  function greeter(person) {  
2:    return "Hello, " + person;  
3:  }  
4:  var user = "Jane User";  
5:  document.body.innerHTML = greeter(user);

Ta có thể thấy, kết quả sau khi compile gần như không thay đổi gì!

Tuy nhiên khi ta thêm ký hiệu kiểu vào là string và tham số của hàm greeter và ở dòng số 4 của demo.ts, ta đổi biển user trở thành 1 mảng của các số 0, 1, 2 như sau:
1:  function greeter(person: string) {  
2:    return "Hello, " + person;  
3:  }  
4:  let user = [0, 1, 2];  
5:  document.body.innerHTML = greeter(user);

Sau đó compile lại tsc demo.js, ta sẽ nhận được thông báo lỗi

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Khi đó ta thấy, Typescript đã không cho phép chúng ta compile ra JS khi có lỗi về kiểu dữ liệu
Bạn có thể thấy rõ ví dụ này hơn khi dùng playground, Editor sẽ hiển thị warning đỏ để báo cho bạn về lỗi này
Ví dụ chạy trên playground

Ví dụ 2: Interface

Ở ví dụ này, chúng ta tạo một interface tên là Person với 2 thuộc tính fistName và lastName để là string. Hàm greeter sẽ nhận tham số là một interface Person và trả về lời chào Hello kèm theo firstName và lastName của Person đó. File demo2.ts như sau:

1:  interface Person {  
2:    firstName: string;  
3:    lastName: string;  
4:  }  
5:  function greeter(person: Person) {  
6:    return "Hello, " + person.firstName + " " + person.lastName;  
7:  }  
8:  let user = { firstName: "Jane", lastName: "User" };  
9:  document.body.innerHTML = greeter(user);

Sau khi compile ra js ta có, demo2.js:

1:  function greeter(person) {  
2:    return "Hello, " + person.firstName + " " + person.lastName;  
3:  }  
4:  var user = { firstName: "Jane", lastName: "User" };  
5:  document.body.innerHTML = greeter(user);

Tiếp theo ta sẽ thử 2 trường hợp sau
Trường hợp 1: biến truyền vào không có các thuộc tính như của interface Person, bằng cách ta thay firstName thành firstname 

 
1:  interface Person {  
2:    firstName: string;  
3:    lastName: string;  
4:  }  
5:  function greeter(person: Person) {  
6:    return "Hello, " + person.firstName + " " + person.lastName;  
7:  }  
8:  let user = { firstname: "Jane", lastName: "User" };  
9:  document.body.innerHTML = greeter(user);

Sau khi compile ta sẽ thấy thông báo lỗi, báo rằng biến bạn truyền vào hàm greeter không phải là biển kiểu Person, thuộc tính firstName không tìm thấy

error TS2345: Argument of type '{ firstname: string; lastName: string; }' is not assignable to parameter of type 'Person'.  
 Property 'firstName' is missing in type '{ firstname: string; lastName: string; }'.

Khi bạn gõ trên playground hay VS code thì không cần compile, thì warning sẽ được quăng ra để bạn biết
Warning hiển thị trên VS code Editor
Trường hợp 2: thuộc tính trong biến truyền vào có kiểu không đúng như của interface Person, bằng cách ta thay firstName: "Jane" thành firstName: 150

 
1:  interface Person {  
2:   firstName: string;  
3:   lastName: string;  
4:  }  
5:  function greeter(person: Person) {  
6:   return "Hello, " + person.firstName + " " + person.lastName;  
7:  }  
8:  let user = { firstName: 150, lastName: "User" };  
9:  document.body.innerHTML = greeter(user);


Compile ra JS hay xem trực tiếp trên warning từ editor ta sẽ được thông báo lỗi:

error TS2345: Argument of type '{ firstName: number; lastName: string; }' is not assignable to parameter of type 'Person'.  
  Types of property 'firstName' are incompatible.  
   Type 'number' is not assignable to type 'string'.

Ví dụ 3: Class

Ta sẽ tiếp tục mở rộng ví dụ trên và sử dụng class của Typescipt. Ta tạo class Student với thuộc tính fullName có kiểu là string. Hàm khởi tạo constructor nhận 3 tham số kiểu string là firstName, lastName và middleName. demo3.ts

1:  class Student {  
2:    fullName: string;  
3:    constructor(public firstName: string, public middleName: string, public lastName: string) {  
4:      this.fullName = firstName + " " + middleName + " " + lastName;  
5:    }  
6:  }  
7:  interface Person {  
8:    firstName: string;  
9:    lastName: string;  
10:  }  
11:  function greeter(person : Person) {  
12:    return "Hello, " + person.firstName + " " + person.lastName;  
13:  }  
14:  let user = new Student("Huy", "Tan", "Dong");  
15:  document.body.innerHTML = greeter(user);

Compile demo3.ts ta được demo3.js như sau:

1:  var Student = /** @class */ (function () {  
2:    function Student(firstName, middleName, lastName) {  
3:      this.firstName = firstName;  
4:      this.middleName = middleName;  
5:      this.lastName = lastName;  
6:      this.fullName = firstName + " " + middleName + " " + lastName;  
7:    }  
8:    return Student;  
9:  }());  
10:  function greeter(person) {  
11:    return "Hello, " + person.firstName + " " + person.lastName;  
12:  }  
13:  var user = new Student("Huy", "Tan", "Dong");  
14:  document.body.innerHTML = greeter(user);

Nhận xét:

Qua các ví dụ sau ta rút ra được một vài nhận xét:
  • Đúng như cái tên của nó Typescript, TS giúp ta khắc phục được nhược điểm về Dynamic Type Checking của Javascript, nó giúp lập trình viên rảnh tay hơn trong việc phát triển logic của ứng dụng thay vì phải xử lý thêm công việc Type Checking vì đã được TS xử lý
  • TS là tập mở rộng nâng cấp của JS, do đó ta hoàn toàn sử dụng được cú pháp của JS trong TS mà không gặp phải khó khăn gì , khi học TS ta chỉ cần nắm thêm nhưng tính năng mới của TS và những gì đã có sẵn của JS để phát triển ứng dụng
  • Qua ví dụ 3, ta có thể thấy rằng cú pháp khai báo class trong Typescript rất quen thuộc với các ngôn ngữ OOP như Java, C# điển hình là các khải niệm như class, constructor... rất tiện cho các lập trình viên từ các ngôn ngữ Java, C# có thể tiếp cận Typscript một cách dễ dàng hơn
  • Bonus: Typescript vẫn hỗ trợ đầy đủ các tính năng của ES6 cho JS như template string, let and const, for...of loop cũng như arrow function.
Trong phần tiếp theo chúng ta sẽ tìm hiểu cách sử dụng Typescript trong việc phát triển ứng dụng trong thực tế

4. Real-world Application Development

Trong phần này chúng ta sẽ đi vào xây dựng một HTTP server bằng Typescript sử dụng NodeJS và Express JS. Ứng dụng của chúng ta sẽ vô cùng đơn giản đó là tạo một server lắng nghe request, khi chúng ta gửi request GET / sẽ nhận được câu chào "Hello world!"

Chúng bắt đầu thôi!!!

4.1. Khởi tạo một project NodeJS mới

Tạo 1 thư mục mới, đặt tên là demoTS, sau đó dùng terminal di chuyển vào trong thư mục và khởi tạo project bằng lệnh npm init

 $ cd demoTS  
 $ npm init -y

Sau khi khởi tạo project xong, ta xây dựng cấu trúc thư mục như sau:

├── dist
├── package.json
├── src
│   ├── App.ts
│   └── index.ts
└── tsconfig.json
 Trong đó:

  • dist: là thư mục sẽ chứa file *.js sau khi complile từ code Typescript
  • package.json: File này khỏi phải nói ai cũng biết ^^
  • src: là thư mục chứ code TS
  • App.ts: là file hiện thực web server của chúng ta
  • index.ts: là điểm nhập của project
  • tsconfig.json: là file cấu hình cho Typescript, chúng ta có thể tìm hiểu sâu hơn về tsconfig.json tại đây.

4.2. Cấu hình cho project

Trong file package.json, chúng ta cấu hình một số script như sau:

"scripts": {  
   "build": "tcs",  
   "dev": "tsc && node dist",  
   "test": "echo \"Error: no test specified\" && exit 1"  
 },

Tiếp theo ta cấu hình cho Typescript trong file tsconfig.json

 {  
  "compilerOptions": {  
   "target": "es6",  
   "module": "commonjs",  
   "outDir": "dist",  
   "sourceMap": true  
  },  
  "include": [  
   "src/**/*.ts"  
  ],  
  "exclude": [  
   "node_modules"  
  ]  
 }

OK, vậy là phần chuẩn bị đã xong, chúng ta tiến hành hiện thực project.

4.3. Coding

Chúng ta sẽ sử dụng ExpressJS để tạo server và viết 1 hàm mountRoutes để tạo ra các route cho server. Cài đặt express bằng:

 npm i express --save

Trong file App.ts viết đoạn code như sau:

App.ts
Tiếp theo trong file index.js chúng ta sẽ bắt tiến hành gọi server và listen request.

index.ts
Sau khi hiện thực xong file index.ts, chúng ta mở terminal và gõ lệnh sau để thực compile TS ra JS và chạy server:

$ npm run dev

Và sau khi compile xong, thì sẽ có dòng "Listening on port 3000" xuất hiện trên terminal:

Kết quả
Sau đó ta dùng Postman để test thử server bằng cách gửi 1 request GET đến URL: http://localhost:3000/, và được kết quả là một JSON object chứa câu chào Hello world!

Kết quả trả về từ Postman
Done, vậy là chúng ta đã làm một demo nhỏ về Typescript để biết cách sử dụng Typescript trong thực tế như thế nào. Các bạn có thể tìm hiểu thêm về linter trong TS cũng như viết unit test trong TS trong link mình để ở phần tham khảo!
Nếu thấy hay hãy chia sẻ, nếu thấy có vấn đề cần thảo luận hay góp ý các bạn có thể để lại bình luận. Cảm ơn các bạn đã đọc bài viết của mình!

Reference


Advertisement
advertise here
By BackEndcodingjavascriptnodeJSTypescript
Next article Next Post
Previous article Previous Post
COMMENTS ()
Subscribe to: Post Comments (Atom)