Question

我使用npm添加了@ types / socket.io-client模块

npm install --save @types/socket.io-client

那样导入我的文件datapulse.ts之后

import * as io from 'socket.io-client'
export class DataPulseProvider {
    private socket: any;
    public constructor(socketServer: string) {
       this.socket = io(socketServer);
    }
// do something
}

但是当我构建项目时，出现了错误

[!] Error: Cannot call a namespace ('io')

任何人都对使用带有脚本的socket.io-client有一定的经验，请帮助我解决以上问题。谢谢！

Answer 1

遵循socket.io ES6 import之后，您将执行以下操作：

import io from 'socket.io-client';
const socket = io('http://localhost');

简而言之，您必须像以前那样做：

import * as io from 'socket.io-client';

不符合ES6，并且另外io也不再可调用（根据ES ^名称空间规范它只能是对象）：

// reports TS error
io(/* ... */);

因此您必须扩展tsconfig.json，以便TS将可调用的io包装为一个对象，并使所有内容再次有效：

{
    "compilerOptions": {
        "esModuleInterop_comment": "Necessary for incompatible modules to import, like socket.io",
        "esModuleInterop": true,
        // ...
    },
,
    "allowSyntheticDefaultImports_comment": "cannot be false, as needed for `esModuleInterop` parameter, though we can omit it",
    "allowSyntheticDefaultImports": true,
    // ...
}

这对于命名空间也可能会有所帮助：

A namespace-style import cannot be called or constructed, and will cause a failure at runtime

这与esModuleInterop参数有关：

Answer 2

我从未使用过socket.io-client，但是根据npmjs（https://www.npmjs.com/package/socket.io-client），您必须像这样导入io：

import io from 'socket.io-client';

它告诉我该库具有一个带有export default关键字的函数。但是，您使用import * as io，这意味着您要导入整个模块-一个包含默认导出成员和命名导出成员的对象，并且希望将此对象引用为io。

Answer 3

正如 Socket.io 文档所说（现在）不再需要类型模块。卸载它以消除错误。

<块引用>

TypeScript 用户注意：这些类型现在包含在 socket.io-client 包中，因此不再需要来自 @types/socket.io-client 的类型，实际上可能会导致错误： ~Docs

正确的导入应该是这样的

// ES6 import or TypeScript
import { io } from "socket.io-client";
// CommonJS 
const io = require("socket.io-client");

~Docs client-initialization

@types/socket.io-client 包给我带来了麻烦，这就是为什么我寻找解决方案并找到另一个 Stack Post，他们在导入时遇到错误

无法将'socket.io-client'导入为打字稿中的模块

3 个答案: