- vừa được xem lúc

TypeScript và bí ẩn đằng sau khái niệm "Type Erasure"

0 0 2

Người đăng: Vinh Phạm

Theo Viblo Asia

Để hiểu rõ hơn về TypeScript cũng như về khái niệm Type Erasure, một số định nghĩa quan trọng sau đây mà bạn cần nắm rõ.

Ngôn ngữ lập trình bậc cao và bậc thấp

Để hiểu rõ hơn về TypeScript, chúng ta cần phân biệt hai loại ngôn ngữ lập trình: ngôn ngữ bậc cao và ngôn ngữ bậc thấp.

Ngôn ngữ bậc cao, như JavaScript, dễ hiểu hơn đối với con người bởi tính trừu tượng hóa cao. Ngược lại, ngôn ngữ bậc thấp, điển hình là mã máy (nhị phân) hoặc Assembly, yêu cầu lập trình viên phải làm việc trực tiếp với địa chỉ bộ nhớ, khiến chúng trở nên phức tạp hơn.

Biên dịch (Compiling) và Chuyển đổi (Transpiling) là gì?

"Compiling" (biên dịch) và "transpiling" (chuyển đổi mã nguồn) là hai khái niệm khá tương đồng, nhưng không hoàn toàn giống nhau. "Compiling" là quá trình chuyển đổi mã nguồn thành mã máy (thường là mã nhị phân) để máy tính có thể thực thi. Quá trình này có thể diễn ra qua nhiều bước, mỗi bước sẽ tối ưu hóa mã và đưa nó đến gần hơn với mã máy. Java, C# và C là những ví dụ điển hình cho ngôn ngữ được biên dịch.

Trong khi đó, "transpiling" được hiểu là quá trình chuyển đổi từ một ngôn ngữ bậc cao này sang một ngôn ngữ bậc cao khác. Ví dụ, TypeScript là ngôn ngữ bậc cao, sau khi được "transpiled", nó sẽ trở thành JavaScript (cũng là ngôn ngữ bậc cao). Tương tự, Babel có thể chuyển đổi mã JavaScript ES6 thành ES5. Lợi ích của "transpiling" là bạn có thể viết mã bằng một ngôn ngữ bậc cao và vẫn có thể sử dụng được trong một ngôn ngữ bậc cao khác.

Type Erasure trong TypeScript

"Type Erasure" (xóa kiểu dữ liệu) là một phần quan trọng trong quá trình "transpiling" của TypeScript. Nói một cách đơn giản, "type erasure" là quá trình loại bỏ tất cả các kiểu dữ liệu khỏi mã TypeScript khi nó được chuyển đổi thành JavaScript. Các kiểu dữ liệu bạn sử dụng trong TypeScript sẽ không được kiểm tra trong thời gian chạy khi JavaScript được thực thi. Chúng chỉ được truy cập trong bước biên dịch/chuyển đổi mã nguồn.

Ví dụ, đoạn mã TypeScript: let name: string = 'Kealan'; sẽ được chuyển đổi thành let name = 'Kealan' trong JavaScript. Mặc dù kết quả có thể khác nhau tùy thuộc vào các bước xây dựng cụ thể, nhưng ví dụ về "type erasure" vẫn được thể hiện rõ ràng.

Điều này không chỉ áp dụng cho các kiểu dữ liệu nguyên thủy như number hay string mà còn với cả các kiểu dữ liệu tùy chỉnh do bạn tạo ra.

type StringType = string; const firstName: StringType = "Kealan";

Hiểu rõ về "type erasure" không chỉ giúp bạn nắm bắt khái niệm mà còn giải thích một bước quan trọng trong quá trình chuyển đổi mã nguồn, nơi các kiểu dữ liệu bị loại bỏ và không được sử dụng trong mã JavaScript được tạo ra. Điều này cũng có nghĩa là một số phần mã của bạn thậm chí không được "sử dụng" trong JavaScript trong bước "transpiling". Ví dụ, một interface gồm 100 dòng bạn tạo ra có thể bị loại bỏ hoàn toàn, giúp giảm kích thước mã được gửi đến người dùng.

Bạn có thể thấy rõ điều này trong TypeScript playground, nơi một interface được sử dụng trong mã TypeScript sẽ không xuất hiện trong mã JavaScript được chuyển đổi.

Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về TypeScript, cũng như sự khác biệt giữa "compiling" và "transpiling".

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 522

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 44

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 37

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 51

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 67

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 93