Lập trình

Học TypeScript trong vòng 26 phút 59 giây

Ngôn ngữ lập trình Typescript là gì và học Typescript có khó không? Với đủ các ví dụ cụ thể rất dễ học và tham khảo.

Sau 10 tiếng ngồi debug và viết Front-end cho dự án mình đang phát triển cùng các partner, mình lại ngồi đây để nói về ngôn ngữ lập trình TypeScript, và chia sẻ với các bạn mới học Typescript. Chỉ 30 phút học hỏi, có thể các bạn sẽ thành thạo ngay lập tức bởi Typescript thực chất chỉ là một công cụ giúp viết Javascript theo một cách khác, một cách chặt chẽ.

Chúc mừng các bạn đã thành công, thành công bởi các bạn đang được đọc tài liệu vô cùng chi tiết, được chia sẻ bởi một người có nhiều kinh nghiệm lập trình Javascript. Có phần thực hành ở tận gần cuối, các bạn nếu đã hiểu sơ sơ có thể chuyển tới phần đó!

Nếu bạn lập trình trên Typescript trong vòng 1 tuần, chắc chắn bạn sẽ “nghiện” Typescript. Vì khi gõ, nó tự động check lỗi cho bạn. Trong khi nếu viết bằng Javascript thuần, bạn sẽ gặp những lỗi cực kỳ ngớ ngẩn. Cực kỳ cú, cú ơi là cú!

Cảm giác đầu tiên của những người đang viết Javascript là thoải mái, thoải mái đúng nghĩa. Bởi Javascript là ngôn ngữ Dynamic typing. Hay từ khác gọi là Free-type. Bạn không cần phải nghĩ và xác định kiểu cho biến, cho hàm nào đó mà cứ thế mà viết. Nhưng khi vào tay TypeScript, các bạn cần phải viết code theo dạng giống như Strong typed language như Java, hay .NET. Và cái cảm giác ấy vô cùng khó chịu lúc đầu, nhưng càng về sau, các bạn sẽ càng thấy sung sướng. Tin tôi đi, lần đầu tiên tôi cũng ghét TypeScript như gì ấy. Nhưng giờ đây, tôi viết hầu hết các dự án Javascript bằng TypeScript.

Ơ, thế TypeScript là cái gì ? Nó có phải là một ngôn ngữ không?

Ngôn ngữ lập trình TypeScript là gì?

Ngôn ngữ lập trình TypeScript là một dự án mã nguồn mở của Microsoft. , Nó là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu tĩnh tùy chọn vào ngôn ngữ, được phát triển bởi cha đẻ của C# là Anders Hejlsberg. Vào những năm 2012, ông đã cùng đồng nghiệp của mình phát triển TypeScript để các cộng sự có thể viết các dự án lớn bằng Javascript. Khắc phục các nhược điểm của Javascript như thêm Interface, Type hay Class vào trong mã Javascript. Biến Javascript từ Free-typed sang dạng Static Typed trong quá trình phát triển.

Bản chất của TypeScript là sẽ biên dịch mã do lập trình viên viết ra thành Javascript. Tuy nhiên TypeScript sẽ kiểm tra đầu vào và các giá trị của hàm ngay trước khi complied nên tránh được rất nhiều lỗi không mong muốn.

TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules. Và nếu các bạn thân thuộc với Javascript, chắc chắn sẽ nhanh chóng dùng được TypeScript.

So sánh với CoffeScript của Google

TypeScript không phải tiên phong trong việc này. Bên cạnh TypeScript còn có CoffeScript do Google phát triển. Tuy nhiên TypeScript được đón nhận trên toàn thế giới nhờ các cú pháp và câu lệnh gần gũi với Javascript. Như các bạn thấy đó, những lập trình viên Javascript vốn đã thân quen với Javascript sẽ cảm thấy vô cùng thoải mái với TypeScript. Vì nó khá giống nhau về cú pháp.

Ví dụ mã lệnh CoffeScript

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Còn đây là ví dụ về mã TypeScript:

function sum (x: number, y: number) : number {
    return x + y;
}

