typescript 设计模式--桥模式

意义与作用

  • 隔离原来一个类中两个或多个维度的变化
  • 按照多个维度变化又不相互影响
  • 减少产生类的个数
  • 提高了可扩展性

举例

电脑的可分为pad、笔记本、台式,电脑的品牌可能又分为苹果、联想、小米、戴尔,如果每增加一个类型比如pad就是后来才有的,那就需要每个品牌都要创建,反过来也是一样,所以要分离品牌和电脑的类型

interface IBrand {
    name: string;
    info: string;
    getContect:()=>string;
}
class Lenovo implements IBrand {
    name: string = '联想';
    info: string = 'something';
    getContect() {
        return '123'
    }
}
class Dell implements IBrand {
    name: string = '戴尔';
    info: string = 'somethine';
    getContect() {
        return '456';
    }
}
class Apple implements IBrand {
    name: string = '苹果';
    info: string = 'somethine';
    getContect() {
        return '456';
    }  
}
abstract class  Icomputer {
    branch: IBrand;
    abstract type: string;
    abstract doSomething():void;
    constructor(branch: IBrand) {
        this.branch = branch;
    }
}
class Laptop extends Icomputer {
    type = 'sss';
    constructor(branch: IBrand) {
        super(branch);
    }
    public doSomething() {
        console.log('0000000000');
    }
}
class Pad extends Icomputer {
    type = 'sss';
    constructor(branch: IBrand) {
        super(branch);
    }
    public doSomething() {
        console.log('0000000000');
    }
}
class PC extends Icomputer {
    type = 'sss';
    constructor(branch: IBrand) {
        super(branch);
    }
    public doSomething() {
        console.log('0000000000');
    }
}
let branch: IBrand = new Lenovo();
let computer: Icomputer = new Pad(branch);

在typescript中用interface更多的作用是为了子类的开发不出现偏差,在变量定义类型时主要检查是否这个类满足要求。
但是在强类型带指针的那种,更多的是解决编译性依赖,实现动态装配。

vue-typescript-import-dts 是一个用于为 Vue.js 项目中的 TypeScript 文件生成类型声明文件的工具。在 Vue.js 项目中使用 TypeScript 进行开发时,我们经常需要为一些第三方库或自定义组件编写类型声明文件,以提供更好的代码提示和类型检查。 使用 vue-typescript-import-dts 工具可以自动分析 TypeScript 文件中的导入语句,并根据导入的模块生成对应的类型声明文件。这样,在使用该模块时,IDE 或编辑器就能提供准确的代码补全和类型检查。 例如,假设我们的项目中使用了一个名为 axios 的第三方库进行网络请求,但是该库并没有提供类型声明文件。我们可以通过 vue-typescript-import-dts 工具,在我们的 TypeScript 文件中导入 axios,并正确配置工具,它将自动为我们生成一个 axios.d.ts 类型声明文件。 具体使用 vue-typescript-import-dts 的步骤如下: 1. 在项目中安装 vue-typescript-import-dts,可以使用 npm 或 yarn 命令来安装。 2. 在 TypeScript 文件中,使用 import 语句导入需要生成类型声明文件的模块。 3. 在项目根目录下创建一个 .vue-typescript-import-dts.json 配置文件,用来配置生成类型声明文件的规则。可以指定生成的声明文件的输出路径、文件名等。 4. 运行 vue-typescript-import-dts 命令,它会自动扫描 TypeScript 文件中的导入语句,并根据配置生成相应的类型声明文件。 这样,在我们编写代码时,IDE 或编辑器就可以准确地为我们提供代码补全和类型检查的功能。这对于提高开发效率和代码质量非常有帮助。 总之,vue-typescript-import-dts 是一个便捷的工具,可以自动为 Vue.js 项目中使用的第三方库或自定义组件生成类型声明文件,提供更好的代码提示和类型检查功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值