开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

typescript类导出和导入在react应用程序中不能正常工作

在React应用程序中，TypeScript类的导出和导入无法正常工作可能是由于以下几个原因导致的：

TypeScript配置问题：首先，确保你的React应用程序中的tsconfig.json文件正确配置。在"compilerOptions"中，确保"module"选项设置为"esnext"或"commonjs"，以便正确处理模块导入和导出。
文件路径问题：确保你正确引用和导入类文件。检查导入语句中的文件路径是否正确，并确保文件名的大小写与实际文件名匹配。
编译问题：如果你使用的是自定义的构建工具或脚本来编译React应用程序，确保你的构建过程正确处理TypeScript文件。确保TypeScript文件被正确编译为JavaScript，并且生成的JavaScript文件被正确加载到应用程序中。
类导出和导入语法错误：检查你的类导出和导入语法是否正确。确保你使用了正确的关键字（如export和import），并且导出和导入的类名与实际类名匹配。

如果你遇到了类导出和导入无法正常工作的问题，可以尝试按照上述步骤逐一排查可能的原因，并进行相应的修复。如果问题仍然存在，可以考虑查阅React和TypeScript的官方文档，或者在相关的开发社区中寻求帮助和解答。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:Axios在React组件中不能正常工作 Bootsrap按钮在React中不能正常工作 BorderStyle: Dash在react本机中不能正常工作 c++类成员函数指针在类中不能正常工作 cutom.js文件在React中不能正常工作 Jquery在Chrome中不能工作，在Safari和Firefox中也不能正常工作 PrivateRouter在React JS中不能正常工作 QMessage在类函数中工作正常，但在单独函数中不能正常工作 React路由器在nginx中不能正常工作 setstate在react-native中不能正常工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 TypeScript 中，如何导入一个默认导出的变量、函数或类？

在 TypeScript 中，如何导入一个默认导出的变量、函数或类？...在 TypeScript 中，如果要导入一个默认导出的变量、函数或类，可以使用 import 关键字结合 default 关键字来引用默认导出的成员。...假设在一个 TypeScript 文件中有以下默认导出的变量和函数： // file.ts const variable1 = 123; export default function() { /.../file'; defaultFunction(); // 调用默认导出的函数 namedFunction(); // 调用具名导出的函数通过混合导入的方式，可以同时引用默认导出和具名导出的成员。...在 TypeScript 中，如何在一个文件中同时导出多个变量或函数？在 TypeScript 中，使用 export 关键字来同时导出多个变量或函数。有几种常见的方式可以实现这一点。

6633 0

21个让React 开发更高效更有趣的工具

以下是使用方式一个简单演示：该应用程序允许你声明props及其types，在树中查看组件，导入背景图像，将它们定义为有状态或无状态，定义其父组件将是什么，放大/缩小，以及将原型导出到新的或现有项目。...该应用程序似乎更适合Mac用户，但它仍适用于Windows用户。完成用户界面后，可以选择导出到现有项目或新项目。如果你选择导出到现有项目并选择根目录，它会将它们导出到..../src/components，如下所示：随着React hook的发布，这个应用程序需要更新做更多的工作。当然，开源是这个应用程序的好处，因为它使它有可能成为未来流行的开源存储库列表。 3....这是react-test -library解决的一个问题，因为理想情况下，你只希望您的用户界面能够正常工作，并最终正确地渲染出来。如何将数据获取到这些组件并不重要，只要它们仍然提供预期的输出即可。...React Developer Tools React Developer Tools是一个扩展插件，允许在Chrome和Firefox Developer Tools中检查React的组件层次结构。

2.4K3 0

22 个让 React 开发更高效更有趣的工具

以下是工具页面样式：该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...React Developer Tools React Developer Tools 是一个扩展插件，它允许在 Chrome 和 Firefox 开发人员工具中查看 React 组件层次结构。

2.1K3 1

22 个让 React 开发更高效更有趣的工具

以下是工具页面样式：该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...React Developer Tools React Developer Tools 是一个扩展插件，它允许在 Chrome 和 Firefox 开发人员工具中查看 React 组件层次结构。

10.2K3 1

【React】653- 22 个让 React 开发更高效更有趣的工具

以下是工具页面样式：该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...React Developer Tools React Developer Tools 是一个扩展插件，它允许在 Chrome 和 Firefox 开发人员工具中查看 React 组件层次结构。

