Typescript

代码地址
https://github.com/iosKey/typescript
Typescript是js的超集，它可编译为纯js,是一种给js添加特性的语言扩展

已有项目安装ts

vue add @vue/typescript

image.png

基本使用
创建src/test.ts

//类型注解
let title1: string;
//只能赋值字符串
title1 = '不过如此';
//不允许
// title1 = 1;

//类型推论 编译器知道是字符串 也只能赋值z
let title2 = 'xx';
//不允许
// title2 = 1;

//数组类型
let names: string[];
//只能放字符串
names = ['tom'];//Array<string>

//任意类型
let foo: any;
foo = "xx";
foo = 1;

//any可以用于数组
let list: any[];
list = [1,true,"xx"];
list[1] = 100;

//函数中类型 前面是参数 后面是返回值类型
//带问号是可选参
function greeting(person: string,msg?: string): string{
    return "hi" + person;
}
greeting('niji');

function warnUser():void{
    alert('lll');
}

//常用类型：string number boolean void any object


//函数重载 先声明 再实现   可以多个声明 一次实现 实现得比较通用 传不同类型的参数 得到不同的结果
function info(a: {name: string}): string;
function info(a: string): {name: string};
function info(a: {name: string} | string): string | {name: string}{
    if(typeof a === 'object'){
        return a.name;
    }else{
        return {name: a};
    }
}



//类的特性
class MyComp{
    //声明属性
    private _foo: string = 'foo';//私有属性 内部使用
    protected bar: string;//受保护 派生类可以访问
    public zoo: string = 'zoo';//公共的
    //这样声明也可以
    constructor(barVal: string,private tua = 'tua'){
        this.bar = barVal;
    }
    //存取器
    get foo(){
        return this._foo;
    }
    set foo(val){
        this._foo = val;
    }
}

//继承 子类可以访问父类的foo属性的get set 还有public修饰的
class SubComp extends MyComp{
    //把父类的构造函数走一遍 传入规定的参数
    constructor(a: string){
        super(a);
        //内部可以访问protected修饰的
    }
}

const comp1 = new MyComp('barValue');
const comp2 = new SubComp('barValue2');
comp1.foo = 'aaa';


//泛型就是通用性 取名T 其实叫什么都可以
interface Result<T>{
    ok: 0 | 1;
    data: T;//代表动态性 可以是任意类型
}

//泛型方法
function getData<T>(): Result<T>{
    const data: any = [
        {id: 1, name: '1111', version: '2'},
        {id: 1, name: '1111', version: '2'}
    ];
    return {ok: 1, data}
}

//装饰器其实就一个function 简单实现一个装饰器
//类装饰器 传入的class 就是function构造函数
function log(target: Function){
    target.prototype.log = function(){
        // console.log(this.bar);
    }
}

//方法装饰器 参数3个
function dong(target: any, name: string, descriptor: any){
    const baz = descriptor.value;
    descriptor.value = function(val: string){
        baz.call(this,val);
    }
    return descriptor;
}

//属性装饰器
function mua(param: string){
    return function (target: any,name: string){
        target[name] = param;
    }
}

@log
class Foo{
    bar = 'bar'
    
    @mua('mua') ns!:string;

    log(){}

    @dong
    setBar(val: string){
        this.bar = val
    }
}
const foo2 = new Foo();
foo2.log();
foo2.setBar('lllllla');
// console.log(foo2.ns);

main.js引入

import './test.ts'

项目使用
安装 npm i axios -S

装饰器

装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法