Module trong TypeScript

Module trong TypeScript là bài hướng dẫn tạo và sử dụng module trong typescript. Như import, export , sử dụng các thành phần trong module.

Module trong TypeScript

Module là 1 bộ phận độc lập trong ứng dụng. Trong một module có chứa nhiều biến, nhiều function, class, interface…. Code trong module chỉ hoạt động trong phạm vi của module mà thôi, không thấy biết gì với bên ngoài. Và bên ngoài cũng không truy xuất được những gì trong module trừ phi chúng được export.

Tạo module trong typescript

Tạo file  .ts  như thông thường rồi code để tạo biến, hằng, class, interface. Cái nào muốn cho bên ngoài dùng thì export ra. Ngoài ra nếu muốn có thể import các module khác vào để dùng.

Export trong module TypeScript

Lệnh export dùng trong module là để cho phép bên ngoài truy xuất vào. Các biến, hàm, class, type, interface khai báo trong module đều export được. Thực hiện bằng cách thêm từ khóa export  ở trước.

//sanpham1.ts
export enum MAUSANPHAM  { ĐEN, XÁM, ĐỎ }
export class sanpham { 
    tensp:string; 
    giasp:number; 
    mau:MAUSANPHAM;
}
const TYGIA = 25000;
export const tienvn = (usd:number) => usd*TYGIA;

Import các thành phần trong module TypeScript

Bạn có thể đưa các thành phần được export trong module vào file khác để dùng. Có thể import 1 thành phần cụ thể nào đó trong module khác hoặc import toàn bộ những gì được module khác export cũng được.

//sanpham2a.ts
import { MAUSANPHAM, sanpham, tienvn } from "./sanpham1.js";
const listsp = ():sanpham[] => {
    console.log('Hàm list sp');
    return [];
}

Export tiếp tục các thành phần đã import

Trong 1 module, có thể export tiếp tục 1 vài thành phần đã import hoặc export toàn bộ từ module đã import, khi export có thể đặt tên mới cho 1 thành phần

//sanpham2b.ts
import { MAUSANPHAM, sanpham, tienvn } from "./sanpham1.js";
let mau = MAUSANPHAM.ĐỎ;
const listsp = ():sanpham[] => {
    console.log('Hàm list sp'); return [];
}
export { MAUSANPHAM } from './sanpham1';
export { tienvn as tinhtien } from './sanpham1';
export * from './sanpham1.js';

Import đặt tên mới

Khi import , có thể đặt tên mới cho 1 thành phần hoặc đặt tên mới cho toàn bộ module

//sanpham2c.ts
import { sanpham as Hoa } from "./sanpham1.js";
import  * as SP from "./sanpham1.js";
import { tinhtien } from "./sanpham2b.js";
let s1 = new Hoa;
let tien1 = SP.tienvn(5);
let tien2 = tinhtien(5);

Export và đặt tên mới cho module

Cũng có thể export toàn bộ những gì có trong 1 module với tên mới

//sanpham2d.ts
import  * as SP from "./sanpham1.js";
export let chitiet = (id:number):SP.sanpham => {
    return {} as SP.sanpham;
}
export * as Bong from "./sanpham1.js";

Nhúng javascript như module

Sau khi code TypeScript biên dịch xong, trang web nào muốn dùng thì nhúng .js vào, nhớ khai báo type là module trong tag script

<!-- index.html-->
<body>  
   <div id="app"> </div> 
</body>    
<script type="module" src="js/sanpham.js"></script>
//sanpham.ts
import { Bong}  from './sanpham2d.js';
let sp1 = new Bong.sanpham;
sp1.tensp='Hoa hồng ';
console.log(sp1);

Default export trong module

Mỗi module có thể dùng 1 lệnh export default . tức export mặc định không cần đặt tên, để cho nơi import đặt tên

//pheptoan1.ts
export const pheptru = (a:number , b:number) => a-b;
export const phepnhan = (a:number , b:number) => a*b;
export const phepchia = (a:number , b:number) => a/b;
export default (a:number , b:number) => a+b;
//pheptoan2.ts
import cong from './pheptoan1.js';
let kq1: number = cong(5,6);

Thực tập với module trong Typescript

1. Tạo và sử dụng module user

Tạo module user.ts

//user.ts
interface IUser { hoten:string;}
export let admin:IUser = {username:'ad', password:'123', hoten:'Tèo'}; 
export const dangnhap=()=>{ console.log('Hàm đăng nhập')}
export const thoat = ()=>{ console.log('Hàm thoát')}
export class User implements IUser {
    hoten: string; tuoi: number;
}

Import và sử dụng module user

import { User,  dangnhap, thoat } from "./user.js";
let u1 = new User;
u1.hoten = 'Tèo';
u1.username = 'teonv'; 
dangnhap();

2. Tạo và sử dụng module kieudulieu

Tạo module kieudulieu gồm các interface

//kieudulieu.ts
export const urlAPIServer = "http://localhost:4000/hinh";
export interface IUser { hoten:string;}
export interface IHinhDep{
    id:number;   ten:string;    url:string;
    mota:string; level:number
}
export interface INguoiChoi extends IUser {
    diem:number;thoidiem:string; 
}
export class LanChoi  {
    username:string; diem:number; thoidiem:string;    
}

Sử dụng module

//index.ts
import * as Kieu from './kieudulieu.js'
let arr_hinh: Kieu.IHinhDep[]; 
let url = Kieu.urlAPIServer;

let nc:Kieu.INguoiChoi = { 
    hoten:'Tèo', diem:0,
 thoidiem:'2023:3:1'
}
console.log(nc);

3. Cài và sử dụng json-server

a. Cài đặt  json server theo hướng dẫn ở địa chỉ

https://longnv.name.vn/thuc-tap-angular/doi-dieu-ve-angular-p2#su-dungnbsp-jsonserver

b. Tạo file db.json

{
"hinh": [
 {"id":1,"url":"lan.jpg","level":1,"ten":"Hoa Lan","mota":"" },
 {"id":2,"url":"anhdao.jpg","level":1,"ten":"Hoa Lan","mota":""},
 {"id":3,"url":"thiendieu.jpg","level":1,"ten":"Hoa Lan","mota":""},
 { "id":4,"url":"tigon.jpg","level":1,"ten":"Hoa Lan","mota":"" },
 {"id":5,"url":"thuocduoc.jpg","level":1,"ten":"Hoa Lan","mota":""},
 {"id":6,"url":"camtucau.jpg","level":1,"ten":"Hoa Lan","mota":"" }
],
"choi": [
  {"id":1,"hoten":"Tèo","diem":0,"thodiem":"2023-03-30 19:12:8"},
  {"id":2,"hoten":"Tèo","diem":8,"thodiem":"2023-04-01 9:6:21"}
]
}

c. Chạy json server : để chạy json server với file dữ liệu là db.json và port 4000 (hoặc tùy ý) thì chạy lệnh sau trong folder chứa db.json

json-server -w db.json -p 4000

4. Lấy dữ liệu về hiện trong trang 

//index.ts
fetch("http://localhost:4000/hinh") 
.then( res => res.json())
.then (data => {
    arr_hinh = data as Kieu.IHinhDep[];
    console.log(arr_hinh);
})
.catch(e =>console.log(e))

Xem thử kết quả, hiện ra web và định dạng cho đẹp

BÀI VIẾT LIÊN QUANXEM THÊM