TypeScript là gì? Cách cài đặt và sử dụng chi tiết

TypeScript là một ngôn ngữ lập trình được phát triển dựa trên JavaScript, bổ sung tính năng kiểm tra kiểu tĩnh nhằm tăng độ an toàn và rõ ràng cho mã nguồn. Việc sử dụng TypeScript giúp lập trình viên dễ phát hiện lỗi sớm, tổ chức code tốt hơn và tối ưu hiệu suất phát triển trong các dự án quy mô lớn. Trong bài viết này, mình sẽ hướng dẫn bạn cách cài đặt và sử dụng TypeScript một cách chi tiết, dễ hiểu và áp dụng được ngay.

Những điểm chính

• Khái niệm TypeScript: Hiểu rõ TypeScript là gì, cách nó mở rộng từ JavaScript và vai trò trong việc nâng cao chất lượng mã nguồn.
• Lý do sử dụng TypeScript: Nắm được những lợi ích nổi bật như kiểm tra lỗi sớm, tổ chức code tốt hơn và hỗ trợ mạnh mẽ cho các dự án lớn.
• Cấu trúc dữ liệu phổ biến: Biết được những kiểu dữ liệu thường dùng trong TypeScript và cách ứng dụng chúng để tối ưu hoá quá trình lập trình.
• Ưu và nhược điểm: Đánh giá toàn diện những điểm mạnh và hạn chế của TypeScript, giúp bạn lựa chọn ngôn ngữ phù hợp với nhu cầu dự án.
• Các chức năng chính: Tìm hiểu những tính năng nổi bật như static typing, interfaces, classes và hỗ trợ lập trình hướng đối tượng.
• So sánh với JavaScript: Hiểu sự khác biệt cốt lõi giữa TypeScript và JavaScript, từ đó xác định môi trường phát triển phù hợp.
• Code mẫu và hướng dẫn biên dịch: Xem ví dụ cụ thể và cách chuyển đổi mã TypeScript sang JavaScript để sử dụng thực tế.
• Cách cài đặt TypeScript: Hướng dẫn chi tiết các bước thiết lập môi trường làm việc với TypeScript trên máy tính cá nhân.
• Biết thêm Vietnix là nhà cung cấp dịch vụ VPS Linux chất lượng cao, phù hợp để triển khai ứng dụng viết bằng TypeScript.
• Câu hỏi thường gặp: Giải đáp nhanh những thắc mắc về khả năng ứng dụng TypeScript ở frontend/backend và mức độ dễ học của ngôn ngữ này.

Typescript là gì?

TypeScript là một ngôn ngữ lập trình mã nguồn mở được phát triển và xây dựng bởi Microsoft. Đây là dự án được nâng cấp từ Javascript nhằm bổ sung tính năng kiểu tĩnh và lớp hướng đối tượng trở nên nhanh chóng, ổn định hơn. Mặc dù ra đời sau CoffeeScript và Dart nhưng TypeScript đã nhanh chóng nhận được sự ủng hộ của cộng đồng lập trình viên nhờ tính năng vượt trội và khả năng tương thích ngược với JavaScript.

Người phát triển ra TypeScript là Anders Hejlsberg. Người đã góp công lớn trong việc tạo ra nhiều ngôn ngữ lập trình hàng đầu như: Delphi, Turbo Pascal & C#. Hiện nay, mã nguồn mở này được sử dụng tại nhiều ứng dụng chạy ở client-side như: Angular, NodeJS. Tính năng classes, modules của TypeScript được tích hợp đầy đủ không hề kém cạnh ECMAScript 2015 – ES6. Không dừng lại ở đó, TypeScript còn nâng cấp phiên bản của mình để ứng dụng nhiều kỹ thuật đời mới từ ECMAScript.

Hạ tầng máy chủ an toàn tuyệt đối

KHÁM PHÁ dịch vụ VPS tốc độ cao tại vietnix!

