Bài 03: TypeScript Basic Types

Trong bài này chúng ta sẽ tìm hiểu về các kiểu dữ liệu và cách khai báo trong TypeScript.

Khi học bất kì một ngôn ngữ nào chúng ta cũng thao tác với các kiểu dữ liệu căn bản như: float, int, boolean, string, array, ... Trong TypeScript cũng cung cấp các kiểu dữ liệu căn bản như vậy, ngoài ra nó còn cung cấp nhiều kiểu dữ liệu rất hay khác như: any, never, void, ... và trong bài này chúng ta sẽ cùng học các kiểu dữ liệu này nhé.

1. Khai báo biến trong TypeScript

Cũng như Javascript chúng ta có thể sử dụng từ khóa var hoặc let để khai báo biến, riêng từ khóa let thường được sư dụng trong ES6 nên nó chỉ chạy ở các trình duyệt phiên bản mới thôi nhé các bạn. Tuy nhiên các bạn đừng lo bởi vì bây giờ hầu hết trình duyệt đã hỗ trợ ES6.

Ví dụ: Khai báo biên trong TypeScript

Bài viết này được đăng tại [free tuts .net]

var domain = 'freetuts.net';
let email = 'thehalfheart@gmail.com';

Nếu ta muốn xác định kiểu dữ liệu cho biến thì sử dụng cú pháp sau:

TypeScript:

var domain : string = 'freetuts.net';

Kết quả Javascript :

var domain = 'freetuts.net';

2. Các kiểu dữ liệu trong TypeScript

Sau đây là danh sách các kiểu dữ liệu trong TypeScript.

Kiểu Boolean

Kiểu boolean có hai giá trị là true hoặc false và cả Javascript lẫn TypeScript đều gọi là boolean.

TypeScript:

let isDone: boolean = false;

Kết quả Javascript:

var isDone = false;

Kiểu Number

Cũng tương tự như trong Javascript thì trong TypeScript chỉ tồn tại một kiểu Number, còn việc phân chia các kiểu nhỏ hơn như số nguyên, só thực sẽ phụ thuộc vào giá trị mà bạn gán cho nó. TypeScript cũng hỗ trợ kiểu nhị phân và bát phân được giới thiệu trong ECMAScript 2015.

TypeScript:

var decimal: number = 12;
var hex: number = 0xf00d;
var binary: number = 0b1010;
var octal: number = 0o744;

Kết quả Javascript:

var decimal = 12;
var hex = 0xf00d;
var binary = 10;
var octal = 484;

Kiểu String

Kiểu string đơn giản là một chuỗi (một đoạn text) được bao bọc bởi cặp ký tự ' hoặc ".

TypeScript:

let username: string = 'thehalfheart';

Kết quả Javascript:

var username = 'thehalfheart';

Kiểu Array

Để khai báo kiểu Array trong TypeScript thì chúng ta có hai cách, cách thứ nhất chúng ta sử dụng cặp dấu [] đặt ở đằng sau kiểu dữ liệu.

let students: string[] = ['Cuong', 'Kinh', 'Chinh'];

Cách thứ hai chúng ta sử dụng từ khóa Array<type> để khai báo.

let students: Array<string> = ['Cuong', 'Kinh', 'Chinh'];

Kiểu Tuple

Tuple là kiểu dữ liệu đặc biệt có thể chứa nhiều giá trị với nhiều kiểu dữ liệu con khác nhau. Thực ra Tuple là một mảng nhưng đã xác định được số phần tử và kiểu dữ liệu cho mỗi phần tử đó. Ví dụ mình khai báo biên student gồm hai thông tin đó là tên và tuổi thì lúc này tên sẽ là kiểu string còn tuổi sẽ là kiểu number.

TypeScript

let student: [string, number] = ['Cuong', 27];

Kết quả Javascript

var student = ['Cuong', 27];

Như vậy thực ra nó là một mảng gồm hai phần tử.

Kiểu Enum

Tương tự như trong C#, Enum là kiểu dữ liệu đặc biệt dùng để tạo một nhóm tên tương ứng với các giá trị là những con số mà ta thiết lập cho nó, cách này sẽ giúp ta dễ dàng nhớ tên hơn.

