Như bài trước mình đã nói, series này phù hợp nhất với những bạn đã có căn bản về JavaScript, cho nên mình khuyến khích các bạn hãy học tìm hiểu trước về Javascript để có thể học một cách hiệu quả nhất.

Ở bài học này, chúng ta sẽ nghiên cứu một chút về JavaScript, lịch sử hình thành của TypeScript, cách thức nó hoạt động cũng như một số thuật ngữ của nó.

Đôi lời về JavaScript

Lịch sử của JavaScript

Cho những bạn chưa biết, JavaScript được ra đời từ năm 1995 bở Netscape Communications, với mục đích ban đầu là tạo ra một ngôn ngữ kịch bản (scripting language) cho các trang web tĩnh và đơn giản. Qua nhiều năm phát triển và xây dựng cộng đồng, JavaScript đã liên tục ra mắt các phiên bản mới và có khả năng hỗ trợ, phù hợp với các trang web động như chúng ta thấy hiện nay.

Nhiều bạn sẽ thắc mắc vì sao nó có tên là JavaScript, liệu nó có giống với Java – một ngôn ngữ cực kỳ nổi tiếng và thông dụng ? Câu trả lời là nó không giống với Java nhưng có liên quan tới Java, vào thời điểm ra mắt, Java là một ngôn ngữ rất hot trên thế giới lập trình web, cho nên các nhà phát triển đã xây dựng nó có cú pháp gần giống nhất với Java , đó là lý do cái tên JavaScript được ra đời.

Ưu nhược điểm của JavaScript

JavaScript được thiết kế rất linh hoạt và phù hợp với các ứng dụng nhỏ, đơn giản cho nên chúng cực kỳ dễ học, đặc biệt là cho những người mới tiếp cận lập trình, bản thân mình lúc bắt đầu học lập trình, mình cũng chọn JavaScript để học các thuật toán, cũng như rèn luyện tư duy lập trình. Nó là scripting language nên nó cực kỳ nhẹ, không phức tạp như các ngôn ngữ khác

Không chỉ làm website, ngày nay JavaScript đã có một hệ sinh thái khủng để làm các lĩnh vực khác như:

• Web & WebApp
• Server
• Game
• Mobile & SmartWatch app
• IoT
• Robot, Drone,..
• …

Đa dụng là thế, nhưng nó lại không thực sự phù hợp với các hệ thống lớn, có độ phức tạp cao hay quy mô khủng bởi JavaScript không có kiểu dữ liệu chính thống, cho nên việc kiểm soát chất lượng code, debug khá là khó khăn cũng như có thể dẫn đến những vấn đề ngoài ý muốn.

TypeScript là gì ?

Năm 2012 Microsoft công bố dự án TypeScript của họ, kết hợp được sự chặt chẽ của các ngôn ngữ khác cũng như sự linh hoạt từ JavaScript và nhận được rất nhiều phản hồi tích cực từ người dùng và cộng đồng.

TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale.

https://www.typescriptlang.org/

Có thể hiểu đơn giản là TypeScript chính là một ngôn ngữ lập trình được sinh ra từ việc thêm type (các kiểu dữ liệu) vào JavaScript + các tính năng mới, những tính năng sau này được JavaScript cập nhật luôn vào các bản official của nó như class, arrow function + ECMAScript ( là đặc tả xác định chức năng mà ngôn ngữ JavaScript dự kiến ​​sẽ triển khai. Về mặt kỹ thuật, JavaScript là một triển khai của tiêu chuẩn ECMAScript ) + nhiều features khác giúp cấu trúc được chặt chẽ hơn, hạn chế bug cũng như áp dụng được nhiều design pattern hơn cho nó, những phần này chúng ta sẽ nghiên cứu kỹ hơn ở các phần sau.

TypeScript code is a superset of JavaScript code—it has all the features of traditional JavaScript but adds some new features.

TS = JS + ES + type + features….

Ngày nay, TS là một trong những ngôn ngữ được yêu thích nhất bởi các lập trình viên, cái này mình đã nói kỹ ở phần trước, các bạn có thể đọc lại tại đây nhé.

TypeScript hoạt động như thế nào?

• TypeScript code được triển khai trong các file có đuôi mở rộng là .ts
• Sau khi hoàn thành code, chạy các .ts file qua TypeScript Transpiler, nó sẽ kiểm tra xem code có đúng, tuân thủ theo các quy tắc hay không và đồng thời sẽ bắn lỗi nếu như có sai sót. Nếu như không có lỗi gì, transpiler sẽ tạo ra một file .js từ nó.

Workflow nó sẽ là như vậy, bây giờ chúng ta sẽ đi vào chi tiết nhé:

Cài đặt TypeScript

Để cài đặt TypeScript thì có rất nhiều cách, ở bài viết này mình sẽ giới thiệu bạn 2 cách cơ bản nhất và dễ sử dụng nhất nhé.

Cách 1: Sử dụng TypeScript plugin thông qua TextEditor, IDE

Với mỗi Text Editor, IDE thì đều có những cách cài cắm plugin riêng. Ở đây mình khuyến khích mọi người chọn Visual Studio bởi vì TypeScript và VisualStudio đều là con cưng của Microsoft, đây là một combo rất tốt cho các developers, hệ sinh thái plugins, extensions của Visual Studio cũng rất phong phú và chất lượng + nhẹ cũng là một điểm cộng lớn so với các app khác . Cách cài đặt chi tiết có thể tham khảo tại đây. Hoặc có thể cài riêng biệt Visual Studio rồi sau đó tải TypeScript extension để cài đặt trực tiếp

Cách 2: Sử dụng NPM

Step 1: Cài đặt NodeJS: Bạn có thể xem trực tiếp trang chủ của NodeJS, lựa chọn phiên bản phù hợp với máy mình sử dụng hoặc có thể tìm hiểu từ các bài viết khác của yeulaptrinh.vn nhé. Mình sẽ không đi vào chi tiết phần này nữa.

Step 2: Install TypeScript

$ npm install -g typescript

added 1 package, and audited 2 packages in 8s

found 0 vulnerabilities

Bạn có thể kiểm tra xem đã cài đặt thành công hay chưa hoặc là kiểm tra phiên bản của tsc

$ tsc -v                    
Version 4.4.3

tsc – TypeScript Compiler được coi là xương sống của nhiều plugins, bundlers và tools làm việc với TypeScript, tuy nhiên tsc thường không được sử dụng trực tiếp mà sẽ được tích hợp sẵn vào trong các bundlers khi chúng ta làm việc.

Greeting example

Bây giờ chúng ta sẽ cùng đi vào một ví dụ, tạo một file .ts để cùng xem flow nhé

Đầu tiên chúng ta tạo file greeting.ts với nội dung như sau:

const siteName: String = 'yeulaptrinh.vn'

function greeting(name: String) {
	return 'Welcome to ' + name
}

console.log(greeting(siteName))

// greeting.ts

Ở đây mình sẽ tạm coi như các bạn đã biết về type String nhé, mình sẽ giải thích ở các phần sau. Sau khi save file, cấu trúc của folder chưa file là như sau:

$ ls                         
greeting.ts

Chúng ta sử dụng tsc để compile (biên dịch) code

$ tsc greeting.ts
$ ls
greeting.js greeting.ts

Chúng ta có thể thấy rằng, một file greeting.js đã được tạo ra, cùng vào xem bên trong nó có gì nhé

var siteName = 'yeulaptrinh.vn';
function greeting(name) {
    return 'Welcome to ' + name;
}
console.log(greeting(siteName));

// greeting.js

$ node greeting.js           
Welcome to yeulaptrinh.vn

Vậy là toàn bộ code từ greeting.ts đã được compile sang greeting.js, bây giờ chúng ta thử làm một trường hợp lỗi nhé, xem nó sẽ làm việc như thế nào nhé.

Bạn không cần phải xoá file greeting.js đi bởi vì khi compile lại, file mới sẽ ghi đè file cũ.

Mình cùng sửa code một tí nhé. Mình cùng thêm một hằng age có type là Number và thay vào function greeting nhé

const siteName: String = 'yeulaptrinh.vn'
const age: Number = 14
function greeting(name: String) {
	return 'Welcome to ' + name
}

console.log(greeting(age))

// greeting.ts

$ tsc greeting.ts 
greeting.ts:7:10 - error TS2345: Argument of type 'Number' is not assignable to parameter of type 'String'.
  Type 'Number' is missing the following properties from type 'String': charAt, charCodeAt, concat, indexOf, and 15 more.

7 greeting(age)
           ~~~


Found 1 error.

Như vậy, lỗi đã được báo ngay trong quá trình compile code do trong greeting.ts chúng ta đã khai báo function greeting nhận tham số có type là String nhưng lại truyền Number vào.

Vậy là đã kết thích bài đầu tiên trong series học 15 phút mỗi ngày cùng yeulaptrinh.vn mình đã giới thiệu cho các bạn một lượt về lịch sử của JavaScript, lý do và lịch sử ra đời của TypeScript cũng như đi vào một ví dụ chi tiết với TypeScript.

Hi vọng bài viết sẽ có ích với bạn cũng như mong chờ nhận được phản hồi từ các bạn để mình hoàn thiện hơn. Cùng đón chờ những bài tiếp theo của chúng mình nhé.