文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    深入理解 TypeScript 模块

    ▐ 8.2 文件模块 文件模块的作用域被限定在文件内，且至少含有 export import 中的任何一个关键字。文件模块按照导入方式又可分 相对导入 和 非相对导入 相对导入 相对导入是以/，....，TypeScript 会优先选择 .ts 文件而不是 .d.ts 文件 非相对路径 非相对模块的导入，编译器则会从包含导入文件的目录开始依次向上级目录遍历，尝试定位匹配的声明文件。...3、/root/src/moduleB/index.js（这个文件会被隐式地当作那个文件夹下的main模块） 非相对路径 非相对路径的解析是个完全不同的过程。...▐ 10.1 tsconfig.json 文件 TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript...涉及到下面两个配置项： baseUrl：解析非相对模块的根地址，默认是当前目录 paths：路径映射别名，相对于baseUrl 比如我们项目中的基础模块，由于和业务模块是独立的，如果使用相对路径进行引用

    2.5K30

    模块解析机制_TypeScript笔记14

    .ts/.tsx或.d.ts文件（开启--allowJs的话，还可能对应.js/.jsx文件） 基本思路是： 先尝试寻找模块对应的文件（.ts/.tsx） 如果没有找到，并且不是相对模块引入（non-relative.../moduleB" 会尝试查找： /root/src/folder/moduleB.ts /root/src/folder/moduleB.d.ts 而对于非相对模块引入，从包含要引入的文件的目录开始向上遍历目录树...TypeScript 的源文件后缀名 类似地，非相对模块引入也同样遵循 NodeJS 的解析逻辑，先找文件，再找适用的文件夹： // 源码文件 /root/src/moduleA.ts import...|d.ts 与 NodeJS 查找逻辑几乎一致，只是会额外地从node_modules/@types里寻找d.ts声明文件 三.附加模块解析标记 构建时会把.ts编译成.js，并从不同的源位置把依赖拷贝到同一个输出位置...，都会尝试在rootDirs的每一项中查找 实际上，rootDirs非常灵活，数组中可以含有任意多个目录名称，无论目录是否真实存在。

    1.7K30

    React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

    代码编译成纯 JavaScript 后，dist 目录将用作输出文件夹。 我们还有一个 app.ts，它是服务器的入口。控制器、类型和路由也在它们各自以它们命名的的文件夹中。...编译 src 文件夹中的每个 .ts 文件 include: 告诉编译器包含 src 目录和子目录中的文件 exclude: 在编译时会排除数组中的文件或文件夹 现在我们安装依赖项，使项目可以使用 TypeScript...接下来，为了使用 Express 和 MongoDB，我们安装一些依赖项。...yarn add express cors mongoose 我们还需要安装它们的类型作为开发依赖项，帮助 TypeScript 编译器理解这些包。...我们还需要安装其他依赖项，以便能够编译 TypeScript 代码并同时启动服务器。

    17K30

    rollup从0到1

    因为需要使用到 ts， 模块化，所以就存在模块编译打包的问题, 现有的打包工具中，webpack ， Parcel 更偏向多类型资源 的web应用打包， 对于纯粹的npm工具包来说 rollup 更简单实用...Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。...ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。...'.jsx', '.ts', '.tsx'], // 限制包的查询路径范围 jail: ['/'], // 用于扫描的属性？..., // 只查询匹配模式的路径, 未匹配的模块将作为外部模块 resolveOnly: ['batman', /^@batcave\/.*$/], // 模块根目录, 配合 dedupe 属性使用

    2.1K10

    React组件设计实践总结02 - 组件的组织

    无状态组件天然就是’纯组件’, 如果无状态组件的映射需要一点成本, 可以使用 React.memo 包裹避免重复渲染 ---- 4️⃣ 纯组件和非纯组件 纯组件的’纯’来源于函数式编程....在实际的 React 开发中, 非受控组件的场景非常少, 我认为自定义组件都可以忽略这种需求, 只提供完全受控表单组件, 避免组件自己维护缓存状态 ---- 4....*.page.tsx, 然后在 src 自动扫描匹配的文件作为入口....在前端项目中 index 文件最适合作为一个’出口’文件, 当导入一个目录时，模块查找器会查找该目录下是否存在的 index 文件..../Bar'; ---- 3️⃣ 避免循环依赖 循环依赖是模块糟糕设计的一个表现, 这时候你需要考虑拆分和设计模块文件, 例如 // --- Foo.tsx --- import Bar from '.

    2K31

    使用 Fresh 框架构建Web 应用

    #├── import_map.json # 依赖导入映射├── islands # 岛屿(交互式组件)│ └── Counter.tsx├── main.ts...# 入口文件├── routes # 路由│ ├── [name].tsx│ ├── api│ │ └── joke.ts│ └── index.tsx├──...import_map.json: 这是用于管理项目的依赖项的导入映射。这允许轻松地导入和更新依赖项。其中最主要的两个目录，这里会细说。routes​routes/: 存放项目中的所有路由。...vscode 对 deno 项目重构并不友好​当我移动项目 .ts/.tsx 文件的时候，vscode 会将该文件与其他引用该文件的路径更改为 .js/.jsx，这就比较蛋疼了，所以每当要移动文件的时候都要尤为小心...还有就是文件的依赖关系不是那么准确，尤其是在首次进入项目工程的时候，比如说在 routes/test.tsx 中 导入了 components/Button.tsx 组件，当你在 tsx 中写了<Button

    2.1K20

    「React TS3 专题」从创建第一个 React TypeScript3 项目开始

    @16.7.0-alpha.0 3、添加 tslint.json 文件 3.1 为了让我们的代码更符合规范，我们本地安装tslint及相关依赖检查约束我们的代码规范： cd my-react-ts-app...id=root的div中，所有的JS内容都会编译成一个bundle.js，存在dist文件夹中。...，在我们的项目中入口文件是 index.tsx module：设置 webpack 如何处理不同的模块，webpack 使用 ts-loader 处理 ts 文件和 tsx 扩展 resolve：设置...，多出来了一个 bundle.js 文件： npm run build bundle.js 会将用到的依赖项和我们的 react 组件代码都编译压缩成一个文件。...今天的内容就到这里，我们学习了如何使用 create-react-app 和 手工的两种方式创建 React TypeScript3项目。

    2.2K10

    前端工程化-打造企业通用脚手架

    脚手架能力 为什么不用自动化构建工具 脚手架核心价值 使用脚手架 @focus/cli架构 依赖项概览 focus create projectName核心流程 · 核心代码实现 · 小结 focus...在以往工作中，我们可能需要先做如下操作才能开始编写业务代码： 技术选型 初始化项目，选择包管理工具，安装依赖 编写基础配置项 配置本地服务，启动项目 开始编码 随着Vue/React的兴起，我们可以借助官方提供的脚手架...依赖项概览 一个脚手架核心功能需要依赖以下基础库去做支撑。...但是babel因为单文件编译的特点，做不了和tsc的多文件类型编译一样的效果，有几个特性不支持（主要是 namespace 的跨文件合并、导出非 const 的值），不过影响不大，整体是可用的。...在src/models/新建NewPage.ts文件，去做状态管理 在src/servers/新建NewPage.ts文件，去管理接口调用 在config/routes.ts文件中插入一条NewPage

    80920

    了不起的 tsconfig.json 指南

    什么是 tsconfig.json TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript...当入口文件依赖其他文件时，不需要将被依赖文件也指定到 files 中，因为编译器会自动将所有的依赖文件归纳为编译对象，即 index.ts 依赖 user.ts 时，不需要在 files 中指定 user.ts...umd模块 "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入 "baseUrl": "./", // 解析非相对模块的基地址...使用 --noImplicitThis 配置项： 在 TS2.0 还增加一个新的编译选项： --noImplicitThis，表示当 this 表达式值为 any 类型时生成一个错误信息。...文中通过一个简单 learnTsconfig 项目，让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中，我们将这么多的配置项进行分类学习。

    4.1K10

    typescript基础篇（1）：helloworld

    TypeScript是一种由微软开发的自由和开源的编程语言。作为JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。 它可以编译为JavaScript。...ts是angular的默认开发语言，在即将面世的vue3也将在98%的代码中使用ts。如果还不学，那可能就晚了。...我们想用一个单独的文件来管理这个项目的typescript配置，可以执行： tsc --init 这个时候就创建了一个tsconfig.json配置文件。配置项很长很多，以后再进行详细分析。...加载ts/tsx exclude: /node_modules/ // 排除依赖包下的解析 } ] }, plugins.../src/tpl/index.html' //通过模板生成网站首页，并把内容内嵌到html中 }) ] } 在上面的文件中，我们使用ts-loader加载ts/tsx。

    80420

    十分钟搞定 TypeScript + webpack 配置

    Web 应用程序，我们需要将两组文件编译到目录 build/ 中： TypeScript 文件存储在 ts/中。...这两个任务都由 webpack 处理： 对于 TypeScript，webpack 从 main.ts 开始处理，找到所有使用的 TypeScript 和 JavaScript 文件，并将它们编译成单个脚本文件...安装、构建和运行 Web 应用 首先需要安装我们的网络应用依赖的所有 npm 软件包： npm install 然后，需要通过 package.json 中的脚本来运行 webpack（在上一步中也已安装...依赖项： Webpack incl 支持通过 CLI（命令行界面）和插件使用：webpack、webpack-cli、ts-loader、copy-webpack-plugin 需要 ts-loader...在没有加载器的情况下使用 webpack：`webpack-no-loader.config.js` 除了依赖于 ts-loader 之外，我们还可以先将所有 TypeScript 文件编译为 JavaScript

    2.9K22

    仍然困惑的同学可以看过来：只要npm start一个ant-design-pro项目，你就会明白为什么node挤不进业界主流了

    您可以使用这个选项来继续安装，但这可能会导致运行时错误，如果依赖项之间不兼容的话。...npm install --legacy-peer-deps 其他建议 检查 package.json：确保 package.json 中的依赖项没有相互冲突的版本要求。...检查 package.json 确保 package.json 中没有其他依赖项与 react 版本冲突。 7....使用 npm-force-resolutions 这是一个第三方的 npm 包，可以帮助您强制解决依赖项版本冲突的问题。...手动编辑 package.json 如果自动解决方案不起作用，您可以尝试手动编辑 package.json 文件，将不兼容的依赖项版本改为兼容的版本，然后运行 npm install。

    17510

    TypeScript在react项目中的实践

    就这个结构拆分前后分离其实没有什么成本 在下边分了大概这样的一些文件夹： dir/file desc index.ejs 项目的入口html文件，采用ejs作为渲染引擎 index.tsx 项目的入口js...文件，后缀使用tsx，原因有二：1....我们会使用ts进行React程序的开发 2. .tsx文件在vs code上的icon比较好看 :p tsconfig.json 是用于tsc编译执行的一些配置文件 components 组件存放的目录...首先是webpack，针对ts、tsx文件我们使用了两个loader： { rules: [ { test: /\.tsx?...URL触发时，本应返回数据，但是目前的处理却是添加了一个中间件到Koa中，所以任何请求都会将该模版文件作为数据来返回）所以@Render并不能适用于Koa驱动。

    1.8K30

    【TS】612- 了不起的 tsconfig.json 指南

    什么是 tsconfig.json TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript...当入口文件依赖其他文件时，不需要将被依赖文件也指定到 files 中，因为编译器会自动将所有的依赖文件归纳为编译对象，即 index.ts 依赖 user.ts 时，不需要在 files 中指定 user.ts...umd模块 "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入 "baseUrl": "./", // 解析非相对模块的基地址...使用 --noImplicitThis 配置项： 在 TS2.0 还增加一个新的编译选项： --noImplicitThis，表示当 this 表达式值为 any 类型时生成一个错误信息。...文中通过一个简单 learnTsconfig 项目，让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中，我们将这么多的配置项进行分类学习。

    2.1K30

    萌新跟着操作也能学会的保姆级全栈项目开发实录一：项目初始化配置

    ", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } 具体解释 配置项 值 说明 extends @vue/tsconfig/tsconfig.json...基础路径，通常用于解析非相对模块的导入 compilerOptions.moduleResolution "node" 指定模块解析策略，使用 Node.js 的模块解析逻辑 compilerOptions.paths...", "template", "slot"] 指定 Vue 模板中的原生标签 include ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/...**/*.vue"] 包含在编译中的文件或目录 "src/**/*.ts" 包含 src 目录下所有的 .ts 文件 "src/**/*.d.ts" 包含 src 目录下所有的 .d.ts 文件...项目中有个 .gitignore 文件，也是类似功能，是用来忽略使用git的时候上传 具体的使用看我其他文章 https://juejin.cn/post/7399478677397094435 7、使用

    14610

    Rust赋能前端: 给我0.02秒，生成一套ViteRsbuild前端项目

    └── index.tsx 命令自动化 在之前的版本中，像一些 husky的实例化， 项目初始化后打开编辑器 安装项目依赖 这些操作都需要自己手动完成。...重启终端，并再次运行此命令"); } } } 其他的操作，如husky的初始化，使用yarn安装依赖。都是类似的操作。...css解决方案和hook，变成可选 在使用cli过程中，我们发现有些功能不是很必须的，所以我们让这些功能变成可选。 我们是用dialoguer[3]来实现这个的二次确认操作。...我们在构建项目的时候，会自动生成.vscode的文件 其中有几点比较好玩 设置explorer.fileNesting.patterns配置文件分组 { "explorer.fileNesting.patterns...如果大家使用了会发现，我们有些的工具是限定死的。 例如，我们推崇只使用yarn来作为包管理器。使用vscode作为IDE。 这块也是我们后期需要丰富的地方。

    9500
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券