Cùng biên dịch ra Javascript, nhưng CoffeScript quá lạ lẫm đối với lập trình viên Javascript, còn với TypeScript thì mọi thứ đều gần như tương đồng. Bạn sẽ không khoái học một cái gì đó mới teng ở đây đâu.

TypeScript được sử dụng ở Server-side như NodeJS, và để chạy được trên trình duyệt, bạn cần phải biên dịch sang Javascript.

Nếu các bạn đang quen thuộc với ngôn ngữ C# hoặc Java, thì TypeScript sẽ là lựa chọn tuyệt cú mèo để viết Javascript. Nhưng các bạn cũng nên nhớ, TypeScript giúp lập trình viên xài Javascript chặt chẽ hơn, dễ hiểu và dễ debug hơn, còn nó vẫn là Javascript nhá!

Trình IDE nào hỗ trợ TypeScript?

Các bạn có thể sử dụng của chính chủ Microsoft là Visual Studio Code hoặc dùng Sublime, InteliJI đều có hỗ trợ TypeScript. Nếu chưa có, bạn có thể cài plugin tùy vào trình soạn thảo code tương ứng.

Ngôn ngữ lập trình TypeScript bắt lỗi ngay tại trình Editor
Ngôn ngữ lập trình TypeScript bắt lỗi ngay tại trình Editor

Cài đặt TypeScript

Để cài đặt, bạn cần có NodeJS. Các bạn có thể tải về và cài đặt NodeJS tại đây!

Mở Terminal lên, gõ lệnh sau đây:

npm i -g typescript

Và, các bạn có thể lập trình Typescript và biên dịch chúng dưới dạng file là .ts và dùng lệnh sau để dịch:

tsc main.ts

Trong trường hợp console báo lỗi “EACCES: permission denied”. Các bạn sẽ phải cài đặt dưới quyền Root bằng lệnh Sudo trước các câu lệnh trên.

Bạn sẽ nhận được một file main.js trong cùng thư mục với file main.ts. Ngoài ra, bạn còn bắt gặp đuôi file .tsx chính là JSX + TYPESCRIPT trong các dự án ReactJS đấy.

Mọi thứ đã sẵn sàng rồi đúng không? Giờ thì mở trình Visual Studio code lên và bắt đầu chơi với TypeScript nào!

Học TypeScript qua ví dụ

Đầu tiên, các bạn cần chú ý một điều rất chi là tiên quyết: Các bạn phải bỏ ngay thói quen Free-typed của Javascript và dấn thân vào một thứ cực kỳ chặt chẽ là TypeScript. Ban đầu bạn sẽ phải mất một thời gian để có thói quen này. Ngoài ra các bạn sẽ cảm thấy ức chế vì hàng loạt lỗi xổ ra cửa sổ soạn code 😀

Các kiểu dữ liệu cần để ý khi học TypeScript

string: kiểu chuỗi

number: kiểu số

string[]: mảng chứa chuỗi

number[]: mảng chứa số

any: Loại nào cũng được

boolean: kiểu dữ liệu đúng sai true/false

void: không trả về cái gì

Tuple: khai báo mảng cho những dữ liệu đã biết, ví dụ:

let ME = [string, number, boolean];
ME = ["Chào", 500, true];

Các bạn có thể tham khảo thêm tại đây: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

Interface

Khai báo một Interface giống như Java để định nghĩa kiểu dữ liệu truyền vào.

interface Maytinh {
	RAM: number;
	CPU?: string; /** Có thể truyền hoặc bỏ qua */
}
function buildComputer(Computer : Maytinh) : void {
	console.log(`My Computer has ${Computer.RAM} and ${Computer.CPU} `);
}

buildComputer({RAM : 16, CPU : 'Intel core duo'});

Các bạn sẽ thấy ở đây, RAM là biến bắt buộc phải có, còn CPU có thể có hoặc có thể không. RAM và CPU được định kiểu dữ liệu là number và string đã khai báo sẵn trên Interface.

Nếu các bạn dịch sang Javascript, Interface sẽ biến mất luôn 😀 vì TypeScript vẫn là giúp các bạn lập trình chặt chẽ chứ bản chất nó là Javascript.

