代码之家 › 专栏 › 技术社区 › geostocker

在typescript中导入javascript文件,无法访问ts中的函数,可以用html访问它们

typescript javascript

geostocker · 技术社区 · 6 年前

我最近开始集成typescript,并对公司遗留的javascript代码库做出反应。我相信你们中的许多人都明白,这是一次非常成功的经历。

在克服了许多大障碍(如建立适当的Webpack过程、理解和设置tsconfig文件以及适当地分解绑定)之后,我最终将其与当前的CI管道集成在一起。

但是,现在我有一个在我的类型脚本代码中导入javascript库的问题。我知道这是一种不好的做法,但在转向完全遵从TS之前,这是一种中间手段。

我有一个基本的组件,可以很好地构建:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Header } from "./components/header";
import * as $C from "./../../fortress.content.js";
import * as $F from "./../../fortress.js"; 

let url : string  = $F.writeUrl("Account", "LoginAjax");

ReactDOM.render(
    <div>
        <div> {url} </div>
    </div>,  
    document.getElementById("body")
);

$F.writeUrl 允许我们基本上基于项目根目录中的webconfig文件创建一个字符串,因此基本上是一个函数,它接受几个不同的参数并返回一个基于它的字符串:

但是,当我在一个裸机HTML文件中运行发出来的javascript时:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<div id="body"></div>
<div id="header"></div>
<body> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="js/react-0.14.3.js"></script>
    <script src="js/react-dom-0.14.3.js"></script> 
    <script src="js/filemanager/filemanager.bundle.js"></script>
    <script src="js/anothermanager/anothermanager.bundle.js"></script>
    <script>  
            console.log("$F: ", $F);
            console.log("$C: ", $C);
    </script>
</body>
</html>

我得到这些错误:

Uncaught TypeError: Cannot read property 'bind' of undefined
    at new t (filemanager.bundle.js:1)
    at ReactCompositeComponentWrapper.mountComponent (react.js:5504)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)
    at Object.mountComponent (react.js:12971)
    at ReactDOMComponent.mountChildren (react.js:11685)
    at ReactDOMComponent._createContentMarkup (react.js:6817)

anothermanager.bundle.js:1 Uncaught ReferenceError: $C is not defined
    at anothermanager.bundle.js:1
    at Object.<anonymous> (anothermanager.bundle.js:1)
    at n (anothermanager.bundle.js:1)
    at Object.<anonymous> (anothermanager.bundle.js:1)
    at n (anothermanager.bundle.js:1)
    at anothermanager.bundle.js:1
    at anothermanager.bundle.js:1
    at ReactDOMComponent.mountComponent (react.js:6705)
    at Object.mountComponent (react.js:12971)
    at ReactCompositeComponentWrapper.mountComponent (react.js:5581)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)

index.html:17 Uncaught ReferenceError: $F is not defined
    at index.html:17

所以我尝试改变这个来例示 $C 和 $F 在我的TS中:

let test = $F;
let test2 = $C;

这消除了上面的错误,实际上向我展示了 F 和 美元 控制台日志中的对象。但现在的问题是$f.writeurl(“account”,“loginajax”)正在爆炸,因为Chrome不会将其识别为“函数”。

我的进口货有什么问题吗?

2 回复 | 直到 6 年前

Sergeon 6 年前

我想你不需要 import 你的反应包中的那些文件。如果这些文件没有导出任何 module.exports 或 export 而他们只是设置 window 以后使用的成员(实际上是多年前的标准),据我所知,您应该:

1) 将这些文件作为脚本加载,以便它们在任何地方都可用。一定要先添加它们 react 相关的脚本/捆绑包,因此您可以确保在安装react代码时它们是可用的:

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/path-to-fortress-content.js"></script>
<script src="js/path-to-fortress.js"></script> 
<script src="js/react-0.14.3.js"></script>
<script src="js/react-dom-0.14.3.js"></script>

2) 现在,它们在您的反应代码中可用。你需要从 窗口 而是让您的bundler处理$f/$c模块:

let $f: any = (window as any).$F;
let url : string  = $F.writeUrl("Account", "LoginAjax");

msanford 6 年前

< Buff行情>

[…]在我的typescript代码中导入javascript库。我知道这是一种不好的做法,但在转向完全遵从TS之前,这是一种中间手段。

< /块引用>

别担心,这不一定是一种糟糕的做法,尤其是在过渡时期。

在一个小的添加中, 到 sergeon的答案中包含了实现问题,我将添加一些javascript库 do 具有允许您在typescript应用程序中使用它们的类型,例如 jquery ::

npm i--savedev“@types/jquery” < /代码> 然后使用.ts模块中的类型: 导入“jquery”; 声明const$:jquerystatic; < /代码> 它还为您提供了一些IDE IntelliSense帮助: 您可以从@types/.repository,if you desire. o完全符合TS 别担心,这不一定是个坏习惯,尤其是在过渡时期。在一个小附加到Sergeon's answer这涵盖了实现问题,我将添加一些JavaScript库做具有允许您在类型脚本应用程序中使用它们的类型,例如jQuery: npm i --saveDev "@types/jquery" 然后使用.ts模块中的类型: import "jquery"; declare const $: JQueryStatic; 它还为您提供了一些IDE IntelliSense帮助: 您可以从@types/存储库,如果需要的话。