12/08/2018, 14:28

TypeScript - Các kiểu dữ diệu cơ bản (Bacsic Type)

Như mọi người đã biết, AngularJS 2 hỗ trợ TypeScript và Javascript(có thể xem ở đây). Trong bài viết này, mình sẽ giới thiệu với các bạn về các kiểu dữ liệu cơ bản trong TypeScript. 1. Giới Thiệu TypeSCript là tập cha của JavaScript, có nghĩa là: Mọi chương trình JavaScript đều là một ...

Như mọi người đã biết, AngularJS 2 hỗ trợ TypeScript và Javascript(có thể xem ở đây). Trong bài viết này, mình sẽ giới thiệu với các bạn về các kiểu dữ liệu cơ bản trong TypeScript.

1. Giới Thiệu

  • TypeSCript là tập cha của JavaScript, có nghĩa là: Mọi chương trình JavaScript đều là một chương trình TypeScript và về bản chất thì từ TypeScript, chúng ta sử dụng trình complier của TypeScript để biên dịch ra JavaScript(Mình nghĩ cũng gần tương tự với việc SCSS -> CSS) vì trình duyệt chỉ hiểu JavaScript.
  • Vì như trên, TypeScript hỗ trợ tất cả các kiểu dữ liệu của JavaScript và bổ sung thêm một số kiểu dữ liệu hiện đại để giúp cho lập trình viên làm việc dễ dàng hơn.

2. Boolean

Một trong những kiểu dữ liệu cơ bản nhất là giá trị truefalse, với JavaScript và TypeScript được gọi là boolean

let isDone: boolean = false;

3. Number

Cũng như JavaScript tất cả số trong TypeScript đều là số thực dâú phẩy động(floating point), tất cả những số thực dấu phâỷ động đều có kiểu dữ liệu là number, ngoài hệ thập lục phân(hexadecimal) và thập phân(decimal literals), TypeScript còn hỗ trợ hệ nhị phân(binary) và bát phân)(octal literals) được giới thiệu trong ES6.

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

4. String

  • Một phần quan trọng của JavaScript là làm việc với các dữ liệu văn bản(textual data). Cũng như các ngôn ngữ lập trình khác, TypeScript sử dụng kiểu string để chỉ kiểu dữ liệu văn bản. Cũng tuơng tự JavaScript, TypeScript cũng sử dụng dấu nháy kép (") hoặc dấu nháy đơn (') bao quanh văn bản.
let color: string = "blue";
color = 'red';
  • Bạn cũng có thể sử dụng Template String để có thể thêm biểu thức, biến vào trong string, chuỗi string được bao quang bởi dấu nháy đơn (') và biểu thức nhúng có dạng $( ). Ví dụ đoạn code sau:
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.`

Sẽ tương đương với

let sentence: string = "Hello, my name is " + fullName + ".

" +
    "I'll be " + (age + 1) + " years old next month."

5. Array Cũng như JavaScript, typescript cho phép bạn làm việc với mảng các giá trị. Array có thể được khai báo bằng hai cách sau:

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

6. Tuple

tuple cho phép bạn khai báo mảng với các giá trị có kiểu dữ liệu mà bạn đã biết. Như ví dụ dưới đây

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

7. Enum

Một bổ sung hữu ích cho các kiểu dữ liệu cơ bản từ javascript là enum. Cũng giống như C#, enum là một cách để đặt những cái tên thân thiện hơn với bộ giá trị số.

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

Hoặc như sau:

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

Một tính năng tiện dụng của enum là bạn cũng có thể đi từ một giá trị số để tên của giá trị đó trong enum. Ví dụ, nếu chúng ta có giá trị 2 nhưng không chắc chắn những gì mà ánh xạ đến trong enum color ở trên, chúng ta có thể tìm kiếm tên tương ứng.

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

alert(colorName);

8. Any

Đôi khi chúng ta cần một kiểu dữ liệu mà chúng ta không biết chắc chắn kiểu dữ liệu của nó, những giá trị này là nội dung động như từ một thư viện khác hoặc người dùng nhập. Để làm như vậy, chúng ta sử dụng any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Any cũng rất thuận tiện khi bạn chỉ biết chắc chắn kiểu dữ liệu ở một phần của mảng, còn các phần khác thì không.

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

list[1] = 100;

9. void

Có lẽ mọi người đã quen thuộc với void trên C#, có nghĩa là hàm sẽ không trả về giá trị gì.

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

sử dụng biến kiểu void là không hữu ích lắm vì bạn chỉ có thể gán 2 giá trị là null và undefined cho biến kiểu void

let unusable: void = undefined;

10. Null và Undefined

Với typescript cả null và unidefined đều là 2 kiểu dữ liệu với tên tuơng ứng.

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

Mặc định null và unidefined đều là subtype của các kiểu dữ liệu khác, bạn có thể gán null và unidefined cho các biến với các kiểu dữ liệu khác như number, string...

11.

0