这段javascript代码的typescript声明文件怎么写?

1. var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

2.var img_1 = new Image();
img_1.src="墙.png";

3. var map=[[1,1,1,1,1,0,0,0,0],
[1,0,0,9,1,0,0,0,0],
[1,0,2,0,1,0,1,1,1],
[1,0,2,0,1,0,1,4,1],
[1,1,1,0,1,1,1,3,1],
[0,1,1,0,0,0,0,3,1],
[0,1,0,0,0,1,0,0,1],
[0,1,0,0,0,1,1,1,1],
[0,1,1,1,1,1,0,0,0]];
4.var peo={
x:1,
y:3
};
5.window.onload = function(){
for(var i=0;i<9;i++){
for(var j=0;j<9;j++){
switch(map[i][j]){
case 1 :ctx.drawImage(img_1,j*50,i*50);break;
case 0 :ctx.drawImage(img_0,j*50,i*50);break;
}
}
}
Flash();
}
谢谢!

1.安装node,因为ts的编译器是js/ts写的;安装node后同时获得npm命令,这是nodejs世界里的包管理器(也可以看作node的app商店);2.安装vs2015或者vscode,当然这不是必须的,但是这里强烈推荐写ts的工具,vs第一,vsc第二;3.vs自带了TypeScript(vs2012+,vs2015update1自带了ts1.7),最新版本的typescriptforvs去官网下载即可,或者如果不依赖vs(比如mac环境),可以用命令行装ts编译器npmi-gtypescript@next4.安装了ts后,就会有2个命令可用:tsc和tsd,tsc用来编译TypeScript代码,tsd用来下载第三方js类库的ts定义文件(或者叫头文件),熟练使用tsd,工作效率提升,因为减少了80%查文档的时间,所以写ts可以说是jser打通了任督二脉,上手任何新的开发环境都很快;5.命令行下载react的ts头文件,tsdinstallreact-global--save注意上面之所以写react-global而不是react,因为我们接下来使用比较原始的写法,直接把React当作全局对象使用,而不作为es6模块(必须用import引入),不需要Babel编译也不需要webpack打包;上面执行的tsd命令下载了ReactJS类库的头文件,下面用tsc命令创建一个ts项目配置文件tsc--init命令创建了tsconfig.json配置文件,打开该文件增加"jsx":"react",就是自动把tsx变成最终的js,而不是jsx把"outDir":"built",这行去掉,这样编译的文件就会在当前目录输出"target":"es5",这里es3改成es5,"watch":true是否监听文件修改如果你用的是vs,这行不重要6.下载reactjs文件,如果没有安装bower命令,可以手动去官网下载react类库bowerinstall--savereact7.以上环境配置好了,开始写代码:创建一个demo.tsx文件(注意这里是tsx,不是ts也不是jsx)创建一个demo.html,添加文件的引用8.demo.tsx写代码classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx后,没有在目录下发现自动编译了demo.js,那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况,自动帮你把代码编译成js,这是编译后的js文件10.打开demo.html可以看到效果了;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;12.下班,有空再写;------时间分割------13、继续写,对1-12进行润色,转入传教模式;以上的代码,工厂方法在创建子类的同时,做了一些初始化的动作,这与单纯的原型继承不同,所以在使用class方式进行子类继承,这样的写法是无效的;classMyViewextendsReact.Component{render(){returnhello{this.state.name};//会抛异常,因为state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式,下面是官网给出的方案(这里TypeScript和ES6情况是一样的)classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、当组件化遇到强类型:从前写JS组件,一般复用性比较差,基本写完就仍,原因如下:1)暴露了太多的Dom结构以及别的实现细节;2)命名挫,缺乏可记忆性,本身编程中变量和方法的命名对于码农来说就是天坑;3)JS天生缺乏私有和公共成员的约束,不加注释根本不知道怎么使用该类库/组件;React解决了把dom标签暴露出去的问题,TS则解决了语言层面的问题,并提供了强大的重构能力,你根本不需要记住组件的API,因为工具会列出来;
温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答