Dịch vụ VPS tại Vietnix mang đến hiệu suất cao, ổn định nhờ hạ tầng hiện đại, phù hợp cho mọi nhu cầu từ phát triển ứng dụng đến vận hành hệ thống doanh nghiệp.

Khám phá dịch vụ VPS ngay!

Tại sao nên sử dụng TypeScript?

Để bạn có cái nhìn chính xác hơn khi sử dụng, dưới đây mình đã tổng hợp những lý do mà lập trình viên, người dùng nên sử dụng TypeScript như:

• Nhiều framework lựa chọn: Mới đây nhiều Javascript framework đã khuyến khích người dùng của mình nên sử dụng TypeScript để phát triển, sử dụng dễ dàng, tối ưu hơn. Ví dụ: Ionic 2.0 và AngularJS 2.0.
• Dễ phát triển các dự án lớn: TypeScript tích hợp vô số kỹ thuật hiện đại, đảm bảo tính lập trình hướng đối tượng chính xác vô cùng nhanh chóng.
• Mã nguồn mở: TypeScript giúp người dùng có thể thoải mái sử dụng, phục vụ công việc của mình hoàn toàn miễn phí, không hề mất phí. Đồng thời, bạn còn nhậnd được sự hỗ trợ từ cộng đồng.
• Hỗ trợ nhiều tính năng của JavaScript: Những chức năng hiện đại, đời mới tại JavaScript đều được TypeScript cập nhật và cung cấp đầy đủ, có thể kể tới ECMAScript 2015 – ES6.
• TypeScript là JavaScript: Khả năng biên dịch tạo ra những đoạn code JavaScript của TypeScript cực kỳ linh hoạt và ổn định. Chính vì thế, lập trình viên có thể chạy TypeScript ở bất cứ đâu miễn là có hỗ trợ biên dịch JavaScript.

Một số dữ liệu phổ biến của TypeScript

Một số kiểu dữ liệu phổ biến trong TypeScript mà bạn có thể bắt gặp như: Boolean, Number, Void, String,… Để tìm hiểu chi tiết về các kiểu dữ liệu này, mình đã tổng hợp theo bảng dưới đây:

Ưu và nhược điểm của TypeScript

Với những tính năng và đặc điểm đặc biệt như trên, TypeScript sẽ có những ưu và nhược điểm có thể kể đến như:

Chức năng của TypeScript

Dưới đây là 10 chức năng nổi bật của TypeScript:

1. Static Typing

Static Typing là một trong những chức năng phổ biến nhất của TypeScript. Trong đó, người dùng sẽ thực hiện việc khai báo kiểu cho biến, thông qua đó trình biên dịch sẽ hạn chế được tình trạng gán sai kiểu của mỗi giá trị. Nếu việc khai báo này bị bỏ lỡ, chúng sẽ được phát hiện từ code của người dùng theo cơ chế tự động. Các tham số, biến của giá trị trả lại hoặc các hàm được gán các kiểu được định nghĩa khi thiết lập như sau:

var burger: string = 'Spaghetti',     // String 
    calories: number = 400,           // Numeric
    tasty: boolean = true;            // Boolean
// Alternatively, you can omit the type declaration:
// var pasta = 'Spaghetti';
// The function expects a string and an integer.
// It doesn't return anything so the type of the function itself is void.
function speak(food: string, energy: number): void {
  console.log("Our " + food + " has " + energy + " calories.");
}
speak(pasta, calories);

Trong trường hợp TypeScript biên dịch thành JavaScript thành công thì toàn bộ khai báo này sẽ bị xóa:

// JavaScript code from the above TS example.
var burger = 'Spaghetti',
    calories = 400, 
    tasty = true; 
function speak(food, energy) {
    console.log("Our " + food + " has " + energy + " calories.");
}
speak(Spaghetti, calories);

Nếu bạn thao tác không hợp lệ, biên dịch TypeScript sẽ báo lỗi lập tức:

// The given type is boolean, the provided value is a string.
var tasty: boolean = "I haven't tasted it yet";
main.ts(1,5): error TS2322: Type 'string' is not assignable to type 'boolean'.

