如何学习用Typescript写Reactjs

 我来答
育知同创教育
2016-04-08 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
  1. 安装node,因为ts的编译器是js/ts写的;
     安装node后同时获得npm命令,这是nodejs世界里的包管理器(也可以看作node的app商店);
    2.安装vs 2015或者vs code,当然这不是必须的,但是这里强烈推荐写ts的工具,vs第一,vsc第二;
    3.vs自带了TypeScript(vs2012+,vs2015update1自带了ts1.7),最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs(比如mac环境), 可以用命令行装ts编译器

    npm i -g typescript@next

    4. 安装了ts后, 就会有2个命令可用:tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件),熟练使用tsd,工作效率提升,因为减少了80%查文档的时间,所以写ts可以说是jser打通了任督二脉,上手任何新的开发环境都很快;

    5. 命令行下载react的ts头文件,

    tsd install react-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类库

    bower install --save react

    7.以上环境配置好了, 开始写代码:
    创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
    创建一个demo.html, 添加文件的引用

    <!doctype html>
    <html>
    <head>
       <script src="bower_components/react/react.min.js"></script>
       <script src="bower_components/react/react-dom.min.js"></script>
       <script src="demo.js"></script>
    </head>
    <body>
       
    </body>
    </html>

    8. demo.tsx 写代码

    class MyClass extends React.Component<any, any> {
       render() {
           return <h1>hello {this.props.name}</h1>;  
       }
    }

    document.addEventListener('DOMContentLoaded', function () {
       ReactDOM.render(<MyClass name="Tom" />, document.body);
    });

    9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行

    tsc

    tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件

    10. 打开demo.html可以看到效果了;
    11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
    12. 下班, 有空再写;
    ------时间分割------
    13、继续写,对1-12进行润色,转入传教模式;
    以上的代码,工厂方法在创建子类的同时,做了一些初始化的动作,这与单纯的原型继承不同,所以在使用class方式进行子类继承,这样的写法是无效的;

    class MyView extends React.Component {
       render() {
           return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null
       }
       //不起作用的
       getInitialState:(){
          return {name:'',age:20};
      }
    }

    需要改成如下方式,下面是官网给出的方案(这里TypeScript和ES6情况是一样的)

    class MyView extends React.Component {
       constructor(props, context) {
         super(props, context);

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式