如何在 Typescript 中引用外部模块

2020-08-03 08:00:00 · 飞浪

介绍 ES6是JavaScript语言的一个重大增强，通过遵循编码标准，使软件开发更易于访问且更加强大。 TypeScript中的模块只是在单独文件中编写的脚本，也可以用作现有应用程序中

介绍

ES6 是 JavaScript 语言的一个重大增强，通过遵循编码标准，使软件开发更易于访问且更加强大。

TypeScript 中的模块只是在单独文件中编写的脚本，也可以用作现有应用程序中的第三方库，导入允许您将其源引用到现有文件中。在本指南中，您将学习导入外部模块的不同方法以及如何使用导入的脚本。

引用外部模块的方式

无论是独立的脚本文件还是第三方库，导入外部模块的方法都有多种，以下是可能的方法。

按类/模块名称导入

可以通过提供其在现有应用程序中的位置来导入任何类/模块。

      import { component_name } from 'modules_name/location';
    

按默认类/模块名称导入

也可以通过默认名称加上模块位置来导入模块。

      import component_name from 'module_name';
    

仅用于副作用的导入库

库是各种组件/模块的集合；因此，您可以像下面这样导入它，但仅有副作用。

      import 'library_name';

从模块/库导入所有内容

有时，您可能需要从特定库访问每个组件/模块，然后可以使用以下语法。

      import * as lib from 'library_name';
    

如果您想访问库的组件/模块，那么名为lib 的对象可用于访问它。或者，您也可以使用以下语法。

      import lib = require('library_name');
    

以上是注入和使用外部模块的常见方式，您可以根据架构需求选择其中任意一种。

引用外部 NPM 包

React 中带有 TypeScript 的组件可以在任何地方轻松导出和导入。但同时也导入了各种第三方 NPM 库。

使用import语句就可以了！尝试一个简单的示例来安装和使用第三方库。

将给定的 NPM 包安装到您的应用程序中。

      npm install reactstrap
npm install bootstrap
    

安装库后，将其导入到组件中，如下所示。

      import { Breadcrumb, BreadcrumbItem } from "reactstrap";
    

您可以使用面包屑组件，如下例所示。

      render() {
    return (
      <div>
        <p>Importing external NPM modules</p>
        <Breadcrumb>
          <BreadcrumbItem>
            <a href="#">Home</a>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <a href="#">Profile</a>
          </BreadcrumbItem>
          <BreadcrumbItem active>XYZ User</BreadcrumbItem>
        </Breadcrumb>
      </div>
    );
}
    

reactstrap中有两个不同的组件需要导入。一个是<Breadcrumb>，另一个是<Breadcrumbitem>。

请查看完整的示例来准确了解如何使用名为reactstrap的外部 NPM 库。

      import React, { Component } from "react";
import { Breadcrumb, BreadcrumbItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

interface AppProps {}
interface AppState {
  name: string;
}

class ImportModule extends Component<AppProps, AppState> {
  render() {
    return (
      <div>
        <p>Importing external NPM modules</p>
        <Breadcrumb>
          <BreadcrumbItem>
            <a href="#">Home</a>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <a href="#">Profile</a>
          </BreadcrumbItem>
          <BreadcrumbItem active>XYZ User</BreadcrumbItem>
        </Breadcrumb>
      </div>
    );
  }
}

export default ImportModule;
    

笔记

随着 TypeScript 2.1 的发布，package.json文件中列出并与node_modules文件夹一起安装的包可以从任何组件导入。

使用外部自定义 JavaScript 模块

有时，您可能必须在整个应用程序中实现共享逻辑，例如验证助手、字符串处理等等。

为此，您可以创建一个单独的 JavaScript 模块，并使用 JSX 代码在 TypeScript 中引用它。

创建一个名为addition.js的文件。源代码如下。

      export default function addition(x, y) {
  console.log("Addition is :=  ", x + y);
}
    

现在，下一步是将外部模块导入现有的 TypeScript 组件。

      import addition from "./addition";
    

导入模块后，它可以被组件使用，如下所示。

      componentDidMount() {
    console.log(addition(1,1))
}
    

上面的例子展示了如何使用import语句创建外部自定义模块并将其与 TypeScript 组件一起使用。

结论

模块是独立的逻辑单元，由多种功能组成，例如业务逻辑处理、静态用户界面或成熟的组件。

使用import语句可以方便地在组件中导出和导入外部模块。它们可以快速使用。我希望本指南能帮助您找到预期的答案。祝您学习愉快！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 Typescript 中引用外部模块

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

render() { return ( <div> <p>Importing external NPM modules</p> <Breadcrumb> <BreadcrumbItem> <a href="#">Home</a> </BreadcrumbItem> <BreadcrumbItem> <a href="#">Profile</a> </BreadcrumbItem> <BreadcrumbItem active>XYZ User</BreadcrumbItem> </Breadcrumb> </div> ); }

import React, { Component } from "react"; import { Breadcrumb, BreadcrumbItem } from "reactstrap"; import "bootstrap/dist/css/bootstrap.min.css"; interface AppProps {} interface AppState { name: string; } class ImportModule extends Component<AppProps, AppState> { render() { return ( <div> <p>Importing external NPM modules</p> <Breadcrumb> <BreadcrumbItem> <a href="#">Home</a> </BreadcrumbItem> <BreadcrumbItem> <a href="#">Profile</a> </BreadcrumbItem> <BreadcrumbItem active>XYZ User</BreadcrumbItem> </Breadcrumb> </div> ); } } export default ImportModule;