https://rspack.rs/static/js/async/route-0440e26f66b9.e7c16a5596.js

1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([[79],{wv(s,e,r){r.r(e);var n=r("i"),i=r("f");function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",...(0,i.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"typescript",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#typescript",children:"#"}),"TypeScript"]}),"\n",(0,n.jsxs)(e.h2,{id:"如何使用",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#如何使用",children:"#"}),"如何使用"]}),"\n",(0,n.jsxs)(e.p,{children:["通过 ",(0,n.jsx)(e.a,{href:"/zh/guide/features/builtin-swc-loader.html",children:(0,n.jsx)(e.code,{children:"builtin:swc-loader"})})," 可以开启对 TypeScript 的支持。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.(?:js"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"mjs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"ts)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        exclude"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/node_modules/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'builtin:swc-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"          detectSyntax"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'auto'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"仅转译transpile-only",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#仅转译transpile-only",children:"#"}),"仅转译（transpile only）"]}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"builtin:swc-loader"})," 仅会对源码进行转译，因此你需要使用其他工具（如：tsc）完成对源码的类型检查。"]}),"\n",(0,n.jsxs)(e.h2,{id:"开启-isolatedmodules",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#开启-isolatedmodules",children:"#"}),"开启 isolatedModules"]}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"builtin:swc-loader"})," 会为每一个模块分开转译，这需要开启 ",(0,n.jsx)(e.a,{href:"https://www.t

1ypescriptlang.org/tsconfig#isolatedModules",rel:"noopener noreferrer",target:"_blank",children:(0,n.jsx)(e.code,{children:"isolatedModules"})})," 保证 tsc 对源代码的类型校验。\n而某一些功能，如 ",(0,n.jsx)(e.a,{href:"https://www.typescriptlang.org/docs/handbook/enums.html#const-enums",rel:"noopener noreferrer",target:"_blank",children:"const enums"})," 则是依赖了对整个项目的分析，因此，这些功能将无法使用。推荐显式地在 ",(0,n.jsx)(e.code,{children:"tsconfig.json"})," 中开启这个选项，以使得 Rspack 的模块处理行为与 IDE 提示或类型检查中保持一致。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"tsconfig.json",lang:"json",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'  "compilerOptions"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'    "isolatedModules"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"类型检查",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#类型检查",children:"#"}),"类型检查"]}),"\n",(0,n.jsxs)(e.p,{children:["你可以使用 ",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/ts-checker-rspack-plugin",rel:"noopener noreferrer",target:"_blank",children:"ts-checker-rspack-plugin"})," 在编译过程中执行 TypeScript 类型检查。然而，需要注意的是，特别是对于较大的项目，TypeScript 的类型检查可能非常耗时。这意味着类型检查所需的时间可能超过 Rspack 本身的构建时间。"]}),"\n",(0,n.jsx)(e.p,{children:"如果你在开发模式下使用该插件，它将不会阻塞构建过程，你可以继续进行构建。但是，在构建模式下，该插件将会阻塞构建，直到类型检查完成，所以可能会导致构建时间变长。"}),"\n",(0,n.jsx)(e.p,{children:"根据你的实际需求，你应该决定是否启用该插件。如果类型检查过程成为构建过程的瓶颈，我们建议使用 TypeScript 的增量构建功能。该功能可以通过仅分析自上次构建以来修改的文件来大大加快类型检查的速度。"}),"\n",(0,n.jsxs)(e.p,{children:["要启用 TypeScript 的增量构建，你可以在独立使用 ",(0,n.jsx)(e.code,{children:"tsc --incremental"})," 或者在插件里",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/ts-checker-rspack-plugin#enabling-incremental-mode",rel:"noopener noreferrer",target:"_blank",children:"使用 incremental mode"}),"。"]}),"\n",(0,n.jsx)(e.p,{children:"启用增量构建可以帮助减少类型检查的时间，特别是当只有少数文件被修改时。这样，你可以在优化构建过程的同时，不会损失类型检查的好处。"}),"\n",(0,n.jsx)(e.p,{children:"请记住，在你的具体项目中，需要权衡构建速度和类型检查准确性之间的权衡，并据此选择最佳方法。"}),"\n",(0,n.jsxs)(e.h2,{id:"jsxtsx",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jsxtsx",children:"#"}),"JSX/TSX"]}),"\n",(0,n.jsxs)(e.p,{children:["通过 ",(0,n.jsx)(e.a,{href:"/zh/guide/features/builtin-swc-loader.html",children:(0,n.jsx)(e.code,{children:"builtin:swc-loader"})})," 可以开启对 JSX 和 TSX 的支持。"]}

1),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.(?:js"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"mjs"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"jsx"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"ts"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"tsx)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        use"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"          loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'builtin:swc-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"          options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"            detectSyntax"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'auto'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"            jsc"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"              transform"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                react"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                  pragma"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'React.createElement'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                  pragmaFrag"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'React.Fragment'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                  throwIfNamespace"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                  development"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"                }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"              }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"            }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"          }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"alias",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#alias",children:"#"}),"Alias"]}),"\n",(0,n.jsxs)(e.p,{children:["点击 ",(0,n.jsx)(e.a,{href:"/zh/config/resolve.html#resolvetsconfig",children:"resolve.tsConfig"})," 查看详情。"]}

1),"\n",(0,n.jsxs)(e.h2,{id:"client-类型",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#client-类型",children:"#"}),"Client 类型"]}),"\n",(0,n.jsxs)(e.p,{children:["在 TypeScript 代码中，可以获取到 Rspack 特有的功能，例如 ",(0,n.jsx)(e.a,{href:"/zh/api/runtime-api/module-variables.html#importmetaglob",children:"import.meta.glob"}),"。"]}),"\n",(0,n.jsxs)(e.p,{children:["Rspack 通过 ",(0,n.jsx)(e.code,{children:"@rspack/core/module"})," 提供 Client 模块的类型，你可以通过不同方法来声明它们："]}),"\n",(0,n.jsxs)(e.ol,{children:["\n",(0,n.jsxs)(e.li,{children:["\n",(0,n.jsx)(e.p,{children:"添加 TypeScript reference 指令来声明："}),"\n",(0,n.jsx)(e.p,{children:"在全局的 d.ts 声明文件中添加以下内容："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/app-env.d.ts",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/// <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"reference"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" types"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@rspack/core/module"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" />"})]})})})}),"\n",(0,n.jsx)(e.p,{children:"然后便可以在任意 TypeScript 文件中使用："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/index.ts",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" modules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".glob"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./dir/*.js'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 如果没有上面的引用声明，TypeScript 将会抛出错误"})]})})})}),"\n"]}),"\n",(0,n.jsxs)(e.li,{children:["\n",(0,n.jsxs)(e.p,{children:["你也可以将 ",(0,n.jsx)(e.code,{children:"@rspack/core/module"})," 添加到 tsconfig.json 的 ",(0,n.jsx)(e.code,{children:"types"})," 字段中。具体可参考 ",(0,n.jsx)(e.a,{href:"https://www.typescriptlang.org/tsconfig/#types",rel:"noopener noreferrer",target:"_blank",children:"tsconfig types 文档"}),"。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"tsconfig.json",lang:"json",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'  "compilerOptions"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'    "types"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@rspack/core/module"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n"]}),"\n"]})]})}function o(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(l,{...s})}):l(s)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["zh%2Fguide%2Flanguages%2Ftypescript.mdx"]={toc:[{id:"如何使用",text:"如何使用",depth:2},{id:"仅转译transpile-only",text:"仅转译（transpile only）",depth:2},{id:"开启-isolatedmodules",text:"开启 isolatedModules",depth:2},{id:"类型检查",text:"类型检查",depth:2},{id:"jsxtsx",text:"JSX/TSX",depth:2},{id:"alias",text:"Alias",depth:2},{id:"client-类型",text:"Client 类型",depth:2}],title:"TypeScript",headingTitle:"TypeScript",frontmatter:{description:"在 Rspack 中使用TypeScript的指南，涵盖环境配置、集成方式、调试要点、开发模式与常见问题处理。"}},r.d(e,{default:()=>o})}}]);