zoukankan      html  css  js  c++  java
  • 上手Typescript,让JavaScript适用于大型应用开发

    上手Typescript,让JavaScript适用于大型应用开发

    Typescript

    Typescript是一个基于静态类型的,能编译为JavaScript的JavaScript的超集。也就是说任何JavaScript都可以看成是Typescript,IDE能够更好的在编译期间进行错误检查,更适合于大型应用开发。是由微软开发的开源语言,继承了JavaScript的跨平台特性,可运行于任何浏览器,任何宿主,任何系统。

    安装

    安装Node.js后,在命令行输入命令:

    npm install -g typescript

    上面的命令就安装好了Typescript,检查是否安装成功,运行如下命令:

    tsc -version

    使用

    现在非常受欢迎的开源编辑器Visual Studio Code对Typescript有很好的支持。在Visual Studio Code中编写Typescript代码,后缀名为ts,示例main.ts

    interface Person {
    name:string;
    age:number;
    }
    function sortByName(a:Person[]){
    var result = a.slice(0);
    result.sort(function(x,y){
    return x.name.localeCompare(y.name);
    });
    return result;
    }
    var persons=[];
    persons.push({name:"Tom",age:20});
    persons.push({name:"Allen",age:30});
    console.log(sortByName(persons));

    上手Typescript,让JavaScript适用于大型应用开发

    编辑器自动提示错误

    编写好代码后,运行tsc命令将Typescript编译成普通的JavaScript

    tsc main.ts
    上手Typescript,让JavaScript适用于大型应用开发

    编译后的普通的Javascript

    用node main.js运行

    上手Typescript,让JavaScript适用于大型应用开发

     

    使用自动编译

    可以在当前目录下创建一个tsc的配置文件,并watch改文件进行自动边编译,那么每次修改了

    ts文件之后就会自动编译成js文件。

    运行命令

    tsc -init
    上手Typescript,让JavaScript适用于大型应用开发

     

    上面的命令会在目录下生成配置文件tsconfig.json

    上手Typescript,让JavaScript适用于大型应用开发

    默认编译目标为es5

    可以看到编译目标默认为es5,可以调整,所以再也不用担心浏览器兼容的问题。

    然后运行命令

    tsc -w

    就可以自动编译了。

    引用普通的JavaScript库

    实质上自动提示和报错功能是通过后台的d.ts文件实现的,这是一个修饰文件,没有任何JavaScript实现。

    如果我们再Typescript中引用普通的JavaScript的包,那么编辑器不能推断普通JavaScript的类型,这时需要为普通的JavaScript文件添加修饰文件(.d.ts)

    示例:如果我们需要在Typescript中引用Person.js库

    Person.js

    var Person =function(presonData){
    this.names=presonData.name;
    this.age=presonData.age;
    }
    Person.prototype.sortByName=function(a){
    var result = a.slice(0);
    result.sort(function(x,y){
    return x.name.localeCompare(y.name);
    });
    return result;
    }
    module.exports=Person;

    我们可以创建一个同名的修饰文件Person.d.ts文件:

    Person.d.ts

    type PersonData = {
    name:string;
    age:number;
    }
    declare class Person {
    constructor(personData:PersonData);
    name:string;
    age:number;
    sortByName(a:Person[]):Person[];
    }
    export=Person;
    上手Typescript,让JavaScript适用于大型应用开发

    修饰文件

    在我们的Typescript中引用,可以看到编辑器会自动提示

    上手Typescript,让JavaScript适用于大型应用开发

     

    引用市面上的流行库

    像上面所说,如果我们再Typescript中引用市面上流行的JavaScript库,是不需要自己写修饰文件的,所有常用Typescript已经帮我们做好了。

    例如需要引用JQuery库

    运行如下两个命令即可:

    npm install jquery
    npm install @types/jquery
    上手Typescript,让JavaScript适用于大型应用开发

     

    在Typescript脚本中引用JQuery,具有自动提示功能

    上手Typescript,让JavaScript适用于大型应用开发
  • 相关阅读:
    深度系统安装wine
    Android应用真正的入口在哪里?
    推荐系统算法概览
    Android面试题:Scrollview内嵌一个Button他的事件消费是怎样的?Move,Down,Up分别被哪个组件消费?
    Java面试题:多线程交替打印字符串
    EventBus使用初体验
    Andoird面试题:A活动启动B活动,他们的生命周期各是怎么样的?
    Android在开发过程中如何选择compileSdkVersion,minSdkVersion和targetSdkVersion
    华为2020暑期实习面经(已拿Offer)
    工商银行软件开发中心2020暑期实习面经(已拿Offer)
  • 原文地址:https://www.cnblogs.com/guchengnan/p/10132114.html
Copyright © 2011-2022 走看看