配置ts编译文件

1. 安装ts编译工具

全局安装typescript和ts-node

npm install -g typescript @typescript ts-node

初始化项目

ts-node -p tsconfig.json

2. 接口定义

2.1 接口定义

interface Animal {
    color: string;
    height: number;
}
let a: Animal = {
    color: 'gold',
    height: 30,
};

2.2 属性接口

interface Person {
    name: string;
    age: number;
    car?: string; // 可选属性
}
let liujin: Person = {
    name: '刘劲',
    age: 18,
    // car: '共享单车'
};

2.3 方法接口

interface LogA {
    (a: number, b: number): number;
}
let add: LogA = (a: number, b: number) => {
    return a + b;
};
let minus: LogA = (a: number, b: number) => {
    return a - b;
};
console.log(add(4, 8));
console.log(minus(30, 10));

2.4 类接口

interface People {
    name: string;
    fun(): void;
}
let p1: People = {
    name: '赵丽颖',
    fun(): void {
        console.log('这是调用接口的方法');
    }
};
console.log(p1);

2.5 类实现接口

class Man implements LogB {
    name: string = '唐达';
    fun(): void {
        console.log('这是调用接口的方法');
    }
}
let tangda = new Man();
console.log(tangda.name);
tangda.fn();

2.6 接口继承

interface D extends A {
    fn2(): void;
}
class E implements D {
    fn(): void {
        console.log('实现了A接口');
    }
    fn2(): void {
        console.log('实现了D接口');
    }
}
let e = new E();
e.fn();
e.fn2();

3. 装饰器

3.1 类装饰器

function logC(params: any) {
    return function(target: any) {
        console.log('params:', params);
        console.log('target:', target.name);
        target.prototype.age = params;
        target.prototype.fn = () => {
            console.log('该方法被调用了');
        };
    }
}
@logC('小王')
class Http1 {
    name: string | undefined = '哈哈';
    age: string | undefined;
    fn(): void {
    }
}
let h = new Http1();
console.log(h.age);
h.fn();

3.2 属性装饰器

function logD(params: any) {
    return function(target: any, attr: any) {
        console.log('params:', params);
        console.log('target:', target);
        console.log('attr:', attr);
        target[attr] = params;
    }
}
@logD('属性装饰器')
class Http2 {
    name: string | undefined = '属性装饰器';
}
let h2 = new Http2();
console.log(h2.name);

3.3 方法装饰器

function logE(params: any) {
    return function(target: any, funName: any, desc: any) {
        console.log('params:', params);
        console.log('target:', target);
        console.log('funName:', funName);
        console.log('desc:', desc);
    }
}
@logE('方法装饰器')
class Http3 {
    fn(): void {
        var num: number = 20;
    }
}

4. Vue 3.0

4.1 安装

npm install -g @vue/cli@3.0.0
vue create

4.2 创建项目

vue create demo3.0

4.3 项目启动

npm run serve

4.4 Vue 3.0新语法

4.4.1 组件创建

4.4.2 属性

4.4.3 方法

4.4.4 计算属性

4.4.5 监听

4.4.6 组件通信

父传子：

class Child {
    @Prop() newname: string | undefined;
}

子传父：

4.5 配置文件

const vueConfig = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    devServer: {
        proxy: {
            '/api': {
                target: 'https://example.com',
                ws: true,
                changeOrigin: true
            }
        }
    }
};