2K2 0

使用 React 和 TypeScript something 编写干净代码的10个必知模式

在本文中，我们将介绍一些在使用 React 和 TypeScript 时使用的有用模式。...它们帮助工程师创建技术问题，将它们添加到迭代中，并持续解决技术债务——而不离开编辑器。现在让我们来了解一下在使用 React 和 Typescript 时应用的 10 个有用模式: 1....使用默认导入来导入 React 考虑下面的代码: import * as React from "react"; 虽然上面的代码可以工作，但是如果我们不使用 React 的所有内容，那么导入它们是令人困惑的...给 children 提供明确的 props Typescript 反映了 React 如何处理 children props，方法是在 react.d.ts 中为函数组件和类组件将其注释为可选的。...不能工作。

1.1K4 0

【译】Typescript 3.8 常用新特性一览

1、类型限制的导入导出方法 (Type-Only Imports and Export) TypeScript 3.8为仅类型导入和导出添加了新语法。.../some-module.js"; export type { SomeThing }; 大家可以在 playground 上试一试，这样导入和导出，ts 是不会解析，这个特性不常用，如果你子配置如下问题的时候可能遇到...在 typescript 中我们可以这么使用私有字段了 class Person { #name: string constructor(name: string) {...每个专用字段名称都唯一地限定于其包含的类。 TypeScript 辅助功能修饰符，例如 public，private 不能在私有字段上使用。...3、 export * as ns 语法使用 typescript 也支持这种用法啦，在导入模块的 as 重新定义模块名的模块的时候，我们可以重新导出到单独模块名。

8462 0

21个让React 开发更高效更有趣的工具

该应用程序允许你声明props及其types，在树中查看组件，导入背景图像，将它们定义为有状态或无状态，定义其父组件将是什么，放大/缩小，以及将原型导出到新的或现有项目。...随着React hook的发布，这个应用程序需要更新做更多的工作。当然，开源是这个应用程序的好处，因为它使它有可能成为未来流行的开源存储库列表。 3....但是，其中一个缺点是它目前仅适用于类组件，因此尚不支持 Hook。 6. Guppy Guppy 是React的一个友好且免费的应用程序管理器和任务运行器，它在桌面上运行且跨平台的，你可以放心用。...这是react-test -library解决的一个问题，因为理想情况下，你只希望您的用户界面能够正常工作，并最终正确地渲染出来。如何将数据获取到这些组件并不重要，只要它们仍然提供预期的输出即可。...React Developer Tools React Developer Tools是一个扩展插件，允许在Chrome和Firefox Developer Tools中检查React的组件层次结构。

9682 0

TypeScript 3.8 Beta

在 TypeScript 3.8 版本中，我们添加了一个仅仅导入/导出声明语法来做为解决方式。 import type { SomeThing } from "....与此相似，export type 仅仅提供一个用于类型的导出，在 TypeScript 输出文件中，它也将会被删除。值得注意的是，类在运行时具有值，在设计时具有类型。它的使用与上下文有关。...当使用 import type 导入一个类时，你不能做类似于从它继承的操作。...每个私有字段的名字，在被包含的类中，都是唯一的在 TypeScript 中，像 public 和 private 修饰符不能用于私有字段私有字段不能在所包含的类之外访问 —— 即使是对于 JavaScript...由于每个项目在不同的策略下都可能更好的工作，TypeScript 3.8 在 tsconfig.json 和 jsconfig.json 中添加了一个新的 watchOptions 字段，它可以让使用者告诉编译器

1.8K3 0

Typescript真香秘笈

纯粹的js语法，在typescript中是完全兼容的。...typescript中的类是javascript中类的超集，所以如果你了解es6中的class的语法，也不难理解typescript中class的语法了。...: any; } export 导出变量在声明文件中只要用到了export、import就会被视为模块声明文件。模块声明文件中的declare关键字不能声明全局变量。...// 整体导出 module.exports = foo; // 单个导出 exports.bar = bar; 在 ts 中，针对这种模块导出，有多种方式可以导入，第一种方式是 const ......在ts文件中引入npm安装的模块，可能会出现报错，这是因为tsc找不到该npm包中的类型定义文件，因为有些库是将类型定义文件和源码分离的。

5.6K2 0

