如何从typescript中的javascript文件访问变量

时间:2017-10-27 13:36:37

标签: javascript typescript

我正在尝试用打字稿写一个项目,但我正在使用一个javascript库,我想知道如何在我的打字稿项目中使用javascript库中的变量。以下是具体细节:

我有3个文件:js库:index.js,打字稿文件:simulator.ts和html文件:simulator.html

在我的index.js中,我想访问变量ctx,该变量被声明为:

var car_no = 10;
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

在我的simulator.html中,我按以下顺序加载了这两个文件,但无法更改,因为项目环境需要sim.js项目由simulator.ts自动生成要在<head>中加载的环境,以及要在index.js中加载的<body>。代码如下:

<!doctype html>
<html lang="en" data-manifest="" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <title>sample simulator</title>
    <!-- <link rel="stylesheet" type="text/css" href="/sim/public/sim.css"> -->
    <link rel="stylesheet" href="TrafficSimulation/css/style.css">
    <style>
        body {
            background: transparent;
            overflow: hidden;
        }
    </style>            
    <script language="javascript">
        window.onload = function(){ 
            var tag = document.createElement("script");
            tag.setAttribute("src", "TrafficSimulation/js/index.js");
            document.getElementById("svgcanvas").appendChild(tag);
        }
    </script>
    <script src="/cdn/bluebird.min.js"></script>
    <script src="/cdn/pxtsim.js"></script>
    <script src="/sim/sim.js"></script>
    <link rel="stylesheet" href="TrafficSimulation/css/style.css">
</head>

<body>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>        
    <div id="svgcanvas" style="height: 270;">
        <canvas></canvas>
        <div class="box">
            Number of Cars:<br>
            <br><input type="range" max="100" min="10" value="36" onChange="init();">
                <span class="car_no">10</span>
        </div>                   
    </div>        
</body>

我应该怎么做我的simulator.ts来从js库访问变量,函数等?

2 个答案:

答案 0 :(得分:0)

许多JS库将提供TypeScript声明文件。

http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

如果没有提供,您可能需要自己动手才能让编辑好玩。

其他说明:

  • 您可能需要考虑将jquery引用移动到结尾 body标签而不是div内部。

  • 如果任何一个js依赖于jquery,我会把它移到结尾处 jquery下面的body标签。

  • 我认为你有一个额外的结束样式标签

  • 如果你还没有,请查看使用JQuery.Ready()。在画布位于DOM

  • 之前,您的js可能正在运行

答案 1 :(得分:0)

如果您尝试在ctx中使用simulator.ts变量,则需要全局声明它。声明的语法是 -

declare let ctx: any;