商城网站建设多少钱推广图片背景图

商城网站建设多少钱,推广图片背景图,wordpress做论坛网站,网站建设不包括哪个阶段TypeScript 中的模块#xff08;Modules#xff09;详解 模块#xff08;Modules#xff09; 是现代 TypeScript 项目中组织和管理代码的最主要方式。它基于 ES6 的 import 和 export 语法#xff08;也称为 ES Modules 或 ESM#xff09;#xff0c;完全取代了旧的命名…TypeScript 中的模块Modules详解模块Modules是现代 TypeScript 项目中组织和管理代码的最主要方式。它基于 ES6 的import和export语法也称为 ES Modules 或 ESM完全取代了旧的命名空间namespace。模块系统让代码具备作用域隔离、按需加载、tree-shaking等优势是当前所有主流框架React、Vue、Angular、NestJS、Next.js 等的标准做法。1. 基本导出与导入a. 导出export// file: utils.tsexportfunctionsum(a:number,b:number):number{returnab;}exportconstPI3.14159;exportinterfaceUser{name:string;age:number;}exportclassCalculator{multiply(x:number,y:number):number{returnx*y;}}// 默认导出一个模块只能有一个exportdefaultfunctiongreet(name:string):string{returnHello,${name}!;}b. 导入import// file: main.tsimportgreetfrom./utils;// 默认导入import{sum,PI,User,Calculator}from./utils;// 命名导入import{sumasadd}from./utils;// 重命名import*asUtilsfrom./utils;// 导入所有为命名空间对象greet(Alice);// Hello, Alice!console.log(sum(2,3));// 5console.log(Utils.PI);letcalcnewCalculator();calc.multiply(4,5);2. 导出方式总结方式语法示例说明命名导出export function fn() {}可导出多个默认导出export default class MyClass {}一个模块只能一个重新导出Re-exportexport { name } from ./other;聚合模块全部重新导出export * from ./utils;导出其他模块的所有不包括默认导出重命名导出export { sum as add } from ./math;3. 模块路径与解析相对路径./utils、../models/user绝对路径需配置baseUrl和paths// tsconfig.json{compilerOptions:{baseUrl:./src,// 根目录paths:{utils/*:[utils/*],// 别名components/*:[components/*]}}}使用import{sum}fromutils/math;importButtonfromcomponents/Button;4. 模块模式Module Mode在tsconfig.json中配置配置值输出格式适用环境ESNext或ES2022原生 ES Modules现代浏览器、Vite、Deno、BunCommonJSrequire/module.exportsNode.js传统AMD/UMD/System旧模块系统老项目推荐现代项目统一使用ESNextmoduleResolution: node或nodenext。5. 动态导入Dynamic Import—— 按需加载返回 Promise适合代码分割、懒加载// 静态导入打包时一起加载import{heavyFunction}from./heavy;// 动态导入运行时加载asyncfunctionloadHeavy(){constmoduleawaitimport(./heavy);module.heavyFunction();}button.addEventListener(click,loadHeavy);6. 类型声明模块Declaration Files为非 TS 文件如.js、第三方库提供类型// file: declarations/jquery.d.tsdeclaremodulejquery{exportdefaultfunction$(selector:string):any;}// 使用import$fromjquery;$(#app).html(Hello);或全局声明// file: globals.d.tsdeclareglobal{interfaceWindow{myGlobalVar:string;}}7. 侧边模块增强Module Augmentation扩展第三方库的类型常见于 lodash、express 等// file: types/express.d.tsimportexpress;declaremoduleexpress{interfaceRequest{user?:{id:number;name:string};}}// 现在所有 express Request 都有 user 属性类型提示8. 常见模块使用场景场景推荐方式工具函数一个文件导出多个函数React 组件export default function Component()类型/接口单独文件导出多个 interface/type常量配置export const CONFIG { ... }聚合导出barrelindex.ts中export * from ./xxxNode.js 服务端module: ESNext.mjs或type: module9. 最佳实践建议建议说明一个文件一个责任每个文件导出相关的一组内容优先默认导出组件React/Vue 等组件用export default类型单独文件interfaces/types 放types/或单独.d.ts使用路径别名配置utils/*等提高可读性避免循环依赖模块相互 import 会导致问题barrel 文件谨慎使用export * from过多影响 tree-shaking开启isolatedModules: true确保兼容 Babel、esbuild 等工具小结模块 vs 命名空间特性模块 (import/export)命名空间 (namespace)现代推荐强烈推荐已过时作用域文件级隔离全局或嵌套加载方式静态/动态按需脚本加载tree-shaking支持不支持声明文件支持常用于旧库结论在 2025 年的 TypeScript 开发中所有新项目都应使用 ES 模块系统。命名空间仅用于维护旧代码或特定声明文件场景。如果您想看实际项目结构示例如 React Vite 的模块组织、Next.js 的页面模块、Node.js 的服务模块或者想了解如何配置 tsconfig 支持模块请告诉我