Typeescript知識点まとめのステップ

1.  タイプのコメントとタイプチェック

    let name = "xx"; //     

    let title:string = "xxxx"; //           

 
    //配列の種類

    let names:string [];

    names = ['Tom']; //  Array



    let foo:any = 'xx';

    foo = 3

    // ANyタイプは配列にも使用できます.

    let list:any[] = [1, true, 'xxxx'];

    list[1] = 100;

    // 関数で使用するタイプの注釈
   

 function greeting (person: string):string {

    return 'Hello, ' + person

 }

 
    // void タイプ 戻り値のない関数によく使われます.

    function warnUser():void {

        alert('this is my warning message')

    }

 
2.  関数

//   name   age      

    //            ？

    //            

    

    function sayHello(name: string, age:number = 20, addr?:string): string {

        return '  ： ' + name + ' ' + age

    }

    //   

    //                         

    //    ，   

    function info(a: { name: string }): string;

    function info(a: string): object;

    function info(a: { name: string } |string): any {

        if (typeof a==="object") {

            return a.name;

        } else {

            return { name: a };    

    }

    console.log(info({ name: "tom" }));

    console.log(info("tom"));

 
3.  類型推論    

class MyComp {

        private _foo: string; //     

        private bar: string;  //     

        readonly mua = 'mua'  //                    


        //     ：        

        //         ，               

        constructor (private  tua = 'tua') {

            this._foo = 'foo'

            this.bar = 'bar'

        }


        //         

        private someMethod() {}

        //    ：             ；  vue          

        get foo() {return this._foo}

        set foo(val) {this._foo = val}

    }


    vue   ：              ，Hello.vue

    //         ，       

    class Feature {

        constructor(public id: number, public name: string) {}

    }

    //              

    @Component

    export default class HelloWorld extends Vue {

        private features: Feature[];

        constructor() {

            super();

            this.features = [

                { id: 1, name: "    " },

                { id: 2, name: "      " }

            ];

        }

    }

    vue   ：    getter      

    get count() {

        return this.features.length;

    }

    class    ，          。

    class Person { //       
        constructor(name, age) {  // constructor      ， new        
            this.name = name; //          ，   this     
            this.age = age;
        }
        say() { //          
            return '     ' + this.name + '   ' + this.age + '  '
        }
    }

    console.log(typeof Person); // function
    console.log(Person === Person.prototype.constructor); // true

    //    

    function Person (name, name) {
        this.name = name
        this.age = age
    }
    Person.prototype.say = function() {
        return '     ' + this.name + '   ' + this.age + '  '
    }

4. インターフェース
インターフェースは、構造だけを定義して、実現する必要がありません.

    interface Person {
        firstName: string;
        lastName: string;
        sayHello(): string //       
    }

    //     

    class Greeter implements Person {
        constructor(public firstName='', public lastName='') {}
        sayHello() {
            return 'hello, ' + this.firstName + ' ' this.lastName
        }
    }

    //       

    function greeting (person: Person) {
        return person.sayHello()
    }

    // const user = {firstName: 'jane', lastName: 'user'}
    const user = new Greeter('jane', 'user') //       

    console.log(user);
    console.log(greeting(user));

 5. 汎型Generarics
Genericsとは、関数、接⼝口または類を定義する際に、予め特定のタイプを指定しないで、өを使用する時に、再びタイプの一つの特性を指定します.

//       
interface Result {
    ok: 0 | 1;
    data: T[];
}

//       
function getData(): Result {
    const data: any[] = [
        {id: 1, name: '    ', version: '2.0'},
        {id: 1, name: '    ', version: '2.0'},
    ]
    return {ok: 1, data};
}
//     

this.features = getData().data;

Promiseに戻る

function getData(): Promise> {
    const data: any[] = [
        { id: 1, name: "    ", version: "2.0" },
        { id: 2, name: "      ", version: "1.0" }
    ];
    return Promise.resolve>({ ok: 1, data });
}

使用

async created() {
    const result = await getData();
    this.features = result.data;
}

6. 飾り物
実は工場の関数で、あるオブジェクトに伝えられました.出力先の桜の新しいオブジェクトです.

//      
@Component
export default class Hello extends Vue {
    //       
    @Prop({ required: true, type: String }) private msg!: string;
    //       
    @Watch("features", {deep: true})
        onFeaturesChange(val: string, oldVal: any) {
        console.log(val, oldVal);
    }
    //       
    @Emit('add')
    private addFeature(event: any) {
        const feature = {
            name: event.target.value,
            id: this.features.length + 1,
            version: "1.0"
        };
        this.features.push(feature);
        event.target.value = feature;
        return event.target.value;
    }
}

vuex使用:vuex-class
インストール

npm i vuex-class -S

状態を定義します.store.js

export default new Vuex.Store({
    state: {
        features: ['    ', '   ']
    },
    mutations: {
        addFeatureMutation(state: any, featureName: string){
            state.features.push({id: state.features.length+1, name: featureName})
        }
    },
    actions: {
        addFeatureAction({commit}, featureName: string) {
            commit('addFeatureMutation', featureName)
        }
    }
})

使用する

import { State, Action, Mutation } from "vuex-class";
@Component
export default class Feature extends Vue {
    //   、  、     
    @State features!: string[];
    @Action addFeatureAction;
    @Mutation addFeatureMutation;
    private addFeature(event) {
        console.log(event);
        // this.features.push(event.target.value);
        this.addFeatureAction(event.target.value);
        // this.addFeaturMutation(event.target.value);
        event.target.value = "";
    }
}

装飾器原桜
装飾器򝴸は実際には一つの関数であり、ハイジャックを定義することにより、クラスおよびその構文方法、属性に追加の拡張機能を提供することができる.

function log(target: Function) {
    // target     
    console.log(target === Foo); // true
    target.prototype.log = function () {
        console.log(this.bar);
    }
    //              ，                   。
}
//        
function dong(target: any, name: string, descriptor: any) {
    // target        ，name     ，descriptor      ，
    //          ：Object.defineProperty(target, name, descriptor)
    console.log(target[name] === descriptor.value);
    //         descriptor.value    bar   
    const baz = descriptor.value; //       
    descriptor.value = function (val: string) {
        console.log('dong~~');
        baz.call(this, val);
    }
    return descriptor;
}
//       
function mua(target, name) {
    // target        ，name    
    console.log(target === Foo.prototype);
    target[name] = 'mua~~~'
}
@log
class Foo {
    bar = 'bar'
    @mua ns!: string;
    @dong
    baz(val: string) {
        this.bar = val
    }
}
const foo2 = new Foo();
// @ts-ignore
foo2.log();
console.log(foo2.ns);
foo2.baz('lalala')

7. もっと詳しく説明してサイトを見てください.