“void” nghĩa là hàm này không có trả về bất kỳ cái gì.

Type trong ngôn ngữ TypeScript

Cũng giống như Interface, type được khai báo trước để định kiểu các biến truyền vào trong hàm.

type Point = {
  x: number;
  y: number;
};

Tuy nhiên, Type ít được sử dụng hơn Interface vì tính linh động của Interface. Và Interface có thể được extend bởi một class.

Class

Trước kia, Javascript không có Class, nhưng sau phiên bản cập nhật ES6 tít về sau này mới có. TypeScript hỗ trợ Class ngay từ đầu:

class Maytinh {
    CPU: string;
    MONITOR: string;
    RAM: number;

    constructor (CPU: string, MONITOR: string, RAM: number) {
        this.CPU = CPU;
        this.MONITOR = MONITOR;
        this.RAM = RAM;
    }

    show() {
        console.log(this.RAM);
    }
}

const Computer = new Maytinh('Intel', '12inch', 8);
Computer.show();

Và đặc biệt, chúng dễ dàng kế thừa:

Class BuyComputer extends Maytinh { ... }

Hàm Generic

Cái này thì bạn nào đang lập trình Java sẽ thấy yêu ngay nè. Hàm Generic hiểu đơn giản là tớ có hàm này này, tớ chưa xác định được kiểu dữ liệu sẽ truyền vào, hoặc truyền vào quá nhiều loại chưa xác định trước được. Okay ta có hàm Generic:

function ger<T>(x : T) : T {
    return x;
}
console.log(ger<string>("ahihi"));

Còn đây là ví dụ về một function khác trong Typescript:

function ABC( input: string ) : void {
   console.log('ABC' + input );
}

Hàm void không trả về cái gì. input của function được định kiểu dữ liệu là String. Tuy nhiên, việc này chỉ là hỗ trợ lập trình viên lập trình đúng, input đúng lúc lập trình, còn thực tế, bạn cần phải ép kiểu cho nó an toàn hơn. Ví dụ như này là ăn chắc nhất:

function ABC (input: string): void {
   let newABC = String( input || ' ');
   console.log(newABC);
}

Okay, ngon hơn rồi đấy!

Modules

Typescript hỗ trợ import modules nên cực kỳ tiện lợi trong phát triển và làm cho code của các bạn minh bạch, tách biệt và có thể làm việc nhóm lớn ngon lành cành đào.

Ví dụ file export.ts

var MeSayHelloJamViet = function(): void {
    console.log("Hello Jamviet.com!");
}
export = MeSayHelloJamViet;

Và ở file import.ts sẽ gọi thế này:

import MeSayHelloJamViet = require('./exporter');
MeSayHelloJamViet();

Dùng Typescript với dự án NodeJS

Typescript có thể dùng với mọi dự án Javascript, bởi nó translate sang Javascript mà. Các bạn có thể dùng nó để gõ Extention cho Chrome, gõ dự án Front-end như ReactJS, hay Angular … Trong phần này chúng ta sẽ sử dụng nó để tạo một dự án Nodejs bất kỳ.

Đầu tiên, tạo một folder và mở Terminal lên nào, gõ:

cd /du-an

Okay, sau đó các bạn gõ lệnh để tạo một dự án NodeJS

npm init

Sau khi bấm Enter mỏi tay, thì dự án trống dành cho Nodejs đã hiện lên. Dự án NodeJS có thể là Micro Server, có thể là bất kỳ cái gì cứ là Javascript là được.

Okay, tiếp tục, ta cài đặt Typescript qua dòng lệnh:

npm i typescript

Yah! Giờ thì dự án của bạn có thể gõ lệnh Typescript và có thể biên dịch các file .TS rồi nhá! Giờ thì mở file tsconfig.json

Bạn chắc chắn rằng: “rootDir”: “./src/”, “target”: “es6”, “outDir”: “./dist/”,

Umm, Giờ bạn vẫn đang ở folder của dự án, bạn tạo folder “src” để chứa source code, “dist” để chứa các file đã được biên dịch sang Javascript từ Typescript.

