zoukankan      html  css  js  c++  java
  • 一天入门typescript

     
     
     
    class Greeter {
        greeting: string;
        constructor(message: string) {
            this.greeting = message;
        };

        name:string="Henry";
        uid:number=10086;

        greet() {
            return "Hello, " + this.greeting;
        };
    }
    let greeter = new Greeter("world");
    console.log(greeter.greet());
    console.log("");

    ////===================for循环
    console.log("=============== for");
    var num:number = 5; 
    var i:number; 
    var result = 1; 
     
    for(i = num;i>=1;i--) {
        result *= i;
    }
    console.log(result)


    ////===================for...in
    console.log("=============== for...in");
    var n:any = [1,2,3,4,5]
    for(var j in n)
    {
        console.log("%d %d", j, n[j]);
    }


    //=============== for...of
    console.log("=============== for...of");
    let someArray = [1, "stringABCDE", false];
    for(let entry of someArray)
    {
        console.log(entry); // 1, stringABCDE, false
    }


    //=============== forEach
    console.log("=============== forEach");
    let list = [4,5,6];
    list.forEach((val, idx, array)=>{
        // val: 当前值
        // idx: 当前index
        // array: Array
        console.log("val:%d, idx:%d", val, idx);
        console.log(array);
    })


    //=============== every
    console.log("=============== every");
    let list2 = [4,5,6];
    list2.every((val, idx, array)=>{
        // val: 当前值
        // idx: 当前index
        // array: Array
        console.log("val:%d, idx:%d", val, idx);
        console.log(array);
        return true;  //Contiunes
        //Return false will quite the iteration
    })


    //=============== while
    console.log("=============== while");
    var num:number = 5; 
    var factorial:number = 1; 
     
    while(num >=1) { 
        factorial = factorial * num; 
        num--; 
    console.log("5 的阶乘为:"+factorial);


    console.log("===================== function ================");
    // 函数定义
    function greet():string { // 返回一个字符串
        return "call function : Hello World" 
     
    function caller() { 
        var msg = greet() // 调用 greet() 函数 
        console.log(msg) 
    // 调用函数
    caller()

    console.log("============ function ======= with para =========");
    function add(x: number, y: number): number {
        return x + y;
    }
    console.log(add(1,2))


    console.log("===== function ==== 可选参数和默认参数 =========");
    function calculate_discount(price:number,rate:number = 0.50) { 
        var discount = price * rate; 
        console.log("计算结果: ",discount); 
    calculate_discount(1000) 
    calculate_discount(1000,0.30)



    console.log("===== function === 参数个数不确定 ========");
    function buildName(firstName: string, ...restOfName: string[]) {
        return firstName + " " + restOfName.join(" ");
    }
      
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
    console.log(employeeName);


    function addNumbers(name:string, ...nums:number[]) {  
        var i;   
        var sum:number = 0; 
        
        console.log("%s,不定参数个数测试.", name);

        for(i = 1;i<nums.length;i++) { 
           sum = sum + nums[i]; 
        } 
        console.log("和为:",sum) 
     } 
     addNumbers("test1", 1,2,3) 
     addNumbers("test2",10,10,10,10,10)


    //====================[匿名函数]==================
    console.log("");
    var msg = function() { 
        return "hello world.ni ming function.";  
    console.log("不带参 匿名函数: " + msg())


    var res = function(a:number,b:number) { 
        return a*b;  
    }; 
    console.log("带参数,匿名函数: " + res(12,2));


    (function () { 
        var x = "Hello!!";   
        console.log("匿名函数自调:" + x)     
     })();


     var myFunction = new Function("a", "b", "return a * b"); 
     var x = myFunction(4, 3); 
     console.log("内置构造函数 定义函数: " + x);



     function fibos_fun(num:number) :number{
        if (num <= 0) {         // 停止执行
            return 1; 
        } else {     
            return (num + fibos_fun(num - 1));     // 调用自身
        } 
    }; 
    console.log("fibos_fun: " + fibos_fun(6));      // 输出 720



    //============= Lambda函数,也成为箭头函数
    // ( [param1, parma2,…param n] )=>statement;
    var foo = (x:number)=>10 + x 
    console.log(foo(100))      //输出结果为 110


    //Lambda函数 作为语句块 赋值给一个 变量
    var fooA = (x:number)=> {    
        x = 10 + x 
        console.log(x)  
    fooA(100)
    //=======================
    var func = (x:any)=> { 
        if(typeof x=="number") { 
            console.log(x+" 是一个数字") 
        } else if(typeof x=="string") { 
            console.log(x+" 是一个字符串") 
        }  
    func(12) 
    func("Tom")



    var disp =()=> { 
        console.log("Function invoked.无参的时候,可以设置空括号."); 
    disp();


    //==================函数的重载
    console.log("=======函数的重载======参数不同...");
    function dispA(s1:string):void;
    function dispA(n1:number,s1:string):void; 
    function dispA(x:any,y?:any) { 
        console.log(x); 
        console.log(y); 
    dispA("abc") ;// abc,undefined
    dispA(1,"xyz");// 1,xyz




    console.log("TypeScript Number 属性: "); 
    console.log("最大值为: " + Number.MAX_VALUE); 
    console.log("最小值为: " + Number.MIN_VALUE); 
    console.log("负无穷大: " + Number.NEGATIVE_INFINITY); 
    console.log("正无穷大:" + Number.POSITIVE_INFINITY);
    console.log("");

    // ////可以正常转为js,但是在vs下面有错误提示...
    // function employee(id:number,name:string) { 
    //     this.id = id 
    //     this.name = name 
    // } 
    // var emp = new employee(123,"admin") 
    // console.log("添加 email 属性");
    // employee.prototype.email = "admin@runoob.com" 
    // console.log("员工号: "+emp.id) 
    // console.log("员工姓名: "+emp.name) 
    // console.log("员工邮箱: "+emp.email)



    //========================== String 
    var str = new String( "This is string" ); 
    console.log("str.constructor is:" + str.length)


        
    // var strA1 = new String( "RUNOOB" ); 
    // var strA2 = new String( "GOOGLE" ); 
    // var strA3 = strA1.concat( strA2 ); 
    // console.log("str1 + str2 : "+strA3) // RUNOOBGOOGLE



    var strA4 = new String( "aThis is beautiful string" );
    var index = strA4.localeCompare( "This is beautiful string");  
    console.log("localeCompare first :" + index );  // 0

    var strA5 = "Runoob Google"; 
    console.log(strA5.toLowerCase( ));  // runoob google

    var strA6 = "Runoob"; 
    console.log(strA6.toString( )); // Runoob

    var strA7 = "Runoob Google"; 
    console.log(strA7.toUpperCase( ));  // RUNOOB GOOGLE



    //======================数组================
    var sites:string[];
    sites = ["Google", "Runoob", "Taobao"];
    console.log(sites);
    console.dir(sites);

    var testB = ["abc", 1,2,3,"google"];
    console.dir(testB);
    testB[0] = testB[0] + 666;
    testB[1] = testB[1] + 777;
    console.dir(testB);

    if(typeof(testB[0]=='string'))
    {
      console.log("testB[0] is string.");   
    }
    else if(typeof(testB[0]=='number'))
    {
        console.log("testB[0] is number.");   
    }

    if(typeof(testB[1]=='string'))
    {
      console.log("testB[1] is string.");   
    }
    else if(typeof(testB[1]=='number'))
    {
        console.log("testB[1] is number.");   
    }
    // [ 'abc666', 778, 2, 3, 'google' ]
    var arr_names:number[] = new Array(4)  
    for(var i = 0; i<arr_names.length; i++) { 
            arr_names[i] = i * 2 
            console.log(arr_names[i]) 
    };
    console.dir(arr_names);

    //=================
    var sitesStr:string[] = new Array("Google","Runoob","Taobao","Facebook") 
     
    function dispStr(arr_sites:string[]) {
            for(var i = 0;i<arr_sites.length;i++) { 
                    console.log(arr_sites[i]) 
            }  
    }  
    dispStr(sitesStr);


    ///数组的 foreach 属性
    let numA = [7, 8, 9];
    numA.forEach(function (value) {
        console.log(value);
    }); 


    ////
    console.log("pop()删除数组最后面的一个元素");
    var numbers = [1, 4, 9]; 
    var element = numbers.pop(); 
    console.log("element is : " + element );  // 9
    var element = numbers.pop(); 
    console.log("element is : " + element );  // 4


    console.log("tuple----------->>>>");
    var mytuple = [10,"Runoob"];
    console.log(mytuple);


    //=========================
    console.log("----->>>联合类型<<<-------");
    function disp_union(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
    disp_union("Runoob") 
    console.log("输出数组....") 
    disp_union(["Runoob","Google","Taobao","Facebook"])


    //=================接口
    console.log("------------接口------------");
    interface IPerson{
        firstName:string,
        lastName:string,
        sayHi:()=>string
    };

    var customer:IPerson={
        firstName:"Tom",
        lastName:"Hanks",
        sayHi:():string=>{return "Hi, there."}
    };

    customer.firstName = "henry";
    console.log("customer 对象 ");
    console.log(customer.firstName);
    console.log(customer.lastName);
    console.log(customer.sayHi());

    var employee:IPerson={
        firstName:"Jim",
        lastName:"Blakes",
        sayHi:():string=>{return "hello!!!!"}
    };

    console.log("Employee 对象 ");
    console.log(employee.firstName);
    console.log(employee.lastName);


    console.log("==============联合类型和接口=============");
    interface RunOptions { 
        program:string; 
        commandline:string[]|string|(()=>string); 
     
    // commandline 是字符串
    var options:RunOptions = {program:"test1",commandline:"Hello"}; 
    console.log(options.commandline)  
     
    // commandline 是字符串数组
    options = {program:"test1",commandline:["Hello","World"]}; 
    console.log(options.commandline[0]); 
    console.log(options.commandline[1]);  
     
    // commandline 是一个函数表达式
    options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
     
    var fn:any = options.commandline; 
    console.log(fn());


    console.log("==========接口和数组==========");
    interface namelist { 
        [index:number]:string 
     }   
     //var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型
     interface ages { 
        [index:string]:number 
     }   
     var agelist:ages = ["John",1,"Bran"]; 
     agelist["John"] = 15   // 正确 
    // agelist[2] = "nine"   // 错误
    console.dir(agelist);



    console.log("============单继承实例==========");
    interface Person { 
        age:number 
     } ;
      
     interface Musician extends Person { 
        instrument:string 
     }   ;
     var drummer = <Musician>{}; 
     drummer.age = 27 ;
     drummer.instrument = "Drums" ;
     console.log("年龄:  "+drummer.age);
     console.log("喜欢的乐器:  "+drummer.instrument);

     var drummer2 = <Musician>{}; 
     drummer2.age = 666 
     drummer2.instrument = "abcdefg" 
     console.log("年龄:  "+drummer2.age);
     console.log("喜欢的乐器:  "+drummer2.instrument);


    console.log("===========多继承实例========")
    interface IParent1 { 
        v1:number 
    }; 
    interface IParent2 { 
        v2:number 
    } ; 
    interface Child extends IParent1, IParent2 { } ;
    var Iobj:Child = { v1:12, v2:23} ;
    console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2);


    console.log("========== TypeScript类 ==========")
    class Person{};

    class Car { 
        // 字段 
        engine:string; 
     
        // 构造函数 
        constructor(engine:string) { 
            this.engine = engine 
        }  
     
        // 方法 
        disp():void { 
            console.log("发动机为 :   "+this.engine) 
        } 
    }

    var objCar = new Car("Engine 1");
    objCar.disp();
    objCar.engine = "Engine 2";
    objCar.disp();



    //============= 类继承 extend ============
    class Shape { 
        Area:number 
        
        constructor(a:number) { 
           this.Area = a 
        } 
     } 
      
     class Circle extends Shape { 
        disp():void { 
           console.log("圆的面积:  "+this.Area) 
        } 
     }
       
     var obj = new Circle(223); 
     obj.disp()


    console.log("==========继承类的方法重写==========");
    class PrinterClass { 
        doPrint():void {
           console.log("父类的 doPrint() 方法。") 
        } 
     } 
      
     class StringPrinter extends PrinterClass { 
        doPrint():void { 
           super.doPrint() // 调用父类的函数
           console.log("子类的 doPrint()方法。")
        } 
     }
    var abc = new StringPrinter();
    abc.doPrint();


    class Encapsulate{
        str1:string="hello"
        private str2:string = "world"
    };

    var objEncapsulate = new Encapsulate();
    console.log(objEncapsulate.str1);
    //console.log(objEncapsulate.str2);

    console.log("=========类和接口======");
    interface ILoan { 
        interest:number 
     } 
      
     class AgriLoan implements ILoan { 
        interest:number 
        rebate:number 
        
        constructor(interest:number,rebate:number) { 
           this.interest = interest 
           this.rebate = rebate 
        } 
     } 
      
     var objAgri = new AgriLoan(10,1) 
     console.log("利润为 : "+objAgri.interest+",抽成为 : "+objAgri.rebate )



    //=================TypeScript对象===============
    var object_name = {
        key0:123,
        key1:"valu1" ,//标量
        key2:"value2",
        key3:function(){  //函数
            console.log("object_name...key3..func");
        },
        key4:["content1", "content2", 1,2,3,4],  //集合
        key5:[1,2,3,4,5,6]   //数组
    };




    // var obj_name1 JSON.parse(JSON.stringify(object_name));
    // var obj_name2 JSON.parse(JSON.stringify(object_name));
    // var obj_name3 JSON.parse(JSON.stringify(object_name));


    // obj_name1.key0 = 999;
    // obj_name1.key1 = "111";
    // obj_name1.key2 = "222";

    // obj_name2.key0 = 333;
    // obj_name2.key1 = "444";
    // obj_name2.key2 = "555";

    // obj_name3.key0 = 666;
    // obj_name3.key1 = "777";
    // obj_name3.key2 = "888";

    // console.log("obj_name--------->>>>>start");
    // console.log(obj_name1);
    // console.log(obj_name2);
    // console.log(obj_name3);
    // console.log("obj_name--------->>>>>end");




    var siteA = {
        site1:"Runoob",
        site2:"Google"
    };
    //访问对象的值
    console.log(siteA.site1);
    console.log(siteA.site2);


    console.log("如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:");
        /// <reference path = "SomeFileName.ts" />



    interface PersonT1 {
        firstName: string;
        lastName: string;
    };

    var personA = <PersonT1>{};
    personA.firstName = "HenryA";
    personA.lastName = "HeA";

    var personB = <PersonT1>{};
    personB.firstName = "HenryB";
    personB.lastName = "HeB";

    var personC = <PersonT1>{};
    personC.firstName = "HenryC";
    personC.lastName = "HeC";

    console.dir(personA);
    console.dir(personB);
    console.dir(personC);














  • 相关阅读:
    移动Web框架:jQuery Mobile VS Sencha Touch
    2011最具争议性文章:中国网页设计为什么这么烂?
    如何学习嵌入式linux[转]
    嵌入式linux,老手给新手的建议
    开发菜鸟应该知道的十件事
    C#中二进制、八进制、十六进制和十进制之间的相互转化问题
    使用splitter控件 将界面分成可以调整宽度的三个部分
    Mutex 类
    Java 发邮件
    Java Servlet介绍 2
  • 原文地址:https://www.cnblogs.com/music-liang/p/12701345.html
Copyright © 2011-2022 走看看