Typescript學習

基本數據類型：

• number: 數值類型，let num:number = 10;

• boolean：布爾值, let bl:boolean = false;

• string：字符型, let name:string = 'hello';

• array：數組, let arr:number[] = [1,2,3];        let arr2:Array<number> = [1,2,3];

• enum：枚舉, enum Color {Red, Green, Blue = 4};

• any：任意,  let notSure:any = "123";  let list:any[] = [1,"hello", false];

• void：函數返回空,  function say():void {}

函數：

• 函數類型

function add(x:number, y:number):number {
    return x + y;
}
var add2 = function (x:number, y:number):number {
    return x + y;
}
var add3 = (x:number, y:number) =>{ return x + y};

• 可選和默認參數

// 參數後面加 ？表示次參數可選
function func1(a: string, b?: string): string {
    b = b == undefined ? 'ts':b;
    return a + ' ' + b;
}
console.log(func1('hello'));

// 默認參數
function func2(a: string, b: string = 'ts'): string {
    return a + ' ' + b;
}
console.log(func2('hello'));

• 可變參數

function studentsName(firstName:string, ...restNames:string[]) {
    return firstName + ' '+ restNames.join(' ');
}
console.log(studentsName('aa', 'bb', 'cc', 'dd'));

• Lambads和this關鍵字的使用

// Lambads和this關鍵字
() => {}

• 重載

function add(x:number):number {
    return 1;
}
function add(str:string, y:string):string {
    return "str";
}

類：

• 類的建立

// 類的建立
class Person{
    name:string;
    age:number;
    // 構造函數
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        console.log(`${this.name} is ${this.age} years old`);
    }
}
// 實例化
let p = new Person('zhangshan', 20);
p.print();

• 類的繼承

// 類的繼承
class Student extends Person{
    school:string | undefined;
}
var s = new Student("lisi", 22);
s.print()

• 訪問修飾符

// 訪問修飾符
/**
 * public: 公共的，外部、子類、內部均可以訪問
 * protect:能夠在子類中訪問，外部不可訪問
 * private: 私有的，只容許類內訪問
 */

• 封裝的實現

// 封裝的實現
class Hello {
    private _name:string = "";
    get name():string{
        return this._name;
    }
    set name(n:string){
        this._name = n;
    }
}
var h = new Hello();
h.name = 'world';
console.log(h.name);

• Static使用技巧

class Person{
    static hello:string;
}
Person.hello = 'hello';
console.log(Person.hello);

接口：

• 建立接口
• 可選屬性
• 函數類型
• 數組類型
• Class類型
• 接口繼承與混合類型

// 建立接口
interface text{
    label:string;
}

// 可選屬性
interface USB {
    name:string;
    version?:string;// 可選
}

// 函數類型
interface SearchFunc {
    (source:string, subString:string):boolean;
}
var mySearch:SearchFunc = function (source:string, subString:string):boolean {
    let result = source.search(subString);
    return result != -1;
}

// 數組類型
interface ArrayStr {
    [index:number]:string;
}
let myArray:ArrayStr = ['zhangsan', 'lisi'];// 此數組只能爲string類型

// class 類型
interface ClockInterface {
    currTime:Date;
    setTime(d:Date):void;
}
class Clock implements ClockInterface {
    currTime: Date;
    constructor(d:Date) {
        this.currTime = d;
    }
    setTime(d: Date): void {
        this.currTime = d;
    }
}

// 接口繼承與混合類型, 能夠多繼承
interface Shape{
    color:string;
}
interface PenStroke{
    pen:number;
}
interface Square extends Shape, PenStroke{
    side:number;
}
let s = <Square>{};
s.color = 'red';
s.side = 4;
s.pen = 20;

// 混合類型
interface Counter{
    interval:number;
    reset():void;
    (start:number):string;
}

泛型：

• 認識泛型
• 泛型的應用
• 泛型類型
• 泛型類

// 泛型
function Hello<T>(arg:T):T {
    return arg;
}
console.log(Hello<number>(123));
console.log(Hello<string>('abc'));

// 泛型的應用
interface Shape<T>{
    name:T;
}
var s:Shape<number>;

class HelloNumber <T> {
    name:T;
    constructor(n:T) {
        this.name = n;
    }
}
var hn = new HelloNumber<number>(10);
var hs = new HelloNumber<string>('abc');

模塊：

命名空間：

• namespace

裝飾器：

裝飾器是一種特殊類型的聲明，它可以被附加到類聲明，方法，屬性或參數上，能夠修改類的行爲。     
通俗的講裝飾器就是一個方法，能夠注入到類，方法，屬性參數上來擴展類、屬性、方法、參數的功能。     
常見的裝飾器有：類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器     
裝飾器的寫法：普通裝飾器（沒法傳參）、裝飾器工廠（可傳參）
裝飾器是過去幾年中js最大的成就之一，已經是ES7的標準特性之一。
執行順序：屬性 > 方法 > 方法參數 > 類，若是有多個相同的，它會先執行後面的

// 1.類裝飾器：
function logClass(params:any) {
    // params 就是當前類HttpClient,能夠進行擴展
}
@logClass
class HttpClient {
    constructor(parameters:any) {
    }
}

// 2.類裝飾器：裝飾器工廠(可傳參)
function logClass2(params:string) {
    return function (target:any) {
        // params:參數
        // target:類對象
    }
}
@logClass2("hello")
class HttpClient2 {
    constructor(parameters: any) {
    }
}

// 3.方法裝飾器
function get(params:any) {
    return function (target:any, methodName:any, desc:any) {
        // target:類對象
        // methodName:裝飾方法名
        // desc:描述
    }
}
class MethodClass{
    constructor(){}
    @get('hello')
    getMethod(){
    }
}