我正在尝试用打字稿写一个项目,但我正在使用一个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库访问变量,函数等?
答案 0 :(得分:0)
许多JS库将提供TypeScript声明文件。
http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
如果没有提供,您可能需要自己动手才能让编辑好玩。
其他说明:
您可能需要考虑将jquery引用移动到结尾 body标签而不是div内部。
如果任何一个js依赖于jquery,我会把它移到结尾处 jquery下面的body标签。
我认为你有一个额外的结束样式标签
如果你还没有,请查看使用JQuery.Ready()。在画布位于DOM
答案 1 :(得分:0)
如果您尝试在ctx
中使用simulator.ts
变量,则需要全局声明它。声明的语法是 -
declare let ctx: any;