zoukankan      html  css  js  c++  java
  • TypeScript简单的代码片段

    TypeScript中,接口、接口实现、函数重载;

    interface IThing{
        name:string;
        age:number;
        sayHello:{
            (name:string):string;
            (age:number):number;
        }
    }
    
    class Thing implements IThing{
        name:string;
        age:number;
        
        sayHello(name:string):string;
        sayHello(age:number):number;
        
        sayHello(arg:any):any{
            if(typeof arg === 'string'){
                return 'hello, ' + arg;
            }else if(typeof arg === 'number'){
                return arg*2;
            }else
            {
                throw new Error('invalid input args!!!');
            }
        }
    }
    
    interface ICar{
        engine:string;
    }
    class Car implements ICar{
        constructor(public engine:string){
        }
    }
    var thing = new Thing();
    thing.name = 'paul cheung';
    thing.age = 23;
    thing.sayHello("this is a string~~~");
    var car = new Car("Tesxt");
    document.body.innerText = car.engine;

    对应的javascript代码:

    var Thing = (function () {
        function Thing() {
        }
        Thing.prototype.sayHello = function (arg) {
            if (typeof arg === 'string') {
                return 'hello, ' + arg;
            } else if (typeof arg === 'number') {
                return arg * 2;
            } else {
                throw new Error('invalid input args!!!');
            }
        };
        return Thing;
    })();
    
    var Car = (function () {
        function Car(engine) {
            this.engine = engine;
        }
        return Car;
    })();
    var thing = new Thing();
    thing.name = 'paul cheung';
    thing.age = 23;
    thing.sayHello("this is a string~~~");
    var car = new Car("Tesxt");
    document.body.innerText = car.engine;

    TypeScript类定义和继承、module定义及使用:

    class Auto{
        engine:string;
        constructor(engine:string){
            this.engine = engine;
        }
    }
    
    class Truck extends Auto{
        bigTires:bool;
        constructor(engine:string,bigTires:bool){
            super(engine);
            this.bigTires = bigTires;
        }
    }
    
    module Shapes{
       export class Person{
            constructor(
                public name:string,
                public age:number
            ){}
        }    
    }
    var p = new Shapes.Person("paul cheung", 21)
    
    ///<reference path='shapes.ts'/>

    javascript代码:

    var __extends = this.__extends || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
    };
    var Auto = (function () {
        function Auto(engine) {
            this.engine = engine;
        }
        return Auto;
    })();
    
    var Truck = (function (_super) {
        __extends(Truck, _super);
        function Truck(engine, bigTires) {
            _super.call(this, engine);
            this.bigTires = bigTires;
        }
        return Truck;
    })(Auto);
    
    var Shapes;
    (function (Shapes) {
        var Person = (function () {
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            return Person;
        })();
        Shapes.Person = Person;
    })(Shapes || (Shapes = {}));
    var p = new Shapes.Person("paul cheung", 21);

    using http://www.typescriptlang.org/playground/ to do demo~~~

  • 相关阅读:
    Bootstrap_警示框
    Bootstrap_标签
    Bootstrap_分页
    Bootstrap_导航条
    Bootstrap_导航
    Bootstrap_按钮工具栏
    Bootstrap_下拉菜单
    Bootstrap_网格系统
    Bootstrap_表单_图标
    统计学习方法 李航---第12章 统计学习方法总结
  • 原文地址:https://www.cnblogs.com/paul-cheung/p/3233170.html
Copyright © 2011-2022 走看看