Khi bạn thực hiện thao tác truyền sai tham số đến một hàm nào đó, hệ thống sẽ tự động báo lỗi:

function speak(food: string, energy: number): void{
  console.log("Our " + food + " has " + energy + " calories.");
}
// Arguments don't match the function parameters.
speak("Sea Food Spaghetti", "a ton of");
main.ts(5,30): error TS2345: Argument of type 'string' is not assignable to parameter of type ‘number;.

2. Type Annotations

Type Annotations cho phép mình khai báo rõ kiểu dữ liệu cho biến, tham số và giá trị trả về của hàm. Việc này giúp TypeScript kiểm tra tính đúng đắn của code ngay từ bước biên dịch, hạn chế lỗi sai kiểu và làm code dễ đọc hơn. Nhờ định nghĩa kiểu tường minh, TypeScript có thể cảnh báo sớm nếu truyền sai kiểu dữ liệu, giúp quy trình phát triển trở nên an toàn và hiệu quả hơn.

let username: string = "user123";

function add(a: number, b: number): number {
    return a + b;
}

3. Interfaces

Interfaces sở hữu các chức năng chính mà bạn cần nhớ gồm:

• Xem xét đối tượng có tương thích với một cấu trúc nhất định nào đó hay không.
• Hỗ trợ trong các giai đoạn phát triển.

Để định nghĩa một Interfaces, bạn hãy đặt tên khi có sự liên kết đặc biệt giữa các biến, điều này giúp hệ thống nhận định rằng các biến này luôn xuất hiện cùng nhau.

Ví dụ:

// Here we define our Food interface, its properties, and their types.
interface Food {
    name: string;
    calories: number;
}
// We tell our function to expect an object that fulfills the Food interface. 
// This way we know that the properties we need will always be available.
function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " calories.");
}
// We define an object that has all of the properties the Food interface expects.
// Notice that types will be inferred automatically.
var ice_cream = {
  name: "cookies", 
  calories: 250
}
speak();

Ngoài ra, bạn cần lưu ý rằng việc cung cấp đúng kiểu và đầy đủ số lượng các thuộc tính sẽ quan trọng hơn so với thứ tự của các thuộc tính này. Kết quả là, nếu một thuộc tính bất kỳ xuất hiện tình trạng sai tên, thiếu tên, hoặc sai kiểu thì trình biên dịch TypeScript sẽ gửi cảnh báo đến bạn. 

Ví dụ:

interface Food {
    name: string;
    calories: number;
}
function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " grams.");
}
// We've made a deliberate mistake and name is misspelled as nmae.
var cookies = {
  nmae: "cookies", 
  calories: 250
}
speak(cookies);
main.ts(16,7): error TS2345: Argument of type '{ nmae: string; calories: number; } 
is not assignable to parameter of type 'Food'. 
Property 'name' is missing in type '{ nmae: string; calories: number; }'.

4. Classes

Lập trình viên thường sử dụng ngôn ngữ như C# hoặc Java cho các ứng dụng lớn, lập trình hướng đối tượng hay các dự án quan trọng. Theo đó, TypeScript cung cấp hệ thống class tương thích với loại ngôn ngữ trên bao gồm: setter/getters, chức năng kế thừa, interface implementations, abstract classes,…

Hơn thế nữa, Classes được xem được xem là một tính năng nổi bật được cài đặt sẵn trong JavaScript kể từ phiên bản ECMAScript 2015 trở đi, đương nhiên người dùng có thể không cần sử dụng TypeScript. Tuy chức năng của hai phiên bản này tương đồng với nhau, nhưng TypeScript sẽ vận hành khắt khe hơn.

Ví dụ:

class Menu {
  // Our properties:
  // By default they are public, but can also be private or protected.
  items: Array<string>;  // The items in the menu, an array of strings.
  pages: number;         // How many pages will the menu be, a number.
  // A straightforward constructor. 
  constructor(item_list: Array<string>, total_pages: number) {
    // The this keyword is mandatory.
    this.items = item_list;    
    this.pages = total_pages;
  }
  // Methods
  list(): void {
    console.log("Our special meal today is:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }
  }
} 
// Create a new instance of the Menu class.
var sundayMenu = new Menu(["Banana cakes","waffles","Lemon juice"], 1);
// Call the list method.
sundayMenu.list();

Tương tự cho chức năng kế thừa:

class HappyMeal extends Menu {
  // Properties are inherited
  // A new constructor has to be defined.
  constructor(item_list: Array<string>, total_pages: number) {
    // In this case we want the exact same constructor as the parent class (Menu), 
    // To automatically copy it we can call super() - a reference to the parent's constructor.
    super(item_list, total_pages);
  }
  // Just like the properties, methods are inherited from the parent.
  // However, we want to override the list() function so we redefine it.
  list(): void{
    console.log("Our special menu for children:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }
  }
}
// Create a new instance of the HappyMeal class.
var menu_for_children = new HappyMeal(["French Fries","Coke","toy"], 1);
// This time the log message will begin with the special introduction.
menu_for_children.list();

5. Access Modifiers

Trong TypeScript, access modifiers giúp lập trình viên kiểm soát phạm vi truy cập của thuộc tính và phương thức trong class. Ba từ khóa chính được hỗ trợ gồm:

• public: Có thể truy cập từ bất kỳ đâu (mặc định nếu không khai báo).
• protected: Chỉ truy cập được trong class hiện tại và các class kế thừa.
• private: Giới hạn truy cập trong nội bộ class.

class Animal {
    private name: string;
    protected age: number;
    public type: string;

