Typescript cơ bản cho người mới phần 1

Chào các bạn nha, lâu lắm rồi mình mới viết lại bài viết mới trên blog của mình. Mình đã thay đổi giao diện cho hiện đại một chút rồi có cảm hứng viết bài mới. Bài mới này mình viết về Typescript. Vậy Typescript là gì ? Tại sao lại nên học Typescript ? Thì chúng ta cùng tìm hiểu ngay sau đây.

Lưu ý: Các bạn phải có kiến thức về Javascript cơ bản trước khi đọc bài này nhé.

Typescript là gì ?

Typescript là một ngôn ngữ lập trình mã nguồn mở được phát triển bởi Microsoft. Nó là một phiên bản mở rộng của Javascript, giúp làm cho việc phát triển ứng dụng web và ứng dụng quản lý code Javascript trở nên dễ dàng và hiệu quả hơn.

Typescript cung cấp các tính năng mới và cải tiến so với Javascript, bao gồm kiểu dữ liệu tĩnh, cú pháp mở rộng, các khái niệm của lập trình hướng đối tượng và hỗ trợ cho việc viết mã theo mô hình module.

Nói tóm gọn lại là Typescript giúp chúng ta viết code được tường minh hơn, dễ bảo trì và dễ tái sử dụng hơn.

Cài đặt Typescript

Bước 1: Đầu tiên các bạn cần cài đặt NodeJS, các bạn vào trang chủ của NodeJS sau đó tải bản LTS để đảm bảo tính ổn định nhé.

