Lập Trình

TypeScript là gì? Hướng dẫn cài đặt và sử dụng chi tiết

18974

TypeScript chắc hẳn không quá xa lạ đối với các lập trình viên, tuy nhiên, bạn có thật sự hiểu hết về TypeScript, giữa TypeScript và JavaScript có mối quan hệ gì không? Trong bài viết hôm nay của TopDev, chúng ta sẽ cùng tìm hiểu cặn kẽ TypeScript là gì và tại sao nên sử dụng ngôn ngữ này thay vì các ngôn ngữ lập trình khác.

TypeScript Là gì?

TypeScript (viết tắt là TS) là một ngôn ngữ lập trình mã nguồn mở (OOP) được phát triển và duy trì bởi Microsoft vào năm 2012. TypeScript được xem là một phần mở rộng của JavaScript, sử dụng cú pháp của JavaScript và bổ sung thêm các tính năng mạnh mẽ như kiểu tĩnh và hướng đối tượng để hỗ trợ Type (các kiểu dữ liệu).

TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type.

Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng một file và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của JavaScript và mở rộng nó bằng một loạt tính năng mới. Nhờ đó mà hiệu năng làm việc được tăng lên đáng kể.

Tuy nhiên một project viết bằng TypeScript cần có compiler (trình biên dịch) để biên dịch những dòng code đó thành JavaScript để browser có thể đọc hiểu được. Tại sao vậy? Nhắc lại kiến thức căn bản đó là browser chỉ hiểu được HTML, CSS và JavaScript, vì vậy cần phải có TypeScript Compiler.

Tham khảo thêm các việc làm Typescript lương cao cho bạn.

Tính năng hướng đối tượng của TypeScript

Khi tạo class Human và có thể tạo các instance bằng từ khóa mới. Một khi gán đối tượng Human(), chúng ta không cần phải khai báo lại kiểu của chúng. Điều này được TypeScript thực hiện tự động.

Trong Lập trình Hướng đối tượng, chúng ta có một phương thức quan trọng được gọi là constructor(). Mỗi lớp đều cung cấp một phương thức constructor mặc định, và thường được sử dụng để tạo một instance của lớp đó

Trong Lập trình Hướng đối tượng, các từ khóa truy cập (access modifiers) được sử dụng để giới hạn hoặc cho phép truy cập vào các biến của một lớp từ bên ngoài.

Có ba loại từ khóa truy cập khác nhau:

Public: Cho phép truy cập từ bên ngoài lớp.
Private: Không cho phép truy cập từ bên ngoài lớp.
Protected: Chỉ cho phép truy cập trong một lớp và các lớp dẫn xuất từ nó.

Tại sao nên sử dụng TypeScript?

Vậy tại sao nên viết code bằng TS thay vì JS như truyền thống?

Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framework lớn.
Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kế thừa, đóng gói, constructor, abstract, interface, implement, override…v.v
Cách tổ chức code rõ ràng hơn, hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều lập trình viên có thể làm việc cùng nhau một cách dễ dàng hơn.
Hỗ trợ các tính năng mới nhất của Javascript. TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6).
Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộng đồng hỗ trợ rất lớn.
Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn.

Bởi các ưu điểm trên, nếu bạn đang triển khai các dự án lớn, cần nhiều framework khác (Angular, Nodejs, Ionic…) hỗ trợ thì TypeScript sẽ là lựa chọn tốt hơn so với JS, nó giúp bạn kiểm soát được dữ liệu và debug dễ hơn. Tuy nhiên, nếu dự án của bạn ít tính phức tạp thì JS sẽ phù hợp hơn.

3 Tips hữu dụng TypeScript cho Angular 4

Hướng dẫn cài đặt TypeScript

Bước 1: Cài đặt Node.js và npm

Trước hết, bạn cần cài đặt Node.js và npm. Bạn có thể tải Node.js từ trang web chính thức Node.js. Khi cài đặt Node.js, npm cũng sẽ được cài đặt cùng.

- Chọn phiên bản LTS (Long Term Support) và tải về.
- Thực hiện theo các hướng dẫn để cài đặt.
- Sau khi tải xuống và cài đặt thành công, mở command prompt/terminal và chạy lệnh sau để kiểm tra:

node -v
npm -v

Bước 2: Cài đặt TypeScript

Sau khi cài đặt Node.js và npm, bạn có thể cài đặt TypeScript thông qua npm.

Cài đặt TypeScript toàn cầu: Chạy lệnh sau trong terminal:

npm install -g typescript

Kiểm tra cài đặt TypeScript: Kiểm tra xem TypeScript đã được cài đặt thành công bằng cách chạy lệnh sau:

tsc -v

Cài đặt TypeScript trong một dự án cụ thể

Nếu bạn muốn cài đặt TypeScript cho một dự án cụ thể, bạn có thể cài đặt nó dưới dạng một devDependency trong thư mục dự án của bạn.

Tạo một thư mục dự án mới:

mkdir my-typescript-project
cd my-typescript-project

Khởi tạo một dự án npm mới:
```
npm init -y
```
Cài đặt TypeScript cục bộ cho dự án:
```
npm install --save-dev typescript
```

Tạo tệp cấu hình TypeScript (tsconfig.json): Tạo một tệp tsconfig.json trong thư mục dự án của bạn để cấu hình TypeScript:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}

4. Viết và biên dịch mã TypeScript

Tạo thư mục và tệp mã nguồn:
```
mkdir src
touch src/index.ts
```

Viết mã TypeScript: Mở tệp src/index.ts và viết mã TypeScript của bạn:

// src/index.ts
const greeting: string = "Hello, TypeScript!";
console.log(greeting);

Biên dịch mã TypeScript: Chạy lệnh sau để biên dịch mã TypeScript thành JavaScript:
```
npx tsc
```
Chạy mã JavaScript đã biên dịch: Mã đã biên dịch sẽ được lưu trong thư mục dist. Chạy mã JavaScript bằng Node.js:
```
node dist/index.js
```

Các Text Editor hỗ trợ TypeScript

Hiện nay, rất nhiều text editor và IDE hỗ trợ sẵn hoặc thông qua các plugin để hỗ trợ cú pháp của TypeScript, auto-complete suggestions, bắt lỗi và thậm chí tích hợp sẵn trình biên dịch.

Visual Studio Code – Một trình soạn thảo mã nguồn mở của Microsoft. Hỗ trợ sẵn TypeScipt.
Plugin cho Sublime Text
Phiên bản mới nhất của WebStorm cũng hỗ trợ TypeScript
Và nhiều trình soạn thảo khác như Vim, Atom, Emacs …

Tips: Khi dùng Visual Studio Code, ta có thể tách khung soạn thảo code ra làm hai phần. Một phần dùng để viết code TypeScript, phần còn lại sẽ tự động hiển thị code JavaScript được biên dịch. Với tính năng này, ta vừa viết code TypeScript vừa có thể xem code JavaScript được sinh ra khi nhấn Save.

Lời kết

TypeScript vẫn đang liên tục được phát triển, nếu bạn đọc được bài viết này thì chắc hẳn bạn là một dev JS (Nếu không phải tôi khuyên bạn nên tiếp cận JS ES6 trước khi học Typesript). Vì vậy trong khuôn khổ bài viết tôi sẽ không chỉ rõ cách sử dụng cơ bản. Bạn nên tham khảo thêm tại website của TypeScript để cập nhật tính năng mới.

Tuyển dụng lập trình Typescript mới nhất tại Topdev