1. 程式人生 > >typescript語法入門

typescript語法入門

 一、字串
    1.多行字串: (支援換行)
        `
            <div></div>
            <p></p>
        `
    2.表示式:${} --> 變數 
        var a = 'david';
        var b = function(){return 'world'};
        console.log( `hello ${a}` )   --> hello david
        console.log( `hello ${b()}` ) --> hello world
    3.自動拆分字串:
        function fn(template, name, age){
            console.log( template )
            console.log( name )
            console.log( age )
        }
        var a = 'david';
        var b = 23;
        fn`hello my name ${a}, i'm ${b}`;
        -->會輸出:
            陣列['hello my name ',', i'm ',''],
            david,
            23

二、引數新特性
    1.指定型別:
        Ⅰ.指定某種型別:
            var a: number = 10;
        Ⅱ.指定所有型別:
            var b: any = 10;
        Ⅲ.預設會指定為'number'型別(不宣告時):
            var c = 10;
        Ⅳ.函式沒有返回值:
            function(x: string,y: number) :void{}
        Ⅴ.自定義型別:
            class Person{
                name: string;    【結尾為分號,或者不填】
                age: number;
            }
            var wenwen: Person = new Person();
            wenwen.name = 'david';
            wenwen.age = 23;
            //name,age會限定型別
    2.指定預設值:
        function(x,y: number = 1){} --> 沒有傳入y值時,使用預設值:1
    3.可選引數:[引數後面加?]
        function(x, y?: number = 1){}

三、函式新特性
    1.Rest and Spread操作符:[宣告傳入任意數量的方法引數]
        function add(...args){}
    1-2.【*ts不支援】反用:
        function add(a, b, c){
            console.log( a,b,c )
        }
        var a1 = [1,2];
        var a2 = [1,2,3,4]
        add(...a1)  // 1,2,undefined
        add(...a2)  // 1,2,3
    2.generator函式:[控制函式的執行過程,手工暫停和恢復程式碼執行]
        function* add(){
            console.log( 'start' );
            yield;
            console.log( 'end )
        }
        var a = add();
        a.next();
        // start
        a.next();
        // start end
    3.析構表示式:[通過表示式將物件或陣列拆解成任意數量的變數]
        Ⅰ、物件:
            function add(){
                return {
                    code: 'ibm',
                    price: {
                        price1: 100,
                        price2: 200
                    }
                }
            }
            var {code, price: {price1}} = add();    --> 可訪問變數:code,price1
        Ⅱ、陣列:
            var arr = [1,2,3,4,5]
            var [a,,b,..c] = arr;                   --> a=1;b=3;c=[4,5]
四、表示式和迴圈
    1.箭頭表示式:
        -無引數:() => {};
        -一引數:(a) => {}; || a => {}
        -多引數:(a,b) => {};
        *a => a;返回值只有一句,不需要{}
        *{}中是返回值
    2. for...of 迴圈:
        obj.forEach();  -->迴圈值,不能被打斷
        for...in        -->迴圈鍵,可以被打斷
        for...of        -->迴圈值,可以被打斷
五、面向物件特性
    1.類:
        Ⅰ、宣告
            1).訪問控制符:
                * public[預設]  共有
                * private       私有(類的內部可以訪問)
                * protected     私有(類的內部和子類可以訪問)
        Ⅱ、類的建構函式(constructor):只有類被例項化時呼叫,且只執行一次
            class Person {
                constructor(public name) {   //public宣告
                    this.name = name;
                }
                eat() {
                    console.log( this.name )
                }
            }
            var son1 = new Person('son1');
            son1.eat();   --> // son1
        Ⅲ、繼承  [extends繼承,super在子類中指向父類]
          //*父類
            class Person {
                constructor(public name: string) {
                    console.log('haha');
                }
                eat() {
                    console.log('eating...');
                }
            }
          //*子類
            class Employee extends Person{
                constructor (public name: string, id: number) {
                    super(name);            //*必須要在子類中呼叫一次父類
                    console.log('xixi');
                }
                work() {
                    super.eat();
                    this.doWork();
                }
                private doWork() {
                    console.log('do work')
                }
            }
          //*類的例項
            var el = new Employee('David', 1);
            el.work();
            --> 輸出:
                haha | xixi | eating... | do work
    2.泛型:引數化的型別,一般用來限制集合的內容   [陣列內的值只能是 Person或者Person的子類或者例項]
        *接著上一個‘繼承’的例子寫:
            var workers: Array<Person> = [];
            workers[0] = new Person('David1');
            workers[1] = new Employee('David2', 1);
    3.介面:用來建立某種程式碼約定,使得其它開發者在呼叫某個方法或建立新的類時必須遵循介面所定義的程式碼約定。
        Ⅰ、interface 作為屬性的型別
            interface IPerson{
                name: string;
                age: number;
                add();
            }
            class Person {
                constructor(public config: IPerson) {}
            }
            var p = new Person({              //必須寫入 name,age屬性且型別正確
                name: 'david',
                age: 1,
                add(){}
            });
        Ⅱ、implements 作為類的型別
            interface Animal{
                eat();
                name: string;
            }
            class Person implements Animal{
                eat() {};                    //必須要寫eat方法
                name;                        //必須要寫name屬性
            }
    4.模組:
        export 暴漏方法|屬性|類
            export var a = 1;
            export var b = () => {};
            export class c {};
        import {a,b,c} from 'xxx'
    5.註解:為程式的元素(類,、方法、變數)加上更直觀明瞭的說明,這些說明資訊與程式的業務邏輯無關,而是供指定的工具或框架使用的。
        告訴框架或者工具,如何使用。
        @Component宣告註解
    6.型別定義檔案:型別定義檔案用來幫助開發者在TypeScript中使用已有的JavaScript的工具包,如JQuery
      型別定義檔案  *.d.ts
      npm install -g typings