Hỏi về export default trong typescript

#1

Xem vài kiến thức cơ bản về typescript . thấy có chỗ export defaut này , nhưng chưa hiểu rõ về nó , có sự khác nhau thế nào với export thường nữa không ? . mong mọi người có thể thảo luận giải thích thêm .

New Bitmap Image.png1092×617 142 KB

#2

Cái này là tính năng của ES6, gọi là Default Export (để phân biệt với Named Export)

import a from "./Layout";
import apple from "./Layout";

Default export chỉ được làm 1 lần trong 1 file trong khi named export thì thoải con gà mái

//trong file layout.js nhé
export default {a: 1}; // only 1
let b = {b: 2};
export {b}; //can be many times
export let c = {c: 3}; //many times

NamedExport thì phải dùng dấu ngoặc kép

import {b} from "./Layout";
import {b as Bee} from "./Layout";

Vậy rõ ràng ưu điểm của DefaultExport là sau này bạn có đổi tên cái obj đó đi thì các file import nó không cần đổi. Bạn có đổi thành export default {z: 1}; hay export default {uvuvuvuvu: 1}; thì phần import cũng chả cần đổi vì import sẽ hiểu đó là alias của z, hay uvuvuvuv.

Ngược lại, named export thì bạn buộc phải import chuẩn tên (do có nhiều). Còn nếu muốn alias thì phải thêm chữ as.

Note:

  • Default export chính là named export với name=default import {default as Huhuhu} from "./Layout";
  • Có thể import kết hợp
import a, {b, c as Cat} from "./Layout";
import * as ns from "./Layout"; //ns lúc này sẽ có các prop là a,b,c. Lấy a ra bằng ns.a, ...
import "layout"; //chạy file Layout luôn

Cá nhân: thích dùng named export hơn, vì nó consistent và dễ check type.

4 Likes
#3

Thanks bạn nhé , rất chi tiết và dễ hiểu ^^

#4

Nói chung cái default export rồi alias này nọ dùng cho js là do js nó chưa support namespace. Chứ sau này mà có như kiểu PHP thì đỡ phải defaut rồi name export làm qúe gì. Thôi, tạm chấp nhận vậy vì JS nó chưa hoàn chỉnh.

1 Like
#5

trong typescript Khi nào mình cần dùng export or import ạ thầy

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?