    constructor(name: string, age: number, type: string) {
        this.name = name;
        this.age = age;
        this.type = type;
    }
}

Nhờ vào các modifier này, TypeScript giúp tăng tính đóng gói (encapsulation), đảm bảo an toàn và dễ bảo trì cho mã nguồn.

6. Generics

Generics có chức năng chấp thuận cho một hàm nhận nhiều tham số với nhiều kiểu riêng lẻ. Bên cạnh đó, Generics giữ nguyên kiểu của các biến vào và ra tốt, nên việc tái sử dụng biến với generics đạt hiệu quả cao hơn so với kiểu hàm any.

Ví dụ: Hàm Generics sau đây đã nhận một tham số và trả kết quả về một hàm chứa cùng tham số này:

// The <T> after the function name symbolizes that it's a generic function.
// When we call the function, every instance of T will be replaced with the actual provided type.
// Receives one argument of type T,
// Returns an array of type T.
function genericFunc<T>(argument: T): T[] {    
  var arrayOfT: T[] = [];    // Create empty array of type T.
  arrayOfT.push(argument);   // Push, now arrayOfT = [argument].
  return arrayOfT;
}
var arrayFromString = genericFunc<string>("beep");
console.log(arrayFromString[0]);         // "beep"
console.log(typeof arrayFromString[0])   // String
var arrayFromNumber = genericFunc(42);
console.log(arrayFromNumber[0]);         // 42
console.log(typeof arrayFromNumber[0])   // number

7. Null Checking

TypeScript cung cấp khả năng kiểm tra null và undefined thông qua tùy chọn strictNullChecks. Khi bật tính năng này, trình biên dịch sẽ giúp phát hiện và ngăn chặn các lỗi tiềm ẩn do truy cập biến chưa được gán giá trị hợp lệ. Việc định nghĩa rõ ràng kiểu dữ liệu cho phép kiểm soát chặt chẽ hơn:

let name: string | null = null; // biến có thể nhận giá trị null
let age: number = 25;           // biến không chấp nhận null

8. Modules

Khi thực hiện các dự án lớn, bạn nên biết tính module hóa là vô cùng quan trọng. Vì chúng sẽ phân chia code thành nhiều thành phần nhỏ để phục vụ cho việc tái sử dụng, nhằm cơ cấu cho dự án của người dùng dễ hiểu và dễ tổ chức. 

Trong TypeScript tồn tại chức năng Importing và Exporting các module nhưng không thể tự giải quyết việc liên kết giữa các file với nhau. Thay vào đó, bạn nên áp dụng require.js cho ứng dụng client và CommonJS đối với Node.js để tạo điều kiện cho Module TypeScript hoạt động dựa trên nguồn tài nguyên của bên thứ ba. Giả sử, mình lấy ví dụ về 1 file import và 1 file export một hàm như sau:

• importer.ts:

import sayHi = require('./exporter');
sayHi();

• exporter.ts:

var sayHi = function(): void {
    console.log("Hello!");
}
export = sayHi;

Để thao tác này được hoàn tất, người dùng cần tải require.js và thêm vào một thẻ script, đồng thời xem hướng dẫn TypeScript là gì trên requires.org. Tiếp theo, bạn cần biên dịch 2 file .ts ở trên. Một tham số mở rộng cần được thêm vào để thông báo với TypeScript rằng người dùng đang thiết lập các module cho require.js, điều này được gọi là AMD:

tsc --module amd *.ts

9. Namespaces

Trong TypeScript, namespace là cách hiệu quả để nhóm các thành phần như biến, hàm và lớp vào cùng một phạm vi, tránh xung đột tên với các phần tử bên ngoài. Đây là giải pháp tổ chức mã nguồn giúp tăng tính rõ ràng và dễ bảo trì trong các dự án lớn. Ví dụ cơ bản:

namespace MyNamespace {
  export class MyClass {
    greet() {
      console.log("Hello from MyNamespace");
    }
  }
}

Nhờ vào từ khóa export, các phần tử bên trong namespace có thể được truy cập từ bên ngoài, đảm bảo tính đóng gói và tái sử dụng cao trong quá trình phát triển.

10. Hỗ trợ OOP – Lập trình hướng đối tượng

TypeScript tích hợp đầy đủ các đặc trưng của lập trình hướng đối tượng như class, kế thừa, đa hình và đóng gói. Điều này giúp mã nguồn có cấu trúc rõ ràng, dễ mở rộng và bảo trì, đặc biệt phù hợp cho các dự án quy mô lớn cần tổ chức logic chặt chẽ.

Typescript khác gì JavaScript

Có thể thấy rõ TypeScript và JavaScript có mối quan hệ cực kỳ chặt chẽ. Do đó, phần lớn người dùng đều muốn phân tích rõ về sự khác biệt giữa 2 mã nguồn này. JavaScript và TypeScript đều sở hữu mục đích giống nhau, câu lệnh và cú pháp cũng không khác biệt. Nói một cách dễ hiểu thì JavaScript có thể giải quyết các bài toán thông dụng, còn TypeScript sẽ xử lý nhiều bài toán phức tạp (có độ lớn cao hơn).

Dựa trên những phân tích phía trên, bạn có thể thấy rõ TypeScript là một phiên bản nâng cấp hơn so với JavaScript. Chính vì vậy việc mã nguồn mở TypeScript tốt hơn JavaScript cũng khá dễ hiểu, nhưng thực tế mà nói JavaScript vẫn sở hữu cho mình vị trí riêng biệt. Cụ thể như:

• JavaScript mang đến tính hoạt động lý tưởng cho các ứng dụng đơn giản trên nhiều nền tảng.
• TypeScript yêu cầu tài nguyên CPU và thời gian lớn hơn so với JavaScript.
• TypeScript cung cấp nhiều lợi ích nổi bật hơn JavaScript.

Code TypeScript và hướng dẫn biên dịch thành Javascript

Nếu bạn là người mới, phần hướng dẫn này sẽ trang bị cho bạn những kiến thức cần thiết để khai thác tối đa sức mạnh của TypeScript trong các dự án:

Code Type Script

Mình đã tìm hiểu chi tiết và thống kê một vài code nổi bật thường được lập trình viên sử dụng cho Code Type Script hợp lệ như sau:

Mã code Type Script 1

class Demo {
message: string;
constructor(message: string){
this.message = message;
}
public hello() {
console.log(this.message);
}
}
const demo = new Demo('hello world');
demo.hello();

Mã code Type Script 2

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"outDir": "dist",
"sourceMap": true
}
}

