typescript入門から現在までのまとめ1

この前nodeの勉強を発表しました.今団子はいよいよtsに対して総括とカタログを振り返りました.

関数

タイプの制約

関数再負荷

this問題

類

.スタティックメンバ

継承

抽象類

インターフェース基礎

インターフェースオプション構造

インターフェース検出制約

インターフェースインデックス署名

インターフェース関数タイプインタフェース

類インターフェース

ケース

/**
 *   
 *          
 *           
 * 
 *     
 *          
 *           
 * 
 *          ，   void，  undefined
 * // function fn1(x: number, y: number): number {
//     return x + y;
// }

// fn1(1,2);
// fn1('a', 'b');



//      
// let fn2 = function(x: number, y: number): number {
//     return x + y;
// }

// let a: number = 1;

// let fn2: (x: number, y: number) => number = function(x: number, y: number): number {
//     return x + y;
// }

//           
// let fn2: (x: number, y: number) => number = function(x, y) {
//     return x + y;
// }

// fn2('a', 'b');
// fn2('a', 'b');
// fn2(1, 2);





//     
// function fn3(x: number, y?: number): void {}
// fn3(1);





//      
// function fn3(x: number, y = 1): void {
//     console.log(y);
// }
// fn3(0);




//     
// function fn4(...args: any[]) {
//     console.log(args);
// }
 */
 

2.関数の再負荷

//     js 
// function fn(x, y) {
//     return x + y;
// }

// fn(1, 2);
// fn('a', 'b');


//     
// function fn(x: number, y: number): number;
// function fn(x: string, y: string): string;

// function fn(x: any, y: any): any {
//     return x + y;
// }

// fn(1, 2);
// fn('a', 'b');
// fn(1, 'a');

tsの中のthis

/**
 * ts          this     ： any
 */

let obj = {
    a: 10,
    fn() {
        //        ，this any  ，any  ts           
        // let document:any;
        // any  ，ts              
        // console.log(this.b);

        //   noImplicitThis        this any     
        // this.a
    }
}

// obj.fn();


// ts           this
// document.onclick = function() {
//     this
// }


let obj1 = {
    a: 1,
    fn(this: Element|Document) {    //  ts       this       this     
        //   this      ，         ，  ts     
        // console.log(this);
        //   ts         this    
        this;   //      

        // this
    }
};

document.onclick = obj1.fn;
document.body.onclick = obj1.fn;

// function fn10(x: number) {

// }

// fn10( document.querySelector('input').value );

ts中のクラス

// class Person {
//     /**
//      * ts   ，            
//      * ts                  ，  class ，   
//      * 
//      * public
//      *         ，         ，        public
//      * protected
//      *          ，               
//      * private
//      *         ，      （ ）        
//      */

//     public username: string = '';
//     // private username: string = '';
//     // protected username: string = '';

//     // readonly username: string = '';

//     constructor(name: string) {
//         this.username = name;
//     }

// }

// class Student extends Person {

//     say() {
//         this.username
//     }
// }

// let p1: Person = new Person('Kimoo');

// p1.username = 'zmouse';


class Person {

    username: string = 'Kimoo';
    // private age: number = 10;

    private _age: number = 10;

    // getAge(): number {
    //     return this.age;
    // }

    // setAge(age: number): void {
    //     if (age > 0 && age < 150) {
    //         this.age = age;
    //     }
    // }

    //    ，  a       ，       
    get age(): number {
        return this._age;
    }

    set age(age: number) {
        if (age > 0 && age < 150) {
            this._age = age;
        }
    }

}

let p1: Person = new Person();

/**
 *           age  ，            ，  1000 
 */
// p1.age = 1100;

// console.log(p1);

// p1.setAge(20);
// p1.setAge(200);
// console.log(p1.getAge());

// console.log( p1.a );

/**
 *   
 */

// class Mysql {

//     host: string;
//     port: number;
//     username: string;
//     password: string;
//     dbname: string;

//     constructor(host = '127.0.0.1', port = 3306, username='root', password='', dbname='') {
//         this.host = host;
//         this.port = port;
//         this.username = username;
//         this.password = password;
//         this.dbname = dbname;
//     }

//     query() {}
//     insert() {}
//     update() {}

// }

/**
 *     Mysql  ，            
 *            ，  Mysql   new       
 *    Mysql      （  ）
 */
// let db = new Mysql();
// db.query();
// db.insert();

// let db1 = new Mysql();
// db1.query();
// db1.insert();




/**
 *                 Mysql      
 *             
 */

class Mysql {

    //     ，     new       ，     Mysql    
    public static instance;

    host: string;
    port: number;
    username: string;
    password: string;
    dbname: string;

    private constructor(host = '127.0.0.1', port = 3306, username='root', password='', dbname='') {
        this.host = host;
        this.port = port;
        this.username = username;
        this.password = password;
        this.dbname = dbname;
    }

    public static getInstance() {
        if (!Mysql.instance) {
            Mysql.instance = new Mysql();
        }
        return Mysql.instance;
    }

    query() {}
    insert() {}
    update() {}

}


// let db = new Mysql();

// console.log(Mysql.instance);

let db = Mysql.getInstance();
db.query();
db.insert();

4.継承

class Person {

    private _a = 1;

    //                public    ，            
    constructor(public username: string, public age: number) {
        this.username = username;
        this.age = age;
    }

}

class Student extends Person {

    //             ，      
    //            
    //   ：            
    // super：   ，    
    constructor(username: string, age: number, public type: string) {
        super(username, age);    //        

        this.type = type;
    }

}

let s1 = new Student('Kimoo', 30, 'javascript');

5.抽象類

abstract class Person { //         
    username: string;

    constructor(username: string) {
        this.username = username;
    }

