How to access a variable from a javascript file in typescript
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. Below is the specifics:
I have 3 files: the js library: index.js , the typescript files: simulator.ts , and the html file: simulator.html
In my index.js , I want to access the variable ctx , which was declared as:
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> . 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?
2 answers
solution1
0 2017-10-27 14:27:30
Many JS libraries will provide a TypeScript declaration file.
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.
if any of the js is dependent on jquery, i'd move it to the end of the body tag below jquery as well.
I think you have a extra closing style tag
look at using JQuery.Ready() if you aren't already. Your js may be running before the canvas is in the DOM
solution2
0 2017-10-28 07:07:50
If you are trying to use the ctx variable in simulator.ts , you need to declare it globally. The syntax to declare would be -
declare let ctx: any;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.