Mã code Type Script 3

let x = 1;
let y = 2;
let z = x + y;
console.log(z);

Mã code Type Script 4

class Customer {
Name : string;
constructor (firstName: string, lastName: string)
{
this.Name = firstName + "  " + lastName;
}
GetName()
{
return "Hello, " + this.Name;
}
}

Mã code Type Script 5

var Customer = (function () {
function Customer(firstName, lastName) {
this.Name = firstName + "  " + lastName;
}
Customer.prototype.GetName = function () {
return "Hello, " + this.Name;
};
return Customer;
}());

Hướng dẫn biên dịch thành Javascript

Tiếp theo đây, mình sẽ hướng dẫn cách biên dịch thành JavaScript để bạn đọc có thể hiểu rõ và áp dụng chính xác hơn. Đồng thời hạn chế tối đa tình trạng sai phạm khiến biên dịch bị lỗi, sửa chữa gây tốn thời gian,… Phần lớn TypeScript đều được viết trong các file .ts hoặc .tsx cho JS. Do đó, bạn không thể sử dụng trực tiếp tại trình duyệt mà cần biên dịch thành JavaScript thông qua nhiều tips cụ thể như sau:

• Biên dịch trực tiếp trong Visual Studio, các trình soạn thảo khác nhau hoặc IDE.
• Biên dịch tại các task runner. Ví dụ: Gulp.
• Biên dịch trong terminal nhằm sử dụng lệnh tsc.

Đối với những lập trình viên mới, tốt nhất bạn nên biên dịch thành JavaScript bằng cách đơn giản nhất. Thông qua các câu lệnh tại file TypeScript main.ts như:

• tsc main.ts
• tsc main.ts worker.ts
• tsc *.ts
• tsc main.ts --watch
• # Will result in separate .js files: main.js worker.js.
• # Compiles all .ts files in the current folder. Does NOT work recursively.
• # Initializes a watcher process that will keep main.js up to date.

Hướng dẫn cài đặt TypeScript

Bạn cần cài đặt nodejs trước, sau đó mới tiến hành cài đặt TypeScript. Để tiến hành cài đặt trình biên dịch này, bạn cần chạy các lệnh sau:

• Shell: npm install -g typescript
• Complie: tsc xxx.ts

Hành động này sẽ giúp bạn tạo ra file xxx.js một cách thuận tiện.

Vietnix – Nhà cung cấp dịch vụ lưu trữ uy tín, chất lượng

Vietnix là nhà cung cấp dịch vụ lưu trữ uy tín, chất lượng tại thị trường Việt Nam. Với hạ tầng hiện đại và sử dụng 100% ổ cứng SSD, dịch vụ VPS tại Vietnix mang lại hiệu suất cao và tốc độ truy cập vượt trội. Người dùng có thể dễ dàng quản lý máy chủ qua giao diện thân thiện, hỗ trợ tùy chỉnh cấu hình linh hoạt theo nhu cầu. Ngoài ra, hệ thống còn tích hợp giải pháp backup tự động hàng tuần, giúp bảo vệ dữ liệu an toàn và liên tục. Liên hệ ngay để được tư vấn chi tiết!

Thông tin liên hệ:

• Hotline: 18001093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh
• Website: https://vietnix.vn/

Lời kết

Với những thông tin mình đã chia sẻ bên trên, hy vọng đã giúp bạn có cái nhìn chính xác và chi tiết hơn về TypeScript – Một mã nguồn mở đang được ứng dụng vô cùng phổ biến. Nếu có bất kỳ thắc mắc hoặc đóng góp về nội dung, hãy để lại bình luận ngay bên dưới, mình sẽ giải đáp nhanh nhất!