React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

在本教程中，我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。我们从设计 API 开始。...在终端上运行这个命令，创建一个新的 NodeJS 应用程序： yarn init 它会询问几个问题，然后初始化应用程序。你可以通过向命令中添加 -y 标志来跳过。...因为默认情况下，这个应用程序会使用 JavaScript。在 NodeJS 应用程序中有两种使用 TypeScript 的方法，要么在项目中本地安装使用，要么在电脑中全局安装使用。...现在，如果你打开服务器端应用程序的文件夹（并在终端中执行以下命令）： yarn start 在客户端也如此： yarn start 你应该能看到我们的 Todo 应用程序会按预期工作。太棒了！...最后，我们使用 TypeScript、React、NodeJs、Express 和 MongoDB 完成了一个 Todo 应用程序的构建。附上源代码。谢谢阅读！

17K3 0

TS 常见问题整理（60多个，持续更新ing）

在 TypeScript 中，表现为给同一个函数提供多个函数类型定义，适用于接收不同的参数和返回不同结果的情况。...、子类实例都可以访问 protected age: number; // 只能在定义的类和子类中访问，不允许通过实例（定义的类的实例和子类实例）访问 private money: number...为了支持 CommonJS 和 AMD 的 exports，TypeScript 提供了 export = 语法。export = 语法定义一个模块的导出对象。...若使用 export = 导出一个模块，则必须使用 TypeScript 的特定语法 import module = require("module") 来导入此模块。...from 'react' 和 import React from 'react' 有什么区别第一种写法是将所有用 export 导出的成员赋值给 React ，导入后用 React.xxx 访问第二种写法仅是将默认导出

14.7K7 6

你不知道的「 import type 」

背景 TypeScript 3.8 带来了一个新特性：仅仅导入 / 导出声明。在上一篇文章中，我们使用了这个特性，解决了: 引入类型文件报文件不存在的问题。...本文主要内容：什么是「仅仅导入 / 导出声明」 Babel和TypeScript是如何一起工作的正文首先，先介绍一下这个特性。.../service.js 中的代码不会被执行，导致在运行时会被中断。在 TypeScript 3.8 版本中，我们添加了一个仅仅导入/导出声明语法来作为解决方式。...与此相似，export type 仅仅提供一个用于类型的导出，在 TypeScript 输出文件中，它也将会被删除。值得注意的是，类在运行时具有值，在设计时具有类型。它的使用与上下文有关。...当使用 import type 导入一个类时，你不能做类似于从它继承的操作。

4.2K6 1

2019年，React 开发者应该掌握的 22 种神奇工具

该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或现有的项目中。...该应用程序似乎更适合 Mac 用户，不过，它也支持 Windows。当我们完成用户界面映射后，可以选择导出到现有项目或新项目中。如果您选择导出到现有项目并选择根目录，则将其导出到 ....以下是在示例中我们使用组件之一的例子： ? React-Proto 在 GitHub 上获得了 2,000 个星标。 3....我们要做的就是在末尾加上 typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦。...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。

2.4K2 0

TypeScript 4.7 beta 发布：NodeJs 的 ES Module 支持、新的类型编程语法、类型控制流分析增强等

CLI 相关的代码如 dev、serve 等命令的实际执行方法导出，使得用户不能使用 Programmatic API 进行相关定制。...--jsx react-jsx，那么实际上所有的 .jsx/.tsx 文件中都隐式地包含了一行 React 的导入，这两种情况都意味着 TypeScript 的模块检查策略需要进一步地增强。...而在 4.7 版本引入了对计算属性的类型控制流分析支持后，这段代码现在可以正常地工作了。...，TypeScript 能够从 produce 函数的返回值推导出泛型参数 T 的类型，并应用到 consume 函数的入参类型中。...原因是在 TypeScript 的 AST 中，# 属性使用 PrivateIdentifier，而非正常的 Identifier。

5.8K3 0

JavaScript 新一代构建工具对比