Chú ý:

  1. rootDir là nơi bạn gõ mã TypeScript với đuôi file .ts
  2. outDir là nơi Typescript sẽ biên dịch từ Typescript ra Javascript
  3. target: có thể là es5 hoặc es6. Tùy bạn chọn, nhưng es5 thì hơi bị cổ. Các bạn tham khảo ES6 tại đây! Nó là các version của Javascript.

Okay, giờ thì các bạn có thể gõ:

tsc -w

Lệnh này nghĩa là biên dịch toàn bộ dự án và -w nghĩa là watch file, bạn chỉ cần gõ lệnh, tự động nó biên dịch sang folder /dist/

Okay, giờ thì bạn cứ gõ, cứ tạo folder ở thư mục SRC, nó tự động tạo thứ tương tự ra DIST folder. Phê thôi rồi luôn! Bạn hoàn toàn có thể giữ source code và upload thư mục dist lên server hoặc chia sẻ cho ai đó. Mặc dù Javascript là ngôn ngữ thông dịch, nhưng trong thư mục DIST nó được tối ưu bởi TypeScript nên chưa chắc ai đó đã thèm lấy 😀 vì nó khá khó dịch ngược, kiểu thế này:

Đây là file TypeScript trong folder SRC
Đây là file TypeScript trong folder SRC

Còn dưới đây là file đã được complied:

Typescript complied thành Javascript
Typescript complied thành Javascript

Đây chỉ là một file đơn giản. Các file phức tạp nhìn nó sẽ rất “trợn” đấy nhá. Như vậy, nhiều khi chúng ta không cần dùng công cụ mã hóa Javascript nữa. Vì nó khá khó để maintain mặc dù ta đọc vẫn hiểu.

Tổng kết học TypeScript

Mặc dù ghi tiêu đề là học TypeScript trong vòng 30 phút nhưng mình cũng phải viết tới 2h đồng hồ. Hi vọng bài viết này sẽ được các bạn đón nhận kẻo phí công phí sức 😀

Ngôn ngữ lập trình TypeScript cuối cùng cũng biên dịch ra Javascript. Cho nên các bạn cần phải học Javascript trước, khi thân thuộc với Javascript, các bạn học TypeScript chỉ trong vòng nốt nhạc mà thôi!

TypeScript được tạo ra là để làm việc với các dự án Javascript lớn và bổ sung các phần còn thiếu của Javascript, cho nên các bạn rất nên dùng TypeScript để một ngày nào đó có thể làm việc trên dự án phức tạp. Ngoài ra, Typescript rất giống với C# hoặc Java, cho nên nếu đã biết sẵn hai ngôn ngữ này, các bạn sẽ nhanh chóng làm việc với TypeScript mà không gặp vướng mắc nào!

>> Giờ thì bạn cũng nên xem thêm các lưu ý khi lập trình Javascript

Và cuối cùng, món quà mình dành cho các bạn: Một git với đầy đủ cấu hình Typescript và Webpack, chỉ việc clone về, chạy npm install là xong!

>> https://github.com/mcjambi/Typescript_Quick_Start

Webpack thì là để tối ưu code của các bạn, khi các bạn dev trên local, mở 2 cửa sổ console và gõ:

  1. npm run dev –> lệnh này để webpack theo dõi và biên dịch toàn bộ code typescript sang javascript và chứa tại folder dist
  2. npm run serve –> cửa sổ này chạy nodemon, nó theo dõi mọi thay đổi trong thư mục dist và chạy ứng dụng.

Nói chung, bạn chỉ cần để ý thư mục src, nơi bạn chứa source code. Bạn dev mọi thứ trên src, kết quả phi ra tự động trên folder dist. Okay?

Và, có rất nhiều bài viết hay ho khác nữa trong chuyên mục lập trình. Các bạn vui lòng đón xem nha! Chúc các bạn vui vẻ!

Thông tin liên quan

Bạn đang xem bài viết học typescript tại blog cá nhân của Jam. Còn rất nhiều các bài viết khác tại chuyên mục Lập trình đang được yêu thích.