本文共 2882 字，大约阅读时间需要 9 分钟。

配置ts编译文件

1. 安装ts编译工具

npm install -g typescript @typescript ts-node

2. 初始化项目

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.0vue 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            }        }    }};

转载地址：http://nxse.baihongyu.com/