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
- Tạo module trong typescript
- Export trong module TypeScript
- Import các thành phần trong module TypeScript
- Export tiếp tục các thành phần đã import
- Import đặt tên mới
- Export và đặt tên mới cho module
- Nhúng javascript như module
- Default export trong module
- Thực tập với 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