节点模块使用类型声明导入函数

Question

我正在尝试创建一个用于世博会项目的monorepo。为了简单起见，我仅包含我认为您需要了解我所做的工作的信息。

文件结构

├── monorepo
│   ├── package.json
│   ├── apps
│   │   ├── myapp
│   │   │   └── App.tsx
│   ├── packages
│   │   │── mylib
│   │   │   │── package.json
│   │   │   │── index.ts
│   │   │   │── index.d.ts
│   │   │   │── test.js

myapp/App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { testing } from "mylib"; << This does not import the function

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{testing}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

mylib/package.json

{
  "name": "mylib",
  "main": "index.ts",
  "types": "index.d.ts",
  ...
}

mylib/index.ts

export default "hello from mylib";

mylib/index.d.ts

export * from "./test";

mylib/test.js

export function testing() {
  return "hello";
}

在App.tsx中，如果我在没有花括号的情况下执行import testing from "mylib"，它会将testing视为mylib/index.ts的默认导出，并在屏幕上打印"hello from mylib“。接下来，我想实际导入测试函数，所以我执行了import { testing } from "mylib"，但它不能识别testing函数。

如何正确地从包中导入函数？我遗漏了什么？

更新

我认为我遇到的问题与我实际上是从index.ts导入的事实有关，而不管我的声明文件是什么。因为index.ts只有一个值的默认导出，所以它不知道我想从那里导入什么。我需要弄清楚声明文件如何与实际的javascript函数代码一起工作。

例如，如果我将index.ts更改为export * from "./test";，并将App.tsx编辑为：

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { testing } from "mylib";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{testing()}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

然后它就会按预期工作

Answer 1

如果是node_modules目录中已安装的软件包，则只能从软件包名称导入。在您的示例中，您必须从相对文件路径导入，如下所示：

import { testing } from "../../packages/mylib/test";

Answer 2

我想分享一个great article about node modules and types

它帮助我理解了我没有得到的东西。本质上，我将类型声明文件视为应该导出函数的入口点文件。在我的例子中，我的函数已经有了类型定义，所以甚至不需要向模块添加类型声明文件。