TypeScript - (七) TypeScript中泛型的使用以及一个迷你版Map

简介:

     泛型是一种约定,可以约定类的类型以及类中属性,方法返回值,参数等类型。

内容:

     根据编写一个泛型Map了解泛型的作用和使用。

1.定义一个泛型的Node

// <>里的K,和V就是我们定义的泛型,至于是什么类型,我们也不知道。但是当创建之后,key和value对应的类型就会更改成定义的类型。
class Node<K,V>{
    key:K;
    value:V;
}

2.定义一个泛型的Map

export class Map<K,V> {
    
    // 声明一个Node的泛型数组,Node的类型根据HashMap的类型变化
    private nodes:Node<K,V> [] = [];
    
    // 新增到nodes里
    public put(key:K,value:V){
        let node:Node<K,V> = this.getNodeByKey(key);
        // null 就是当前数组里没有这个key的元素,反之就是有
        if(null == node){
            node = new Node<K, V>();
            node.key = key;
            node.value = value;
            this.nodes[this.nodes.length] = node;
        }else{
            // 当前nodes的value覆盖
            this.nodes[this.nodes.indexOf(node)].value = value;
        }
    }
    
    // 查询全部数据
    public queryAll(){
        return this.nodes;
    };
    
    // 根据key判断是否包含元素
    public containKey(key:K): boolean{
        let node = this.getNodeByKey(key);
        if(null == node){
            return false;
        }
        return true;
    };
    
    // 根据value获取key
    public getKey(value:V){
        let node = this.getNodeByValue(value);
        return node.key;
    }
    
    // 根据key获取value
    public getValue(key:K){
        let node = this.getNodeByKey(key);
        return node.value;
    }
    
    // 根据key获取node
    private getNodeByKey(key:K): Node<K,V>{
        let currentNodes = this.nodes;
        for (let i = 0; i < currentNodes.length; i++) {
            if(currentNodes[i].key == key){
                return currentNodes[i];
            }
        }
        return null;
    };
    
    // 根据value查询node
    private getNodeByValue(value:V): Node<K,V>{
        let currentNodes = this.nodes;
        for (let i = 0; i < currentNodes.length; i++) {
            if(currentNodes[i].value == value){
                return currentNodes[i];
            }
        }
        return null;
    };
    
    // 根据key移除元素
    public remove(key:K){
        let node = this.getNodeByKey(key);
        if(null != node){
            this.nodes.splice(this.nodes.indexOf(node),1);
        }
    }
    
}

3. 测试下效果

import {Map} from "./Map";

// 定义了一个key是string,value是string的map
let map: Map<string,string> = new Map();
// 新增一个key = a ,value = ccc
map.put('a','ccc');
// 打印新增一个key = a  [ Node { key: 'a', value: 'ccc' } ]
console.log('新增一个key = a ', map.queryAll());

// 新增一个value不是string的试试
// Error:(11, 13) TS2345: Argument of type '1' is not assignable to parameter of type 'string'.
// 果然,value不是string的,直接提示错误了。
// map.put('a',1);
// 新增一个key不是string的试试
// Error:(15, 9) TS2345: Argument of type '1' is not assignable to parameter of type 'string'.
// 果然,key,直接提示错误了。
// map.put(1,'ss');

// 新增一个key = a ,value = bbbb
map.put('a','bbbb');
// 打印 新增一个key = a ,value = bbbb, 看看是不是覆盖掉了:  [ Node { key: 'a', value: 'bbbb' } ]
console.log('新增一个key = a ,value = bbbb, 看看是不是覆盖掉了: ', map.queryAll());

// 新增一个key = b ,value =bbbccb
map.put('b','bbbccb');
/*
* 打印:  新增一个key = b ,value =bbbccb:  [ Node { key: 'a', value: 'bbbb' },
        Node { key: 'b', value: 'bbbccb' } ]
* */
console.log('新增一个key = b ,value =bbbccb: ', map.queryAll());

// 是否包含key
// 是否包含key=a: true
console.log('是否包含key=a:', map.containKey('a'));
//  是否包含key=c: false
console.log('是否包含key=c:', map.containKey('c'));

// 移除key = a
map.remove('a');
// 移除一个存在的key = a之后: [ Node { key: 'b', value: 'bbbccb' } ]
console.log('移除一个存在的key = a之后:',map.queryAll());

// 尝试移除一个不存在的key
map.remove('c');
//  尝试移除一个不存在的key=c之后: [ Node { key: 'b', value: 'bbbccb' } ]
console.log('尝试移除一个不存在的key=c之后:',map.queryAll());

 附:

    系列链接: https://blog.csdn.net/qq_36255237/article/category/9168635

    GitHub的Demo地址: https://github.com/chenrui123456/TypeScript-Demo

 

 

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
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 项目使用的第三方库或自定义组件生成类型声明文件,提供更好的代码提示和类型检查功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值