Typescript là gì? Mách bạn những kiến thức cần biết để học TypeScript nhanh chóng và hiệu quả nhất

TypeScript là một thuật ngữ phổ biến trong lĩnh vực lập trình máy tính. Loại ngôn ngữ này được biên dịch từ hệ thống JavaScript nhưng có cấu tạo và cách dùng phức tạp hơn. Bài viết hôm nay của FPT Shop sẽ giúp bạn làm quen với tính năng, cách sử dụng TypeScript chuẩn xác. Mời bạn theo dõi ngay!

TypeScript là gì?

TypeScript là một loại ngôn ngữ lập trình mã nguồn mở phân tích tĩnh được phát triển bởi Microsoft. Công nghệ mở rộng cú pháp của JavaScript bằng cách thêm kiểu dữ liệu để hỗ trợ phân tích tĩnh trong quá trình phát triển phần mềm. 

TypeScript cho phép các lập trình viên xây dựng các ứng dụng phức tạp một cách dễ dàng và hiệu quả hơn. Đồng thời, tiện ích  giảm thiểu lỗi và tăng tính bảo mật trong mã nguồn. Nền tảng này được biên dịch thành JavaScript chuẩn để chạy trên môi trường trình duyệt hoặc máy chủ.

Tính ứng dụng của ngôn ngữ TypeScript

Sau khi biết được khái niệm Typescript là gì thì thông tin tiếp theo cần nắm đó là tính ứng dụng của ngôn ngữ Typescript. Việc sử dụng TypeScript mang đến nhiều lợi ích quan trọng, bao gồm:

• Phát triển an toàn hơn: TypeScript hỗ trợ kiểu dữ liệu tĩnh, giúp phát hiện lỗi kiểu dữ liệu và cú pháp ngay từ giai đoạn phân tích mã nguồn, giúp tăng tính ổn định và an toàn của ứng dụng.
• Mã nguồn dễ đọc và bảo trì: Kiểu dữ liệu rõ ràng trong TypeScript giúp mã nguồn trở nên dễ hiểu hơn, đồng thời tạo điều kiện thuận lợi cho việc bảo trì và mở rộng mã nguồn sau này.
• Tăng hiệu suất phát triển: TypeScript cung cấp tính năng IntelliSense và kiểm tra lỗi khi nhập liệu, giúp lập trình viên phát triển ứng dụng một cách nhanh chóng và chính xác hơn.
• Tích hợp tốt với JavaScript: TypeScript là một siêu tập lệnh của JavaScript nên mã nguồn JavaScript hiện có có thể được sử dụng mà không cần chuyển đổi sang hoàn toàn TypeScript, giúp tối ưu sự kết hợp của cả hai ngôn ngữ.
• Hỗ trợ cộng đồng lớn: TypeScript có một cộng đồng người dùng lớn và hoạt động sôi động. Đồng thời được Microsoft và các công ty công nghệ lớn khác đầu tư nhằm đảm bảo sự phát triển dài hạn.

Quy trình cài đặt ngôn ngữ TypeScript

Trước khi tận dụng hàng loạt tiện ích tuyệt vời từ TypeScript, người dùng cần thực hiện quy trình thiết lập ngôn ngữ. Phương án đơn giản và phổ biến nhất mà bạn nên lựa chọn chính là NPM. 

Bạn hãy bắt đầu với việc sử dụng lệnh dưới đây có thể cài đặt TypeScript package toàn cục. Điều này tạo ra điều kiện thuận lợi cho trình biên dịch TypeScript được sử dụng trong mọi dự án:

npm install -g typescriptjavascript:void(0)

Tiếp theo, bạn hãy mở một cửa sổ terminal ở bất kỳ đâu và chạy lệnh tsc -v . Nếu quá trình cài cài đặt diễn ra thành công thì màn hình sẽ hiển thị:

tsc -v

Version 1.8.10

Tổng hợp Text Editor hỗ trợ TypeScript

