导入语句和路径之间的打字稿差异 [英] Typescript differences between import statements and paths

查看：30 发布时间：2021/9/12 18:31:30 typescript typescript2.0

本文介绍了导入语句和路径之间的打字稿差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我想在某处导入一个类(example.ts"):

I have a class that I want to import somewhere ("example.ts"):

export class Example {
  constructor() {
  }

  public someFunction() { }
}

谁能告诉我这三个来自 typescript 的 import 语句之间的区别吗?

Can someone tell me the differences between those three import statements from typescript?

import * as example from "./example.ts"
import { example } from "./example.ts" 或 import { example } as example from "./example.ts"
导入./example.ts"

路径名也有区别:

我什么时候必须使用哪个路径?

When exactly do I have to use which path?

让我们说 example.ts 看起来像这样:

Lets say example.ts looks like this:

export const PI = 3.14
export function sayHello() { console.log('hi'); }
export default function() { console.log('i am default'); }

import * as example from "./example" - 这需要从 example.ts 导出的所有内容，并使其在 example 变量下可用.因此，您将编写诸如 example.sayHello() 或 example.PI 之类的内容.您可能想知道默认导出在哪里.这个位于 default 键下，因此您可以使用 example.default()
import { PI, sayHello } from "./example" 这样你就可以只从 example.ts 导入特定的部分.在这个例子中只有 PI 变量和 sayHello 函数.可以直接调用:sayHello()
import "./example" - 这主要用于执行文件.例如，当有一些副作用时.例如在 rxjs 中，我们使用 import 'rxjs/add/operator/map' 来修改 rxjs 可观察原型并添加地图运算符.出口并不重要——执行很重要.这在 nodejs 环境中尤其重要，在该环境中这会被转换为 require('./example').

import * as example from "./example" - this takes everything exported from example.ts and makes it available under example variable. Therefore you will write things like example.sayHello() or example.PI. You may be wondering where is the default export. This one is under default key therefore you can access it using example.default()
import { PI, sayHello } from "./example" this way you import only specific parts from example.ts. In this example only PI variable and sayHello function. You can call it directly: sayHello()
import "./example" - this is used to basically execute the file. For example when there are some side effects. For example in rxjs we use import 'rxjs/add/operator/map' to modify rxjs observable prototype and add the map operator. Exports are not important - the execution is important. This matters especially in nodejs environment where this get transpiled to require('./example').

我将在这里稍微修改您的示例:

I will modify your examples a bit here:

"./example" - 引用同一目录中的文件.您通常会使用它来导入模块.
"example" 指的是所谓的非相关模块.这些是相对于 tsconfig.json 中的 baseUrl 或使用路径映射来解决的.通常路径映射映射到您的 node_modules 以便您可以导入您的库.因此，您通常会使用它来导入外部模块.
"example.ts" - 在打字稿中，导入文件名不允许以 .ts 结尾.因此只需使用 4. 或 5.

"./example" - refers to file in the same directory. You will usually use it to import your modules.
"example" refers to so called non-relative module. These are resolved either relative to baseUrl in your tsconfig.json or using path mapping. Typically path mapping maps to your node_modules so you can import your libraries. Therefore you will use this one usually for importing external modules.
"example.ts" - in typescript the import filename is not allowed to end with .ts. Therefore just use 4. or 5.

这篇关于导入语句和路径之间的打字稿差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文