Biểu thức import động ...

Biểu thức import động trong TypeScript là một tính năng mới cho phép người dùng yêu cầu một module một cách bất đồng bộ tại bất kỳ điểm nào trong chương trình của họ. Tính năng này là một phần của ECMAScript và đã được đề xuất trong TC39 JavaScript committee, hiện đang ở giai đoạn 3 của quy trình đề xuất TC39[3][4][8].

Trong TypeScript, biểu thức import động được sử dụng để tải và thực thi các module ECMAScript một cách không đồng bộ và theo yêu cầu. TypeScript 2.4 đã thêm hỗ trợ cho biểu thức import() động, cho phép bạn tải các module một cách linh hoạt hơn so với các khai báo import tĩnh thông thường. Cú pháp của biểu thức import động giống như một lời gọi hàm, với việc truyền vào một chuỗi chỉ định module cần tải. Chuỗi chỉ định này có thể được tính toán một cách động, điều mà không thể thực hiện được với các khai báo import tĩnh[4][6].

Khi sử dụng biểu thức import động, TypeScript sẽ giữ nguyên cú pháp import() để Webpack có thể thực hiện việc chia code thành các phần nhỏ, có thể được tải xuống một cách không đồng bộ sau này. Điều này giúp phục vụ một gói bootstrap tối thiểu trước tiên và sau đó tải các tính năng bổ sung một cách không đồng bộ sau đó. Tuy nhiên, việc này không hề đơn giản vì nó phụ thuộc vào cấu hình tsconfig.json mà chúng ta đang làm việc[3].

Một ví dụ về việc sử dụng biểu thức import động trong TypeScript có thể như sau:

import(/* webpackChunkName: "momentjs" */ "moment")
  .then((moment) => {
    // lazyModule có tất cả các loại đúng, tự động hoàn thành...