如何将API函数导入到另一个Typescript文件？

在 TypeScript 中，将 API 函数导入到另一个文件是一个常见的操作。以下是如何实现这一点的步骤和示例。

1. 创建 API 函数

首先，您需要在一个 TypeScript 文件中定义您的 API 函数。例如，您可以创建一个名为 api.ts 的文件，并在其中定义一个 API 函数：

// api.ts
export const fetchData = async (url: string): Promise<any> => {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
};

在这个示例中，我们定义了一个名为 fetchData 的异步函数，并使用 export 关键字将其导出，以便在其他文件中使用。

2. 导入 API 函数

接下来，您可以在另一个 TypeScript 文件中导入这个 API 函数。例如，您可以创建一个名为 app.ts 的文件，并在其中导入 fetchData 函数：

// app.ts
import { fetchData } from './api';

const url = 'https://api.example.com/data';

const getData = async () => {
    try {
        const data = await fetchData(url);
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

getData();

在这个示例中，我们使用 import 语句从 api.ts 文件中导入 fetchData 函数。然后，我们在 getData 函数中调用它，并处理可能的错误。

3. 确保文件路径正确

在导入时，确保文件路径是正确的。如果 api.ts 和 app.ts 在同一目录下，使用 ./api 是正确的。如果它们在不同的目录中，您需要根据实际的文件结构调整路径。

4. 使用默认导出（可选）

如果您希望导出一个默认的 API 函数，可以使用 export default。例如：

// api.ts
const fetchData = async (url: string): Promise<any> => {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
};

export default fetchData;

然后在另一个文件中导入时，可以这样做：

// app.ts
import fetchData from './api';

const url = 'https://api.example.com/data';

const getData = async () => {
    try {
        const data = await fetchData(url);
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

getData();