Trên thị trường hiện có nhiều trình soạn thảo mã (text editor) hoạt động mạnh mẽ và hỗ trợ TypeScript. Dưới đây là một số text editor phổ biến được sử dụng để phát triển TypeScript:

• Visual Studio Code (VS Code): Được phát triển bởi Microsoft, VS Code được xem là một trong những trình soạn thảo mã tốt nhất cho TypeScript. Công nghệ cung cấp khả năng liên kết IntelliSense cho TypeScript, tích hợp trình gỡ lỗi (debugging) và có thể mở rộng thông qua các tiện ích mở rộng (extensions).
• Atom: Atom là một trình soạn thảo mã mã nguồn mở được phát triển bởi GitHub. Nền tảng này cung cấp nhiều giải pháp tốt cho TypeScript thông qua các gói mở rộng có sẵn trên nền tảng của mình.
• Sublime Text: Sublime Text là một trình soạn thảo mã phổ biến và mạnh mẽ. Công cụ có khả năng hỗ trợ TypeScript thông qua các gói mở rộng bên ngoài.
• WebStorm: Được phát triển bởi JetBrains, WebStorm là một IDE (Integrated Development Environment) chuyên nghiệp có hỗ trợ tiện ích tích hợp cho TypeScript và đem lại nhiều tính năng đặc biệt dành cho ngôn ngữ này.
• Eclipse: Eclipse là một IDE phổ biến trong cộng đồng Java, nhưng thông qua các plugin như "TypeScript IDE" sẽ có ý nghĩa hỗ trợ phát triển TypeScript.

Phương thức Biên dịch sang JavaScript

Để biên dịch mã nguồn TypeScript sang JavaScript, bạn có thể sử dụng TypeScript Compiler (tsc). Đầu tiên, hãy cài đặt TypeScript thông qua NPM nếu chưa có:

npm install -g typescript

Sau đó, bạn có thể sử dụng lệnh sau để biên dịch tệp mã nguồn TypeScript thành JavaScript:

tsc filename.ts

Trong đó, filename.ts là tên tệp mã nguồn TypeScript mà bạn muốn biên dịch. Khi lệnh này được thực thi, TypeScript Compiler (tsc) sẽ tạo ra một tệp JavaScript tương ứng với tên filename.js.

Nếu bạn muốn biên dịch tất cả các tệp TypeScript trong một thư mục, bạn có thể chạy lệnh sau:

tsc

Lệnh này sẽ biên dịch tất cả các tệp mã nguồn TypeScript có phần mở rộng .ts trong thư mục hiện tại và tạo ra các tệp JavaScript tương ứng. Sau khi thực hiện các bước trên, mã nguồn TypeScript sẽ được biên dịch thành mã JavaScript và sẵn sàng để chạy trên trình duyệt hoặc máy chủ của bạn.

Static Typing

Static Typing là một phương pháp trong lập trình mà các kiểu dữ liệu của biến được xác định tại thời điểm biên dịch và không thay đổi trong quá trình chạy chương trình. Khi sử dụng Static Typing, bạn phải xác định kiểu dữ liệu cho mỗi biến trước khi sử dụng nó và biên dịch sẽ kiểm tra tính đúng đắn của kiểu dữ liệu này.

Việc sử dụng Static Typing ngăn chặn nhiều lỗi liên quan đến kiểu dữ liệu trong quá trình phát triển ứng dụng. Công nghệ làm tăng tính tin cậy và dễ dàng kiểm tra lỗi trước khi chương trình chạy và cung cấp thông tin rõ ràng về kiểu dữ liệu của từng biến. Công nghệ giúp người đọc mã nguồn dễ dàng hiểu mã hơn.

Trái ngược với Static Typing, Dynamic Typing là một phương pháp trong đó kiểu dữ liệu của biến được xác định tại thời điểm chạy chương trình, không phải tại thời điểm biên dịch. Đây là một vài kiểu dữ liệu được sử dụng phổ biến nhất:

• Number – Tất cả giá trị số được biểu diễn bởi kiểu number, không có định nghĩa riêng cho số nguyên (integer), số thực (float) hoặc các kiểu khác.
• String – Giống như string của JavaScript có thể được bao quanh bởi ‘dấu nháy đơn’ hoặc “dấu nháy kép”.
• Boolean – true hoặc false, sử dụng 0 và 1 sẽ gây ra lỗi biên dịch.
• Any – Một biến với kiểu này có thể có giá trị là một string, number hoặc bất kỳ kiểu nào.
• Arrays – Có 2 kiểu cú pháp: my_arr: number[]; hoặc my_arr: Array<number>.
• Void – Được sử dụng khi hàm không trả lại bất kỳ giá trị nào.

Interfaces

Interface trong TypeScript là một cấu trúc dữ liệu để mô tả các đối tượng. Nền tảng được định nghĩa với các loại dữ liệu và cấu trúc của đối tượng riêng biệt. Trong đó bao gồm các thuộc tính (properties) và phương thức (methods). Các interface không chứa mã thực thi, mà chỉ mô tả cách mà các đối tượng nên có dạng như thế nào.

Ví dụ, một interface "Person" có thể được định nghĩa như sau trong TypeScript:

  interface Person {

  firstName: string;

  lastName: string;

  age: number;

  greet: () => string;

}

Trong ví dụ này, interface "Person" mô tả một đối tượng Person với các thuộc tính là "firstName", "lastName", "age" và một phương thức "greet" trả về chuỗi. Khi một đối tượng được khai báo theo cấu trúc này, nó phải có đầy đủ các thuộc tính và phương thức được mô tả trong interface "Person".

Ví dụ về việc sử dụng interface để tạo đối tượng theo cấu trúc đã định nghĩa:

let person: Person = {

  firstName: "John",

  lastName: "Doe",

  age: 30,

  greet: function() {

    return "Hello, my name is " + this.firstName + " " + this.lastName;

  }

};

Ở đây, đối tượng "person" phải tuân theo cấu trúc của interface "Person", cần có đầy đủ các thuộc tính và phương thức được mô tả trong interface. Nếu không tuân theo, TypeScript sẽ cảnh báo lỗi.

Classes

Trong lập trình hướng đối tượng, một class là một mẫu (template) để tạo ra các đối tượng (objects) cụ thể. Công cụ chứa thuộc tính và phương thức mà các đối tượng thuộc lớp đó sẽ có. Class có tác dụng tái sử dụng mã nguồn, tạo ra các đối tượng có cùng cấu trúc,  hành vi và tạo ra mối quan hệ kế thừa giữa các đối tượng.

Dưới đây là một ví dụ đơn giản về việc định nghĩa và sử dụng một class trong TypeScript:

class Animal {

  name: string;

  constructor(name: string) {

    this.name = name;

  }

  makeSound() {

    console.log("Some sound");

  }

}

// Tạo một đối tượng từ lớp Animal

let myAnimal = new Animal("Dog");

console.log(myAnimal.name); // Output: Dog

myAnimal.makeSound(); // Output: Some sound

Trong ví dụ trên, chúng ta định nghĩa một class "Animal" với thuộc tính "name" và phương thức "makeSound". Sau đó, chúng ta tạo một đối tượng từ lớp Animal bằng cách sử dụng từ khóa "new", sử dụng các thuộc tính và phương thức của đối tượng đó.

Generics

Generics là một tính năng trong TypeScript (cũng như trong nhiều ngôn ngữ lập trình khác) cho phép chúng ta xây dựng các thành phần có thể làm việc với nhiều kiểu dữ liệu khác nhau mà không cần phải xác định trước kiểu dữ liệu cụ thể. Điều này giúp người dùng tái sử dụng mã nguồn và tạo ra các thành phần linh hoạt khác.

Dưới đây là một ví dụ đơn giản về cách sử dụng generics trong TypeScript:

// Sử dụng generics để viết hàm trả về mảng các phần tử có kiểu dữ liệu bất kỳ

function reverseArray<T>(array: T[]): T[] {

  return array.reverse();

}

// Sử dụng hàm reverseArray với kiểu dữ liệu string

let names = ["Alice", "Bob", "Charlie"];

let reversedNames = reverseArray<string>(names);

// Sử dụng hàm reverseArray với kiểu dữ liệu number

let numbers = [1, 2, 3, 4, 5];

let reversedNumbers = reverseArray<number>(numbers);

Trong ví dụ trên, chúng ta định nghĩa hàm reverseArray sử dụng generics để làm việc với mảng các phần tử có kiểu dữ liệu bất kỳ. Khi sử dụng hàm này, chúng ta có thể chỉ định kiểu dữ liệu cụ thể mà hàm sẽ hoạt động với, như "string" hoặc "number".

Modules

Modules trong TypeScript là một phương pháp tổ chức mã nguồn thành các phần nhỏ độc lập. Từ đó giúp quản lý mã nguồn một cách hiệu quả khi xây dựng ứng dụng lớn. Mỗi module có thể chứa các khai báo biến, hàm, lớp  và có thể được sử dụng hoặc nhập vào các module khác.

Dưới đây là một ví dụ đơn giản về cách sử dụng modules trong TypeScript:

// File: greeting.ts

export function greet(name: string) {

  console.log(`Hello, ${name}!`);

}

// File: main.ts

import { greet } from './greeting';

greet('Alice');

Trong ví dụ này, chúng ta tạo hai file: "greeting.ts" và "main.ts". Trong file "greeting.ts", chúng ta định nghĩa một hàm greet và xuất nó (export) để có thể sử dụng ở nơi khác. Trong file "main.ts", chúng ta nhập (import) hàm greet từ file "greeting.ts" và sử dụng nó để chào đón người dùng.

Các modules cho phép chúng ta phân chia mã nguồn thành các phần nhỏ, tái sử dụng mã nguồn một cách hiệu quả. Người dùng có thể theo dõi cách quản lý phụ thuộc giữa các thành phần trong ứng dụng TypeScript.

Các file khai báo của bên thứ 3

Các file khai báo của bên thứ 3 trong TypeScript thường có phần mở rộng là .d.ts và chúng cung cấp thông tin kiểu dữ liệu cho các thư viện JavaScript có sẵn mà không có thông tin kiểu được tích hợp trong chúng.

Nếu bạn muốn sử dụng một thư viện JavaScript không có tích hợp kiểu dữ liệu TypeScript, bạn có thể tìm hoặc tạo một file khai báo (declaration file) với phần mở rộng .d.ts để cung cấp thông tin kiểu dữ liệu cho thư viện đó.

File khai báo này sẽ giúp TypeScript hiểu cấu trúc và tính chất của các đối tượng và hàm trong thư viện JavaScript mà không cần phải thay đổi mã nguồn JavaScript gốc.

Tạm kết

Bài viết trên giới thiệu khái niệm Typescript là gì và cập nhật nhiều kiến thức cơ bản liên quan đến TypeScript. Bộ ngôn ngữ được ứng dụng với lượng thông tin lớn và nhiều cách biến đổi khác nhau. Hi vọng bạn sẽ ứng dụng được những dữ liệu trên cho công việc của mình. 

Xem thêm:

• Oracle là gì? Tổng hợp các lợi ích hệ thống quản trị cơ sở dữ liệu Oracle
• Giải đáp: Shell là gì? Cách phân loại Shell hiệu quả và dễ áp dụng

Tại FPT Shop cung cấp nhiều mẫu máy tính xách tay, máy tính bảng có cấu hình cao. Bạn có thể lựa chọn sản phẩm của nhiều hãng sản xuất thiết bị công nghệ uy tín với giá tốt nhất tại đây. 

Laptop