TypeScript Handbook (Phần 1) - BasicType

Nội dung được giới thiệu trong bài viết này

Tổng hợp các kiểu dữ liệu của TypeScript từ trang handbook trong loạt bài về TypeScript. BasicType

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;

JavaScript

var isDone = false;

Number

Tất cả giá trị số đều là kiểu number sử dụng dấu phẩy động, 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ó. Không chỉ hỗ trợ hệ thập lục phân (hexa), thập phân (decimal) mà còn hỗ trợ cả hệ bát phân và nhị phân.(Nhưng chắc là hiếm khi sử dụng hệ bát phân và hệ nhị phân.)

TypeScript

let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744;

JavaScript

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

String

Giá trị biến kiểu string được đặt trong ngoặc đơn hoặc ngoặc kép

TypeScript

let color: string = "blue"; color = 'red';

JavaScript

var color = "blue"; color = 'red';

• Chuỗi được đặt trong dấu Backquote(cái dấu này blog công ty mình không gõ được lên mọi người tìm google là ra nhé!), có thể thêm biến vào trong chuỗi bằng các đặt biến vào trong biểu thức ${ expr } (Để trống vào trong cũng OK.)

TypeScript

let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`

JavaScript

var fullName = "Bob Bobbington"; var age = 37; var sentence = "Hello, my name is " + fullName + ".\n\nI'll be " + (age + 1) + " years old next month.";

Sử dụng theo cách này tiện lợi hơn. Hơn nữa nó sẽ tự xuống dòng mà không phải thêm \n

Array

Kiểu mảng có 2 cách để khai báo. Các phần tử của mảng đều chung 1 kiểu dữ liệu.

TypeScript

let list1: number[] = [1, 2, 3]; let list2: Array<number> = [1, 2, 3];

JavaScript

var list1 = [1, 2, 3]; var list2 = [1, 2, 3];

Tuple

Tuple là một tập các phần tử nhưng khác với kiểu mảng là các phần tử có kiểu dữ liệu khác nhau. Cần phải định nghĩa kiểu dữ liệu cho tất cả cá phần tử của mảng.

TypeScript

// Khai báo kieur tuple let x: [string, number]; // Khởi tạo x = ["hello", 10]; // OK // Khởi tạo sai x = [10, "hello"]; // Lỗi

JavaScript

// Khai báo var x; // Khởi tạo x = ["hello", 10]; // OK // Khởi tạo sai x = [10, "hello"]; // Lỗi

Khi cần truy cập đến các phần tử của nó thi có thể truy cập bằng index

TypeScript

console.log(x[0].substr(1)); // OK console.log(x[1].substr(1)); // Lỗi. Phần tử thứ 2 la kiểu number nên không thể sử dụng substr

Trường hợp truy cập đến phần tử ngoài phạm vi đã khai báo, nó sẽ tự lặp lại kiểu dữ liệu cho các phần tử tiếp theo.

TypeScript

x[3] = "world"; // OK。 Có thể thêm 'string' theo tuần tự 'string | number' console.log(x[5].toString()); // OK。 Kiểu 'string' và 'number' đều có thể gọi toString x[6] = true; // Lỗi。 Không thểm thêm biến kiểu 'boolean' vì không them thứ tự 'string | number'

Enum

TypeScript có thêm kiểu Enum. JavaScript không có kiểu Enum nhưng khi compile ra JavaScript thì đây là một cách làm tuyệt vời.

TypeScript

enum Color {Red, Green, Blue}; let c: Color = Color.Green;

JavaScript

var Color; (function (Color) { Color[Color["Red"] = 0] = "Red"; Color[Color["Green"] = 1] = "Green"; Color[Color["Blue"] = 2] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green;

Biến Enum tự đánh số mặc định từ 0, nhưng chúng ta cũng có thể tự đánh số mà mình thích vào

TypeScript

enum Color {Red = 1, Green, Blue}; let c: Color = Color.Green;

JavaScript

var Color; (function (Color) { Color[Color["Red"] = 1] = "Red"; Color[Color["Green"] = 2] = "Green"; Color[Color["Blue"] = 3] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green;

Cũng có thế đánh só cho tất cả phần tử của Enum.

TypeScript

enum Color {Red = 1, Green = 2, Blue = 4}; let c: Color = Color.Green;

JavaScript

var Color; (function (Color) { Color[Color["Red"] = 1] = "Red"; Color[Color["Green"] = 2] = "Green"; Color[Color["Blue"] = 4] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green;

Khi đánh index cho phần tử của Enum rồi, có thể dùng index này để lấy phần từ của Enum.

TypeScript

enum Color {Red = 1, Green, Blue}; let colorName: string = Color[2]; alert(colorName); // Green

JavaScript

var Color; (function (Color) { Color[Color["Red"] = 1] = "Red"; Color[Color["Green"] = 2] = "Green"; Color[Color["Blue"] = 3] = "Blue"; })(Color || (Color = {})); ; var colorName = Color[2]; alert(colorName); // Green

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; notSure = "maybe a string instead"; notSure = false; // bây giờ là boolean

JavaScript

var notSure = 4; notSure = "maybe a string instead"; notSure = false; // bây giờ là boolean

Kiểu Object trong TypeScript cũng khá giống với kiểu Any nhưng kiểu Any thì gọi được method còn kiểu Object không thể gọi được method.

TypeScript

let notSure: any = 4; notSure.ifItExists(); // OK。 notSure.toFixed(); // OK ; let prettySure: Object = 4; prettySure.toFixed(); // Lỗi

Kiểu Any có thể sử dụng chung với các kiểu dữ liệu khác

TypeScript

let list: any[] = [1, true, "free"]; // Mảng có thể bao gồm kiểu any list[1] = 100;

JavaScript

var list = [1, true, "free"]; // Mảng có thể bao gồm kiểu any list[1] = 100;

Void

Void đại diện cho trường hợp không có kiểu dữ liệu. Hay được sử dụng trong các function không trả về dữ liệu.

TypeScript

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

JavaScript

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

Biến Void chỉ được gán là undefined hoặc null.

TypeScript

let unusable: void = undefined;

Null và Undefined

Kiểu Null và kiểu Undefined chỉ được gắn với giá trị tương ứng như kiểu của nó.

TypeScript

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

Có thể gán mặc định null và undefined cho kiểu dữ liệu khác nhưng khi thêm flag --strictNullChecks thì chỉ có thể gán cho kiểu void hoặc gán đúng từng loại. Trong trường muốn gán null và undefined có thể sử dụng kiểu chung (VD: string | null | undefined)

Trên trang chủ của TypeScript họ khuyến khích nên sử dụng --strictNullChecks

Never

Kiểu Never biểu thị việc không trả về giá trị gì.(Sử dụng cái này có vẻ hơi khó)

TypeScript

// function này throw ra Error nên nó sẽ không chạy đc đến cuối cùng function error(message: string): never { throw new Error(message); } ; // Nếu trả return kêt quả cảu function trả về kiểu never thì giá trị trả về hàm này cũng kiểu never function fail() : never { return error("Something failed"); } ; // Hàm này chạy vong lặp vô hạn cũng không chạy đến cuối cùng function infiniteLoop(): never { while (true) { } }

Type assertions

Đây là dạng ép kiểu trong TypeScript

TypeScript

let someValue: any = "this is a string"; ; let strLength1: number = (<string>someValue).length; let strLength2: number = (someValue as string).length;

JavaScript

var someValue = "this is a string"; ; var strLength1 = someValue.length; var strLength2 = someValue.length;

Trường hợp sử dụng JSX chỉ có thể ép kiểu được style.