一天入门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);














原文地址:https://www.cnblogs.com/music-liang/p/12701345.html