TypeScript là gì? Vì sao lập trình viên nên sử dụng TypeScript

TypeScript là thông tin được khá nhiều lập trình viên, người dùng tìm hiểu trong khoảng thời gian gần đây. Bởi lẽ khái niệm về TypeScript thực tế vẫn còn khá mới mẻ và chưa thực sự phổ biến. Bài viết hôm nay, Vietnix sẽ cập nhật đầy đủ thông tin TypeScript là gì? Những kiến thức cơ bản về TypeScript để bạn đọc có thể tham khảo và hiểu rõ hơn nhé!

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.

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

Đây là câu hỏi được không ít lập trình viên tân binh thắc mắc. Để bạn đọc có cái nhìn chính xác và rõ nét hơn khi sử dụng, dưới đây Vietnix đã 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 còn hỗ trợ 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 mã 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, Vietnix 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, đặc điểm đặc biệt như trên, khi sử dụng TypeScript sẽ có những ưu và nhược điểm có thể kể đến như:

Ưu điểm

Với vô số tính năng hiện đại, tới nay TypeScript đã mang đến cho người dùng vô số trải nghiệm nhờ vào hàng loạt ưu điểm cực kỳ nổi bật. Đảm bảo đáp ứng tối ưu nhu cầu sử dụng đa dạng của mọi lập trình viên như sau:

• Vận hành miễn phí, tiết kiệm thời gian sử dụng nhờ vào IDE và trình biên dịch vượt trội.
• Giảm thiểu phần trăm va chạm lỗi trong suốt quá trình vận hành.
• Đảm bảo tính hoạt động ổn định – thuận tiện.
• Thao tác mượt mà, nhanh chóng vô, cùng đơn giản, dễ sử dụng.
• TypeScript hỗ trợ các bước chỉnh sửa code tiện lợi hơn nhờ vào lệnh Rename Symbol, Find All Occurrences và RegEx.
• Giúp người dùng tái cấu trúc, nâng cấp hệ thống, phần mềm và ứng dụng vượt trội hơn nhờ vào tính xử lý thông minh.
• Hạn chế thử nghiệm Boilerplate rất hiệu quả, gia tăng xác suất hoàn thành công việc.
• TypeScript còn hợp nhất mã code và đánh giá chính xác khi biên dịch cực kỳ dễ dàng, đơn giản.
• Hỗ trợ tối ưu hóa quy trình làm việc của người dùng, hạn chế tính nhảy bước rồi thực hiện sai thao tác.

Để tận dụng tối đa sức mạnh của TypeScript trong các dự án phần mềm phức tạp, tìm hiểu cách Jira tối ưu hóa quy trình làm việc và giảm thiểu lỗi trong dự án TypeScript của bạn.

Nhược điểm

Bên cạnh những ưu điểm đầy nổi bật, tuy nhiên TypeScript vẫn còn tồn tại một số nhược điểm nhất định trong suốt quá trình lập trình viên thao tác, ứng dụng như sau:

• Người dùng cần biên dịch đuôi .js tệp TypeScript tại nền tảng Node.js.
• TypeScript cần đảm bảo máy chủ Node.js, webpack và trình thử nghiệm hoạt động ổn định.
• Cần thêm Typedef mỗi khi apply Redux, Styled-Component và React.
• TypeScript không vận hành độc lập hay thay thế bất kỳ vai trò chính nào của JavaScript.
• TypeScript chỉ nâng cấp những nhược điểm còn hạn chế của JavaScript.

Chức năng của TypeScript

TypeScript là một mã nguồn mở còn khá mới mẻ đối với nhiều lập trình viên, chính vì thế phần lớn mọi người đều cực kỳ thắc mắc về chức năng vận hành. Cụ thể dưới đây, Vietnix đã chia sẻ 5 chức năng của TypeScript như sau:

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, nhờ đó 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.

Ví dụ: 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:

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. 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, 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, 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; }'.

3. 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();

4. 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.

Lấy ví dụ về 1 file import và 1 file export một hàm:

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

5. 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

Mối quan hệ giữa TypeScript và 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.

Sau khi tổng hợp từ nhiều nguồn, Vietnix biết được cả 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, 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 Type Script và hướng dẫn biên dịch thành Javascript

Cho dù bạn là người mới bắt đầu hay đã có kinh nghiệm với JavaScript, trong 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 của mình.

Code Type Script

Chắc hẳn bạn đọc sẽ cảm thấy khá tò mò về Code Type Script, vì vậy, Vietnix đã 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, Vietnix 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 đó, 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 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

Người dùng 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.

Lời kết

Với những thông tin vừa được Vietnix chia sẻ, phần nào đã giúp bạn đọc có cái nhìn chính xác và chi tiết hơn về Typescript là gì, một mã nguồn mở đang được ứng dụng vô cùng phổ biến. Hy vọng sau khi tham khảo, bạn sẽ biết cách sử dụng thông qua chức năng và ưu, nhược điểm vượt trội của mã nguồn mở này.