    say() {
        console.log('     ');
    }

    //             ，  ，              ，       
    //   study       ，         ，      ，      
    //              ，            
    abstract study(): void   //            
}


class Student extends Person {

    study() {
        console.log('           -       ');
    }

}

class Teacher extends Person {

    study() {
        console.log('  ');
    }

}

//              ，           ，               
// abstract class P extends Person {

// }


// new Person();

インターフェース

// /**
//  * interface
//  *                      ，ts           
//  * 
//  *        
//  *          interface      {
//  *              // ...     
//  *          }
//  * 
//  *                ，           
//  * 
//  *       =>  （       ）
//  *      =>    （                     ，     ）
//  *      =>   （                ，        ）
//  */

// interface Options {
//     width: number,
//     height: number
// }

// function fn(opts: Options) {}

// //                 ，        ，   
// fn({
//     height: 200,
//     width: 100
// });

オプション構造

// /**
//  *            ，     ?   
//  */

// interface Options {
//     width: number,
//     height: number,
//     color?: string
// }

// function fn(opts: Options) {}

// fn({
//     height: 200,
//     width: 100
// });

制約を検出

// /**
//  *                
//  *      -           ，            
//  *          -      ?    
//  *          -    as   
//  *          -       
//  */

// interface Options {
//     width: number,
//     height: number,
//     color: string
// }

// function fn(opts: Options) {}

// //   ts  ，        Options
// // fn({
// //     height: 200,
// //     width: 100
// // } as Options);

// //         ，        
// // let obj = {
// //     height: 200,
// //     width: 100,
// //     color: 'red',
// //     a: 1
// // }
// // fn( obj );

インデックス署名

// /**
//  *      ：       key     
//  *           
//  *                key   
//  *    key       number   string   
//  */

// // interface Options {
// //     // key  number，value any     
// //     [attr: number]: any,
// //     length: number
// // }

// // function fn(opt: Options) {}

// // fn({
// //     0: 100,
// //     1: 100,
// //     2: 2000,
// //     length: 1
// // });



// interface Options {
//     //      key  number，    string
//     [attr: string]: any,
//     length: number
// }

// function fn(opt: Options) {}

// fn({
//     a: 1,
//     b: 2,
//     length: 100
// });

関数タイプインターフェース

/**
 *              fn             ，         
 *              
 */
// interface Options {
//     fn: Function
// }

// let o: Options = {
//     fn: function() {}
// }
// let fn: (x: number, y: number) => number = function(x: number, y: number): number {return x + y}


/**
 *         ，                
 *                  
 */
// function fn(x: MouseEvent) {
//     console.log(x.clientX);
// }

// document.onkeydown = fn;


//         interface           

//         
// interface IFn {
//     (x: number, y: number): number
// }


// let fn: IFn = function(x: number, y: number): number {return x + y}


//          MouseEvent         
// interface MouseEventCallBack {
//     (e: MouseEvent): any
// }

// let fn: MouseEventCallBack = function(a: MouseEvent) {

// }

// document.onclick = fn;


// interface ResponseCallBack {
//     (rs: Response): any
// }

// function todo(callback: ResponseCallBack) {
//     callback(new Response);
// }


// todo(function(x: string) {

// });

// fetch('url').then( (a: Response) => {
//     a.json();
// } );


// interface AjaxData {
//     code: number;
//     data: any
// }
// interface AjaxCallback {
//     (rs: AjaxData): any
// }


// function ajax(callback: AjaxCallback) {
//     callback({
//         code: 1,
//         data: []
//     });
// }


// ajax( function(x: AjaxData) {
//     x.code
//     x.data

//     x.message
// } );

クラスインターフェース

/**
 *    
 *                     
 * 
 *       implements           
 *      - implements                       
 *      -           ，    implements    ，          
 */
 /**
 *    
 *                     
 * 
 *       implements           
 *      - implements                       
 *      -           ，    implements    ，          
 */

interface ISuper {
    fly(): void;
}

class Man {

    constructor(public name: string) {
    }

}

class SuperMan extends Man implements ISuper {

    fly() {
        console.log('  ');
    }

}

class Cat {

}

class SuperCat extends Cat implements ISuper {
    fly() {
        console.log('  ');
    }
}

let kimoo = new SuperMan('Kimoo');

ケース

js     
function http(options) {

    let options = Object.assign({
        method: 'get',
        url: '',
        isAsync: true
    }, options);

    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(options.method, options.url, options.isAsync);

        xhr.onload = function() {
            resolve( JSON.parse(xhr.responseText) );
        }

        xhr.onerror = function() {
            reject({
                code: xhr.response.code,
                message: '   '
            });
        }

        xhr.send();
    })
}

http()

http({
    methods: 'get',
    url: '....',
    isAsync: true
});

http({
    methods: 'post',
    url: '....',
    isAsync: true
});

  ts   
interface HttpOptions {
    method: string,
    url: string,
    isAsync: true
}
interface HttpResponseData {
    code: number,
    data: any
}

function http(options: HttpOptions) {

    let opt:HttpOptions = Object.assign({
        method: 'get',
        url: '',
        isAsync: true
    }, options);

    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(opt.method, opt.url, opt.isAsync);

        xhr.onload = function() {
            let data: HttpResponseData = JSON.parse(xhr.responseText);
            resolve( data );
        }

        xhr.onerror = function() {
            reject({
                code: xhr.response.code,
                message: '   '
            });
        }

        xhr.send();
    })
}


http({
    method: 'get',
    url: '....',
    isAsync: true
}).then( (rs: HttpResponseData) => {
    rs.code
} );


// @Controller
// class IndexController {

    
//     index() {

//     }

//     @router('/')
//     @method('get')
//     main() {

//     }

// }