TypeScript phần 2 : Cách cài đặt và chạy những dòng lệnh đơn giản

Cài đặt TypeScript

Làm sao để chạy được đoạn mã TypeScript

TypeScript cần biên dịch thành JavaScript trước khi khởi chạy

Cài đặt trình biên dịch TypeScript và run đoạn mã sau khi biên dịch

Bước 1 : Cài đặt NodeJS

• Truy cập vào link để tải NodeJS và cài đặt : https://nodejs.org/en/download/
• Sau khi tải và cài đặt, gõ command để kiểm tra version : 

$ node -v
$ npm -v

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

• Sử dụng npm để cài đặt :

$ npm install -g typescript

• Kiểm tra version sau khi cài đặt hoàn tất :

$ tsc -v

Bước 3 : Biên dịch từ TypeScript thành JavaScript

• Tạo một file demo.ts ​​với đoạn code như bên dưới :

let message: string = "Welcome to MEVN"
console.log(message)

• Biên dịch file demo.ts → demo.js

$ tsc demo.ts

• Ta sẽ thấy một file demo.js được sinh ra
• Command trên chỉ biên dịch demo.ts → demo.js 1 lần, nếu có thay đổi source code trên demo.ts thì cần phải lặp lại command trên để biên dịch lại. Nếu muốn tự động biên dịch khi có thay đổi ở file demo.ts thì ta thêm –watch sau command trên

$ tsc demo.ts --watch // hot-reload

Bước 4 : Chạy đoạn mã sau biên dịch (file demo.js)

$ node demo.js // Welcome to MEVN

Các kiến thức cơ bản nhất về TypeScript

Khai báo biến

Cú pháp chung

<từ khóa> <tên biến>: <[kiểu dữ 1 | kiểu dữ liệu 2 | ]> = <giá trị>

Ví dụ :

const GenderMan: number = 1
var gender: number | string = "male"
let genders: Array<string> = ["female", "male"]  
 
console.log(GenderMan, gender, genders) // 1 male [ 'female', 'male' ]

Khai báo hàm

• Hàm với kiểu dữ liệu tường minh :

function welcome(name: string): string {
   return "Welcome to " + name
}
 
console.log(welcome("MEVN")) // Welcome to MEVN

• Hàm với kiểu dữ liệu không tường minh, lúc này chúng ta dùng một từ vựng nào đó để thay thế kiểu dữ liệu mà ta không xác định trước, trong ví dụ này mình sử dụng là Type

const welcome = <Type>(name: Type): string => {
   if (typeof name === "string") return "Welcome to " + name
 
   return typeof name
}
 
console.log(welcome("MEVN")) // Welcome to MEVN
console.log(welcome({message: "Welcome to", name: "MEVN"})) // object

Hàm chồng

Khi một chức năng cần xử lý một logic chung nhưng số lượng đối số khác nhau thì lúc này chúng ta có thể nghĩ đến kỹ thuật này.

Ví dụ: Tạo một ngày, có thể tạo từ một timestamp hoặc từ năm, tháng và ngày

function createDate(timestamp: number): Date;
function createDate(year: number, month: number, day: number): Date;
 
function createDate(timestampOrYear: number, month?: number, day?: number): Date {
   if (month !== undefined && day !== undefined) return new Date(timestampOrYear, month, day)
   return new Date(timestampOrYear)
}
 
console.log(createDate(20192022)) // 1970-01-01T05:36:32.022Z
console.log(createDate(2019, 12, 1)) // 2019-12-31T17:00:00.000Z

Any

Khi không xác định kiểu dữ liệu chính xác, ta có thể sử dụng any. Hạn chế sử dụng kiểu dữ liệu này, vì nếu các bạn quá lạm dụng nó thì thôi các bạn quay lại JavaScript cho nó lành.

let anyVariable: any = "Welcome to MEVN"
anyVariable = {recruit: "https://www.marketenterprise.vn/#recruit", message: "Welcome to MEVN"}
 
console.log(anyVariable)
/* {
recruit: 'https://www.marketenterprise.vn/#recruit',
message: 'Welcome to MEVN'
} */

Bạn có thể tìm hiểu rõ hơn về TypeScript trong những bài viết dưới đây :

• TypeScript phần 1 : Tại sao nên sử dụng TypeScript?