TypeScript入门

先编译，后运行

tsc test1.ts
node test1.js

1.简单的例子 test1.ts

function greeter(person:string){
    return "Hello " + person;
}


var user = "Joe User";

console.log(greeter(user));

2.类型和声明（Types and declarations）

//test2.ts
//number
//string
//Boolean
//null, undefined
//any
//void
var x = 1000;
var xx: number;
var y: string;

var z: boolean;
var zz = true;

var abc = 'stringvalue';

TS中有三种声明变量的方式：var, let , const。const跟let很像，只不过const一经定义便不能修改；

let和var的不同： let只在离自己最近的一组大括号内有效

//test3.ts
//var let const
//difference between let and var
function f(shouldInitialise: boolean){
    if(shouldInitialise){
        var x = 10;
    }
    return x;
}
console.log(f(true));   //10
console.log(f(false));  //undefined

function f1(shouldInitialise: boolean){
    if(shouldInitialise){
        let x1 = 10;
    }
    return x1;
}

console.log(f1(true));   //10
console.log(f1(false));  //undefined

test3.png

3.Type unions 变量可以为一种或几种类型

typeUnion1.png
typeUnion2.png

4.流程控制（flow control）

for(var i = 0; i < 10; i++){
    console.log(i); //0 1 2 3 4 5 6 7 8 9
}
let idx = 0;
while(idx < 10){
    console.log(idx++);//0 1 2 3 4 5 6 7 8 9
}

let index: number = 0;
do{
    console.log(index++);//0 1 2 3 4 5 6 7 8 9
}while(index < 10);

let arr:number[] = [2,4,6,8,10];
for(let value of arr){
    console.log(value);//2 4 6 8 10
}

5.方法（function）

//function1.ts
function myfunction(param: string): void{

}

function myfunction1(param1: number, param2: number): number{
    return param1 + param2;
}

console.log(myfunction1(1243, 3259235)); //3260478


function myfunction2(param1: number, param2: number,param3: number = 0): number{
    return param1 + param2 + param3;
}

console.log(myfunction2(1, 2,3)); //6
console.log(myfunction2(1, 2)); //3

function add(param1: number, param2: number,param3?: number): number{
    return param1 + param2 + param3;
}
console.log(add(1, 2,3)); //6
console.log(add(1, 2)); //NaN

//function2.ts
function myfunc(...args:any[]){
    for(let arg of args){
        console.log(typeof(arg));
    }
}
myfunc(1,2,3,'a','b','c',true); //number number number string string string boolean

objFunction1.png
objFunction2.png
objFunction3.png

6.字符串和数组（strings and array）

Tips:变量赋值最好还是用单引号，因为双引号会用在写HTML的时候；

//strings1.ts
var abc: string = 'abcdef';
var def: string = "abcdef";
//"<div style=\"display: none\"></div>";

var composite: string = 'This string has both "${abc}" and "${def}"'; //This string has both "${abc}" and "${def}"
console.log(composite);
var composite1: string = "This string has both \""+abc+"\" and \""+def+"\""; //This string has both "abcdef" and "abcdef"
console.log(composite1);

//string2.ts
var abc: string = 'avcdef';
var def: string = "a:b:c:d:e:f";

let arr = def.split(':');
console.log(arr); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(abc.slice(2,4));//cd
console.log(abc.indexOf('c'));//2

注意array().slice和array.splice()的区别

arrray.ts
var arr1: number[] = [1, 2, 3, 4, 5, 6];
arr1.push(1); 
console.log(arr1.length); //7
console.log(arr1.slice(1,2));[ 2 ]
console.log(arr1);[ 1, 2, 3, 4, 5, 6, 1 ]
console.log(arr1.splice(1,2));[ 2, 3 ]
console.log(arr1);[ 1, 4, 5, 6, 1 ]

7.接口，类和继承（interfaces, classes and inheritance）

TS真正改变JS的地方是这个部分；

//interface.ts
interface IPerson {
    first_name: string;
    last_name: string;
    age: number;
}

let person1: IPerson = {
    first_name: 'marc',
    last_name: 'really long',
    age:105,
}
person1.first_name = 'Marc';
person1.last_name = 'Wandscheider';

interface IDescriptivePerson extends IPerson {
    hair_colour: string;
    height: number;
    eye_colour: string;
    weight: number;
}

let person2: IDescriptivePerson = {
    first_name: 'Bobo',
    last_name: 'The colown',
    age: 12,
    hair_colour: 'brown',
    height: 180,
    eye_colour: 'green',
    weight: 170,
}

interface INationality {
    nationality: string;
}
interface INationalisedDescriptivePerson extends IDescriptivePerson, INationality{}

let person3: INationalisedDescriptivePerson = {
    first_name: 'Bobo',
    last_name: 'The clown',
    age: 12,
    hair_colour: 'brown',
    height: 180,
    eye_colour: 'greeen',
    weight: 170,
    nationality: 'funlandia'
}

//class.ts
class PersonClass{
    first_name: string;
    last_name: string;
    age: number;
}
let pp1 = new PersonClass();
pp1.first_name = 'marc';
pp1.last_name = 'long';
pp1.age = 39502;
console.log(pp1); //PersonClass { first_name: 'marc', last_name: 'long', age: 39502 }

public, private, protected

//class实现接口
interface IDisplayable{
    display():void;
    displayAsString(): string;
}
class PersonClass implements IDisplayable{
    first_name: string;
    last_name: string;
    age: number;
    
    protected _ssn: string;
    display(): void{
        console.log(this);
    }
    displayAsString(): string{
        return JSON.stringify(this, null, 2);
    }
}

let pp1 = new PersonClass();
pp1.first_name = 'marc';
pp1.last_name = 'long';
pp1.age = 39502;
console.log(pp1); //PersonClass { first_name: 'marc', last_name: 'long', age: 39502 }

就像接口可以扩展接口，类也可以扩展类

class SuperPerson extends PersonClass{
    super_power: string;
}

let sp1 = new SuperPerson();
sp1.first_name = 'asdf';
sp1.last_name = 'qwer';
sp1.age = 12;
sp1.super_power = 'lasert beams';

sp1.display();
/*
SuperPerson {
  first_name: 'asdf',
  last_name: 'qwer',
  age: 12,
  super_power: 'lasert beams' }
*/

//class 结构体 constructor
interface IDisplayable{
    display():void;
    displayAsString(): string;
}
class PersonClass implements IDisplayable{
    first_name: string;
    last_name: string;
    age: number;
    
    protected _ssn: string;

    constructor(fn:string, ln:string, age:number){
        this.first_name = fn;
        this.last_name = ln;
        this.age = age;
        this.display();
    }
    display(): void{
        console.log(this);
    }
    displayAsString(): string{
        return JSON.stringify(this, null, 2);
    }
}

class SuperPerson extends PersonClass{
    super_power: string;
}

let pp1 = new PersonClass('marc', 'wandschneider', 1395);
let sp1 = new SuperPerson('asdf','qwer',1234);

class SuperPerson extends PersonClass{
    super_power: string;
    constructor(fn:string, ln: string, age:number, sp:string){
        super(fn,ln,age);
        this.super_power = sp;
    }
}
let sp1 = new SuperPerson('asdf','qwer',1234,'laser beams');

private就是只有这个类可以看到它；super person也不可以用this._ssn,会报错；protected除了这个类以及类的扩展外，都是不可见的；