Bước 2: Sau khi cài đặt NodeJS thành công các bạn có thể kiểm tra bằng việc mở VSCode Terminal(ctrl + `) lên và gõ lệnh node -v.

Tiếp đến là cài đặt Typescript thông qua lệnh sau trong VSCode Terminal.

npm install -g typescript

Lệnh trên sẽ cài đặt TypeScript toàn cục trên máy tính của bạn.

Bước 3: Để kiểm tra xem đã cài đặt thành công hay chưa thì các bạn gõ thêm lệnh sau để xem nó có hiển thị ra version hay không.

tsc --version

Bây giờ mở VSCode lên, các bạn tạo một file bất kỳ(ví dụ: typescript.ts) và chúng ta bắt đầu học những thứ cơ bản về Typescript thôi nào.

Basic Types

Đầu tiên chúng ta sẽ cần học về những Types đơn giản như những Primitives Datatypes ở trong Javascript như number, string, boolean hoặc Non-Primitives như object, array. Cứ viết code như Javascript bình thường nhưng chúng ta thêm sau tên biến dấu 2 chấm ví dụ như const name: string = 'evondev' thì cái chữ string chính là type của biến name đó.

Các bạn dùng từ khóa const thì không nói, nhưng khi dùng từ khóa var hoặc let thì có thể thay đổi giá trị, tuy nhiên trong Typescript khi các bạn viết như này nó sẽ lỗi ngay.

let age: number = 29;
age = 'evondev';
// Type 'string' is not assignable to type 'number'.

Bởi vì kiểu dữ liệu của biến age đang là number, nhưng ở dưới các bạn lại đổi lại là string, vậy là không được. Chương trình sẽ bắn ra một cái lỗi như ở trên đại loại là ‘Kiểu string không được gán cho kiểu number’.

Đối với Javascript thì không có báo lỗi gì hết, nhưng ở Typescript như mình đề cập ở đầu bài là nó sẽ giúp code của chúng ta tường minh hơn, nhất quán, dễ bảo trì hơn là thế. Khai báo kiểu dữ liệu number là number, không thể là kiểu khác được. Trừ khi chúng ta sử dụng một Type khác như Union Type( tìm hiểu sau nhé ).

Dưới đây là những ví dụ đơn giản khác cho các bạn dễ hình dung, các bạn thấy là chúng ta phải code dài hơn Javascript thuần đúng không ? Nhưng không sao, vì mục đích code dễ bảo trì, dễ tái sử dụng, dễ hiểu thì phải cố gắng thôi

let age: number = 29;
const myName: string = 'evondev';
const amIDev: boolean = true;

Một lưu ý là khi các bạn khai báo những kiểu dữ liệu đơn giản(number, boolean, string, null, undefined) như này thì không cần viết dấu 2 chấm phía sau kèm Type cũng hoạt động tốt, Typescript sẽ tự động hiểu và thêm vào cho chúng ta. Tuy nhiên mới học thì nên tập viết để tạo thói quen các bạn nhé.

let age = 29;
// hover: let age: number

Những kiểu dữ liệu như ở trên mình nghĩ chắc là khá đơn giản với các bạn nhỉ ? Nếu các bạn thấy ổn rồi thì chúng ta tiếp tục xuống dưới học tiếp các Type tiếp theo là Object và Array nhé.

Object hay Array là kiến thức quan trọng các bạn cần có khi học Javascript, Object là một tập hợp key value, còn Array là một danh sách chứa các phần tử, các phần tử có thể là các kiểu dữ liệu như number, boolean, string, object, array… object thì có value là number, boolean hoặc thậm chí là một object khác.

Mình sẽ ví dụ một object đơn giản với Javascript và với Typescript để các bạn dễ hình dung với student bao gồm các thông tin cơ bản như sau:

// No declare type, typescript will automatically fill types
const student = {
  name: "tran anh tuan",
  age: 30,
  school: "Cao Thang",
  hobbies: ["Badminton", "Coding"],
  height: "170cm",
};

// Declare type
const student: {
  name: string;
  age: number;
  school: string;
  hobbies: string[];
  height: string;
} = {
  name: "tran anh tuan",
  age: 30,
  school: "Cao Thang",
  hobbies: ["Badminton", "Coding"],
  height: "170cm",
};

Lúc này các bạn sẽ thấy một điều khác là khi các bạn tự điền và khi các bạn không điền Type(viết như Javascript thuần) cho biến đó chính là khi các bạn thêm key mới vào object thì tự khắc Typescript cũng tự thêm Type vào tương ứng(No declare type), nhưng nếu các bạn viết như dòng trên(Declare type) mà các bạn thêm một key nào đó không tồn tại khi các bạn khai báo vào ở dưới nó sẽ lỗi ngay

const student: {
  name: string;
  age: number;
  school: string;
  hobbies: string[];
  height: string;
} = {
  name: "tran anh tuan",
  age: 30,
  school: "Cao Thang",
  hobbies: ["Badminton", "Coding"],
  height: "170cm",
  drink: "coffee"
};
// Type '{ name: string; age: number; school: string; hobbies: string[]; height: string; drink: string; }' 
// is not assignable to type '{ name: string; age: number; school: string; hobbies: string[]; height: string; }'.

Nó ra một cái lỗi khá là dài đại loại là bạn khai báo Type của student không có key nào là drink cả nhưng bạn lại sử dụng drink: "coffee" vào student nên lỗi. Từ đó nó giúp code chúng ta nhất quán, chính xác, đặc biệt khi các bạn làm việc với API, dữ liệu trả về không hề có trường drink chẳng hạn, mà các bạn lại dùng như res.drink là nó sẽ bắn ra lỗi và chương trình dừng chạy ngay lập tức, không build dự án được.

Ở trong object student ở trên các bạn có thấy dòng hobbies: string[] không ? Nó chính là Array Type trong Typescript đó. Nó hoạt động như sau, Type[] hoặc Array<Type> , dấu [] đại diện cho Array, còn Type là các Types mà các bạn muốn sử dụng. Mình ví dụ cho các bạn các trường hợp đúng và sai để các bạn lưu ý nhé

const hobbies: string[] = ['Badminton', 'Coffee', 'Coding']; // Declare string array, all values are string
const books: string[] = ['Harry Potter', 1, false]; // Error: Declare string array but some values not string

Vậy giả sử đôi khi Array chúng ta lại có cả string, number, boolean và nhiều Types khác thì sao ? Làm sao để khai báo chúng đây, lúc này chúng ta sẽ học thêm một Type mới đó chính là Union Type mà mình nãy có đề cập.

Union Type

Type này nghĩa là hoặc(type | anothertype | othertype), tức là có thể vừa Type này vừa Type nọ, có thể là number hoặc string, có thể là boolean hoặc number… Quay lại vấn đề lúc đầu mình có nói nếu các bạn khai báo age là number sau lại khai báo age là string thì nó sẽ lỗi, tuy nhiên khi các bạn dùng Union thì có thể sẽ khắc phục được khi khai báo như sau

let age2: number | string = '30';
age2 = 30;

Tại sao lại viết như trên vì có vài trường hợp là dữ liệu không nhất quán lúc thì trả về 30 lúc thì ’30’ đại loại thế nên chúng ta khai báo vậy cho chắc cú đó mà.

Khi chúng ta đã nắm được cơ bản về Union Type rồi thì có thể quay lại áp dụng cho mảng gồm nhiều giá trị khác nhau như đoạn code dưới đây, các Types sẽ được bọc trong dấu () nhé

const names: (string | number | boolean)[] = ["evondev", 30, false];
const names2: Array<string | number | boolean> = ["evondev", 30, false];

Lưu ý là các giá trị trong mảng không nhất thiết phải theo thứ tự khai báo Type, các bạn để loạn xạ cũng được như này, miễn sao các giá trị đó phải nằm 1 trong 3 các Types đã khai báo là ổn áp thôi.

const names2: Array<string | number | boolean> = [
  "evondev",
  false,
  true,
  true,
  "study",
  1000,
  9999,
];

Tạm kết

Ngoài ra còn rất nhiều Types trong Typescript, nhưng mình sẽ giới thiệu tiếp cho các bạn ở bài sau. Ở bài này chúng ta đã tìm hiểu cơ bản nhất về việc cài đặt Typescript và tìm hiểu các kiểu thông thường rồi.

Ở bài tới mình sẽ chia sẻ tiếp các Types khác như any, unknow, never, enum, tuple, literal cho các bạn nhé. Cám ơn các bạn đã luôn theo dõi mình và đọc bài này. Chúc các bạn học tập thật tốt, nếu có gì khó khăn cứ bình luận ở dưới nha.