只有在这个请求发出后，该工具才会对请求的模块和模块导入树中的任何叶节点应用转换，然后将这些转换提供给浏览器。这大大加快了速度，因为在推送到开发服务器的过程中减少了工作。...所有来自 node 的依赖关系似乎都能正常工作，不管它们是使用传统的模块格式还是 node API（比如我们在 esbuild 中遇到的臭名昭著的 process.env）。...JSON 文件可以在源代码中导入，并转换为 esmodule 导出单个对象。我们也可以提供一个命名的导入， Vite 将在 JSON 文件的根字段中查找导入，并查找其余的 treeshake。...这说明了 wmr 的理念，即使用web平台的原生基元，而不是使用工具来绕开和抽象掉。另一种选择可以是在我们的应用中使用 Skypack 导入，这也是为了在浏览器中工作而预先优化的。...在没有插件的情况下，我们不能在 wmr 中把图片作为数据URL导入到 JavaScript 中。相反，我们需要使用一个语法正确的 JavaScript 方法来导入它们。

1.8K1 0

TS 进阶 - 实际应用 01

@types/ 开头的这一类 npm 包属于 DefinitelyTyped，它是 TypeScript 维护的，专用于为社区存在的无类型定义的 JavaScript 库添加类型支持。...此时它是具有实际逻辑意义的，不能和类型混作一谈。...@types/ 系列的包下，想通过 namespace 进行模块的声明，还需要注意将其导出，然后才会加载到对应的模块下： export = React; export as namespace React... {} } } # 仅类型导入在 TypeScript 中，导入一个类型时，并不需要额外的操作，和导入一个实际值是完全一样的： // foo.ts export const.../foo'; 虽然类型导入和值导入存在于同一条导入语句中，在编译后的 JS 代码中还是只有值导入存在，同时在编译的过程中，值与类型所在的内存空间也是分开的。

8041 0

Sentry 开发者贡献指南 - 前端(ReactJS生态)

文件夹和文件结构文件命名根据模块的功能或类的使用方式或使用它们的应用程序部分，有意义地命名文件。...(sx) 文件，如果文件夹包含在应用程序的其他部分使用的组件，与入口点文件无关。（即，actionCreators，panels）不要仅仅为了重新导出而使用 index 文件。...更倾向于导入单个组件。 React 定义 React 组件新组件在需要访问 this 时使用 class 语法，以及类字段+箭头函数方法定义。...在需要少量状态或访问 react 原语（如引用和上下文）的展示组件中，它们通常是一个不错的选择。例如，具有滑出(slide-out)或可展开状态(expandable state)的组件。...我们的基础视图组件仍然是基于类的我们的基础视图组件（AsyncView 和 AsyncComponent）是基于类的，并且会持续很长时间。在构建视图时请记住这一点。

6.9K3 0

新一代构建工具的比较

只有在发出这个请求之后，工具才会将转换应用到请求的模块和模块的导入树中的任何叶节点，然后将这些转换应用到浏览器中。这大大加快了工作速度，因为推送到开发服务器的过程中工作量很少。...还值得一提的是，摇树是默认内置在 esbuild 中的，不能关闭。...JSON 文件可以在源代码中导入，并转换为导出单个对象的 esmodule。我们还可以提供一个命名的导入，Vite 将在 JSON 文件的根字段中查找导入和 treeshake 的其余部分。...为了让 Snap Shot 应用程序正常工作，我需要深入到节点模块中，并转换一两个库来使用本地 JavaScript 模块语法。如果您使用较旧的库，这可能会降低您的速度。...在 wmr 中，如果没有插件，我们就不能将图片作为数据 url 导入 JavaScript。相反，我们需要使用语法上正确的 JavaScript 方法导入它们。

2.3K2 0

React教程：组件，Hooks和性能

React 中的受控组件与非受控组件在大多数应用中，需要输入和与用户进行某种形式的交互，允许他们输入内容、上传文件、选择字段等。...你可以在整个应用程序中使用并显示一个错误消息，或者在某些小部件中使用它但是不显示，或者显示少量信息来代替这些小部件。...首先，常规 CSS/内联样式在这里能够正常应用，你只需在 className 属性中添加 CSS 中的类名，它就能正常工作。内联样式与常规 HTML 样式略有不同。...React 似乎推广了一些不仅在 React 中变得普遍的解决方案，例如最近集成在 CRA 中的 CSS 模块，你可以在其中简单地导入 name.modules.css 并用其属性来调整组件的样式（某些...你可以使用 import 和 React.lazy 进行动态路由划分（例如：管理员与常规用户）。请注意，React.lazy 仅支持默认导出，并且不支持服务器端呈现。

2.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