TypeScript

enum Fruits {Orange, Banana, Mango, Apple};  
let a: Fruits = Fruits.Orange; 
alert(a);

Kết quả Javascript

var Fruits;
(function (Fruits) {
    Fruits[Fruits["Orange"] = 0] = "Orange";
    Fruits[Fruits["Banana"] = 1] = "Banana";
    Fruits[Fruits["Mango"] = 2] = "Mango";
    Fruits[Fruits["Apple"] = 3] = "Apple";
})(Fruits || (Fruits = {}));
;
var a = Fruits.Orange;
alert(a);

Khi chạy chương trình này kết quả sẽ thông báo lên trình duyệt số 0 => như vậy nếu ta không thiết lập giá trị cho chúng thì nó sẽ tính theo thứ tự và bắt đầu bằng 0.

Bây giờ bạn đổi lại đoạn code TypeScript như sau:

TypeScript

enum Fruits {Orange = 12, Banana, Mango, Apple};
let a: Fruits = Fruits.Orange;
alert(a);

Kết quả Javascript

var Fruits;
(function (Fruits) {
    Fruits[Fruits["Orange"] = 12] = "Orange";
    Fruits[Fruits["Banana"] = 13] = "Banana";
    Fruits[Fruits["Mango"] = 14] = "Mango";
    Fruits[Fruits["Apple"] = 15] = "Apple";
})(Fruits || (Fruits = {}));
;
var a = Fruits.Orange;
alert(a);

Nhìn vào đoạn code biên dịch bạn dễ dàng đoán được số thứ tự sẽ bắt đầu từ 12.

=> Vậy để thiết lập giá trị cho từng phần tử thì ta gán trực tiếp cho chúng bằng dấu =.

Kiểu Any

Đây là kiểu dữ liệu thoải mái nhất bởi nó cho phép bạn gán giá trị với kiểu dữ liệu bất kì, điều này giúp giải quyết rắc rối ở một số trường hợp, ví dụ ta cần lấy dữ liệu từ người dùng hoặc một thư viện khác thì ta không biết giá trị trả về sẽ ở kiểu dữ liệu nào nên ta sẽ sử dụng kiểu Any để tránh lỗi. Sau đây là một ví dụ từ trang chủ của nó.

TypeScript

let notSure: any = 4; // kiểu number
notSure = "Thay thế bằng kiểu string";
notSure = false; // bây giờ lại là kiểu boolean

Kết quả Javascript

var notSure = 4; // kiểu number
notSure = "Thay thế bằng kiểu string";
notSure = false; // bây giờ là kiểu boolean

Ngoài các dữ liệu đơn giản thì Any còn kết hợp được với cả các kiểu phức tạp, ví dụ:

let list: any[] = [1, true, "free"];

Kiểu Void

Trong C# thì khi muốn khai báo một hàm không có giá trị trả về thì ta sẽ sử dụng hàm void, tuy ta hay gọi là hàm void nhưng thực ra nó là một kiểu dữ liệu với giá trị là null, trong TypeScript thì có thêm giá trị undefined.

function showMessage(): void {
    alert("Success!");
}

let unusable: void = undefined;

Kiểu Null và Undefined

Cả hai kiểu này đều là giá trị của kiểu void, và cũng tương tự thì hai kiểu này rất ít sử dụng trong quá trình xây dựng dự án.

let u: undefined = undefined;
let n: null = null;

Như vậy là mình đã giới thiệu sơ lược về một số kiểu dữ liệu căn bản thường dùng trong TypeScript, vẫn còn một số kiểu nâng cao nữa nhưng mình sẽ trình bày ở một bài khác.

3. Lời kết

Trong bài viết mình có tham khảo nội dung từ trang chủ của TypeScript nên nếu bạn nào giỏi tiếng Anh có thể lên đó đọc sẽ tiện hơn, còn nếu bạn không rành tiếng Anh thì mình nghĩ nên đọc bài này vì dù gì tiếng Việt vẫn là tiếng mẹ đẻ của người Việt :)