如何从打字稿中的javascript文件访问变量

Question

I am trying to write a project in typescript, but I am using a javascript library, I am wondering how to use the variable in the javascript library in my typescript project. 我试图用打字稿写一个项目，但是我使用的是javascript库，我想知道如何在我的打字稿项目中使用javascript库中的变量。 Below is the specifics: 具体如下：

I have 3 files: the js library: index.js , the typescript files: simulator.ts , and the html file: simulator.html 我有3个文件：js库： index.js ，打字稿文件： simulator.ts和html文件： simulator.html

In my index.js , I want to access the variable ctx , which was declared as: 在我的index.js ，我想访问变量ctx ，该变量声明为：

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

In my simulator.html , I have loaded the two files in the following order but it cannot be changed as the project environment requires the sim.js which is generated automatically from simulator.ts by the project environment to be loaded in <head> , and the index.js to be loaded in <body> . 在我的simulator.html ，我已按以下顺序加载了这两个文件，但是无法更改，因为项目环境要求sim.js项目环境从simulator.ts自动生成的sim.js加载到<head> ，以及将index.js加载到<body> 。 The codes are followings: 代码如下：

<!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>

what should I do in my simulator.ts to access the variables, functions, and etc from the js library? 我应该在模拟器中做什么，以便从js库访问变量，函数等？

Answer 1

Many JS libraries will provide a TypeScript declaration file. 许多JS库都会提供TypeScript声明文件。

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

If none is provide you may have to roll your own in order to get your editor to play nice. 如果未提供任何内容，则可能需要自己动手才能使编辑器发挥出色。

Other notes: 其他说明：

You may want to consider moving the jquery reference to the end of the body tag instead of inside the div. 您可能需要考虑将jquery引用移至body标签的末尾，而不是移至div内部。
if any of the js is dependent on jquery, i'd move it to the end of the body tag below jquery as well. 如果任何js依赖于jquery，我也将其移到jquery下面body标记的末尾。
I think you have a extra closing style tag 我认为您还有一个额外的结束样式标签
look at using JQuery.Ready() if you aren't already. 看看是否还使用JQuery.Ready（）。 Your js may be running before the canvas is in the DOM 您的js可能在画布进入DOM之前就已运行

Answer 2

If you are trying to use the ctx variable in simulator.ts , you need to declare it globally. 如果您尝试在simulator.ts使用ctx变量，则需要全局声明它。 The syntax to declare would be - 声明的语法为-

declare let ctx: any;

如何从打字稿中的javascript文件访问变量

问题描述

2 个解决方案

解决方案1
0 2017-10-27 14:27:30

解决方案2
0 2017-10-28 07:07:50

如何从打字稿中的javascript文件访问变量

问题描述

2 个解决方案

解决方案1 0 2017-10-27 14:27:30

解决方案2 0 2017-10-28 07:07:50

解决方案1
0 2017-10-27 14:27:30

解决方案2
0 2017-10-28 07:07:50