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

发布网友发布时间：2022-04-25 20:39

共1个回答

热心网友时间：2022-04-21 16:03

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，因为工具会列出来；