美文网首页
ts 快速入门

ts 快速入门

作者: codeflame | 来源:发表于2019-07-16 23:42 被阅读0次

    前言:请先熟悉ES6,包括其中的import、export、class等。ts特性右转百度,只讨论入门语法,语法方面基本就是c++/java等静态类型的语法简化版,而且兼容js语法,有学过这些的话光速入门。


    变量

    1.let x: number = 6
    其中:number说明x是一个number类型。也可以简写成let x = 6,typescript会自动推断这些简单类型

    2.let list: number[] = [1, 2, 3]
    表明list是一个数组,数组内的元素只能是number类型。也可写成let list: Array<number> = [1, 2, 3],这是typescript中泛型的写法,等价的。下面的几点均是对类型的进一步说明

    3.any代表任何类型,即跳过静态检查。如let x:any,那么就跟js中let x效果一模一样,ts不会对其进行检查。

    4.void用于没有返回值的函数。一个函数返回类型为void时,只要使用了返回值就会报错,而上面的any不会。

    5.null,undefined可以赋值给任意类型的变量。(没有使用--strictNullChecks时)

    6.let a: number|string|object联合类型。代表a既可以是number,也可以是string或object类型

    7.接口、类均可作变量的类型声明,但接口名可和变量重名,而类不行。

    注:Number,Object等不要number这些类型“关键字”混作一谈,后面会作详解


    函数

    function add(x: number, y: number): number {
        return x + y;
    }
    let myAdd = function(x: number, y?: number): number { return x; };
    let myAdd = function(x: number, y: number = 12): number { return x + y; };
    

    函数的参数类似变量声明,:number加到后面即可规定参数类型。函数的括号()加上:number即可规定返回类型。
    其中参数的后?代表该参数可选;给参数赋值y: number = 12代表参数默认取12。即“可选参数”和“默认参数”,效果和需要注意的细则右转百度


    接口

    ts的接口与java等语言的不同,ts的接口只是用来规定对象、函数、类的“形状”。

    规定对象形状

    interface Example {
      a: string;
      b?: number;
      readonly c: boolean;
    }
    
    let x: Example  = {a:"123", c:true};//正确
    x.c=false;//错误,c为只读属性
    x = { a: "123", b:12, c: false };//正确
    x = { a: "123", b:12, d:12};//两个错误,缺少c属性、不应该具有d属性
    

    如上面中,变量x一定有a、c属性,可能有b属性,其中对c属性只能读不能改。

    interface Example {
      [propName: string]: number;
    }
    let x: Example;
    x.a=1;//正确
    x.b=2;//正确
    x.c="123";//错误
    

    这样的接口表示对象可以有若干个“key类型为字符串、value类型为number”的属性。
    另一种可能情况是[propName: number]: number;,他表明你可以像x[0]=0;x[1]=1这样使用。
    且必须注意:

    interface Example {
      [propName: string]: number;
      a:string;
    }
    

    这样会报错。如上面解释,[propName: string]: number;规定x.a是number类型,而a:string;规定x.a是string类型,产生二义性导致报错。
    一个简单解决方式是改为[propName: string]: any;,使其兼容(string是any的子类),详细可右转文档

    规定函数形状

    interface Example1 {
      (a: number): boolean;
      (a: number, b: number): boolean;
      new (a: number, b: number): boolean;
      a:number;
    }
    let m1: Example1, temp:any;
    temp = function (a,b) {return true;}
    temp.a=123;
    m1 = temp;
    let a = m1(1), b = m1(1, 2), c = new m1(1, 2); 
    
    interface Example2{
      (a: number): boolean;
    }
    let m2: Example2 = function (a: number): boolean { return true; }
    

    一个接口可以定义函数的多种形状,如上面的Example1接口。
    当接口如Example2只规定了一种形状时,变量m2直接赋值成这种类型的函数就行了。
    当接口如Example1规定了多种形状时,变量m1无法直接简单赋值,此时需要搞个any类型的变量temp,js怎么做的这个temp就怎么做,最后赋值给变量m1。

    注意:
    1.接口名可以和变量重名,即let Example1:Example1;是可行的。同理,在typescript中,NumberString这些,既是接口也是变量。建议去typescript官方库看下Number具体是什么一回事。
    2.接口可在不同地方重复定义,后面重复定义的接口内容将会被合并原有接口。简单来说就是接口具有灵活的扩展性,你不必在一处地方完全定义一个接口,也可以自行对原有接口进行补充。


    写法跟js的class几乎一样,下面简要概括

    class A {
        a: string;
        protected c: string;
        constructor(a: string, public b: string) {
            this.a= a;
        }
        m():string {
          return this.a + this.b;
        }
        static mm():number { return 0; }
    }
    let x = new A("1","2");
    

    类成员a直接写在里面,访问级别默认是public,变量和函数同样遵从上面讲过的写法。

    其特点:
    1.构造函数里面的参数public b: string:当你在构造函数的参数b前面加上public、protected、private中任意一个,就代表声明了一个成员变量b,且把参数b的值赋给它。简单来说,就是一种对成员变量定义+构造函数中初始化的简写形式。
    2.像java一样,类可以单继承(extends)一个类,实现(implements)多个接口;接口可以继承多个接口。比较奇葩的是接口同样可以继承多个类(interface B extends A{}),不过建议尽量别这样用。
    3.类实现接口,仅代表类的实例部分被接口所约束,即类中必须重新声明定义接口中出现的方法和成员。这表明我们无法直接通过接口,规定其实现类的static修饰的成员、函数以及构造函数(constructor)。深入了解还请右转文档


    命名空间

    即namespace,作用类似与js的import/export。用的比较少,我就大概说说了。

    import/export大家都熟了,就是一个js一个模块,另外一个文件可以通过import,导入export导出的变量和成员。这个的稍微不足之处是限死了一个模块只能在一个js文件里,不过我们也能通过额外写个js模块负责总的导入导出,其实也还行。
    而typescript中的namespace,同样可以看作是模块化,不过除去了上述限制。你可以在一个ts文件里写多个namespace,也可以把一个namespace分散在若干个ts文件中,更加灵活。

    namespace ns {
      const a = 1;
      let b = 1;
      export const c = a + b;
      export class A { }
    }
    let x = ns.c, xx = new ns.A();
    

    可以看作是

    //f1.js
    const a = 1;
    let b = 1;
    export const c = a + b;
    export class A { }
    
    //f2.js
    import * as ns from './f1.js'
    let x = ns.c, xx = new ns.A();
    

    当然只是个大概示意,为了说明namespace拿来干什么用,不要忘记其特性。
    注意:需要通过特殊注释来发现另一个文件中的namespace,如/// <reference path="Validation.ts" />这种形式,而且有顺序先后的影响。深入了解请右转文档


    声明文件

    d.ts后缀那些ts文件。如果是全项目都用ts的,那么没什么问题;但如果你是js、ts混杂的,ts中无法识别js中的东西,这就需要我们去为这些js中的对象、函数、类等写一份ts格式的声明,否则ts中大量报错未定义、类型不对等等东西。

    介绍两个关键字typedeclare
    (1)type跟c++的type差不多,用于类型别名,包括联合类型,如type NumStr=number|string

    (2)declare基本上专门用于声明文件,被其修饰的变量/函数/类的成员和函数均无法被初始化赋值。
    当然你要用在普通ts文件、或者声明文件不用它也是可以的,只是某些情况下你必须使用,如declare const XXX;,如果不加上declare,ts会报错常量未初始化,但实际上这个是来自js的常量,你不能在ts中重复初始化,否则编译为js后实际运行时就会报错。
    另外一个要点是declare namespace X{}来修饰命名空间X时,等价于用export declare来修饰其内部的每一个变量:

    //a.js
    var X={a:1,b:2,c:3}
    export X;
    
    //a.d.ts
    //方式1
    declare namespace X {
      var a: number;
      var b: number;
      var c: number;
    }
    //方式2
    namespace X {
      export declare var a: number;
      export declare var b: number;
      export declare var c: number;
    }
    //方式3
    interface X{
      a: number;
      b: number;
      c: number;
    // ():number;
    }
    declare var X: X;
    

    注意:声明一个对象不一定要用namespace实现,也可通过接口+声明一个对象来实现,副作用是多了一个基本无作用的接口,如方式3。但是,假如X是一个函数对象,即X能以let a=X()函数调用时,你基本上只能靠接口实现(你用any来搞也行),如方式3的注释

    相关文章

      网友评论

          本文标题:ts 快速入门

          本文链接:https://www.haomeiwen.com/subject/rdhwkctx.html