Tìm hiểu về TypeScript

Typescript là gì?

TypeScript cho phép bạn viết Javascript theo cách mà bạn thực sự muốn. Typescript là tập cha của JavaScript, cho phép biên dịch thành Jascript, với các bổ sung các tuỳ chọn kiểu tĩnh và lớp trên cơ sở lập trình hướng đối tượng tương tự như C# hoặc Java. Anders Hejlsberg, kiến trúc sư ngôn ngữ C# và là người tạo ra ngôn ngữ Delphi và Turbo Pascal đã tham gia phát triển TypeScript. TypeScript có thể sử dụng để phát triển ứng dụng chạy phía client, hay phía server (Node.js)

Và có 1 câu nói của Anders Hejlsberg rất hay:

What if we could strengthen JavaScript with the things that are missing for large scale application development, like static typing, classes [and] modules . . . that’s what TypeScript is about.

Cài đặt và biên dịch code

Install NodeJs: https://nodejs.org/en/
Chạy lệnh sau để install TypeScript:

npm install -g typescript

Compile:

tsc <file name>.ts

Kết quả là sẽ có 1 file <file name>.js cùng tên nằm cùng thư mục với với <file name>.ts

Giả sử bạn có đoạn code được lưu trong file app.ts

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Gõ lệnh: tsc app.ts, bạn sẽ có file app.js với nội dung

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

Sử dụng công cụ online để biên dịch typescript

Bạn vào trang: https://www.typescriptlang.org/play/ để code Typescript và biên dịch thành Javascript. Bạn bấm Run để chạy kết quả Javascript. Một tab mới sẽ được mở ra. Bấm F12 để xem kết quả.

Cấu trúc một file TypeScript

Modules Functions Variables Statements and Expressions Comments

Kiểu dữ liệu

Basic Types:

Trong TypeScript chia ra làm 7 loại cơ bản, bao gồm: boolean, number, string, array, enum, any, void. Khi khai báo ta sẽ sử dụng cấu trúc như sau:

var [identifier] : [type-annotation] = value;
var [identifier] : [type-annotation];
var [identifier] = value;

// primitive type annotation
var name: string = 'Steve';
var heightInCentimeters: number = 182.88;
var isActive: boolean = true;
// array type annotation
var names: string[] = ['James', 'Nick', 'Rebecca', 'Lily'];
// function annotation with parameter type annotation and return type annotation
var sayHello: (name: string) => string;
// implementation of sayHello function
sayHello = function (name: string) {
return 'Hello ' + name;
};
// object type annotation
var person: { name: string; heightInCentimeters: number; };
// Implementation of a person object
person = {
name: 'Mark',
heightInCentimeters: 183
};

Complex types

Trường hợp bạn cần 1 kiểu dữ liệu phức tạp để miêu tả cho 1 đối tượng, vd đối tượng Person, thì bạn sẽ nghĩ ngay đến class. Trong TypeScript, bạn sử dụng interface

interface Person {
    name: string;
    heightInCentimeters: number;
}
var person: Person = {
    name: 'Mark',
    heightInCentimeters: 183
}

Với kiểu Array, bạn có 2 cách khai báo:

var list: boolean[] = [true, false];
var isDone: Array = [true, false];

Enum: khi khai báo enum một cách thông thường các phần tử sẽ được đánh số từ 0 và tăng dần

enum Color{Red, Green, Blue};
var c: Color = Color.Green
var colorName = Color[1] // kết quả sẽ là Green

Any: Any là một kiểu mà bạn có thể gán bất kỳ kiểu nào cho nó.

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // khai báo này hoàn toàn được chấp nhận. 
                 // nếu notSure ban đầu khai báo và number thì
                 // tại đây chắc chắn sẽ có lỗi

var list:any[] = [1, true, "free"]; // nếu sử dụng var list:number[] thì
                                    // tất cả các phần tử trong list sẽ phải là kiểu number
list[1] = 100;

Void: Cũng giống như any nhưng void được sử dụng là đầu ra của hàm.

function warnUser(): void {
 alert("This is my warning message");

Tóm lại, các loại dữ liệu được nêu ở trên sẽ được phân cách như hình sau:

Tham khảo

https://www.tutorialspoint.com/typescript/
http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB