如何在最新版Angular项目中使用Hashids？附TypeScript类型定义文件

嘿，我来帮你搞定在最新Angular项目里用Hashids的事儿，结合你找到的TypeScript类型定义，整个流程很清晰：

1. 安装必要依赖 #

首先得把Hashids本体和对应的TypeScript类型包装上：

• 安装Hashids库：

  npm install hashids --save
  

• 安装你提到的TypeScript类型定义：

  npm install @types/hashids --save-dev
  

2. 快速理解你找到的类型定义 #

你提供的类型定义是针对Hashids.js 1.x版本的，核心信息有：

• 它导出了一个默认的Hashids类，包含一些私有属性（比如version、minAlphabetLength），这些属性不用我们直接操作，只用关注类的公共方法即可
• 这个类型定义已经帮我们做好了TypeScript的类型校验，不用自己手写类型啦

3. 在Angular中实际使用 #

推荐把Hashids封装成一个全局服务，方便在各个组件里调用：

第一步：创建Hashids服务 #

import { Injectable } from '@angular/core';
import Hashids from 'hashids';

@Injectable({
  providedIn: 'root'
})
export class HashidsService {
  private hashids: Hashids;

  constructor() {
    // 初始化实例，可自定义盐值、最小哈希长度、字母表
    // 盐值建议从环境变量读取，别硬编码！
    this.hashids = new Hashids('your-unique-salt', 8, 'abcdefghijklmnopqrstuvwxyz123456');
  }

  // 编码单个数字
  encodeSingleId(id: number): string {
    return this.hashids.encode(id);
  }

  // 解码哈希值（返回数组，因为支持多数字编码）
  decodeHash(hash: string): number[] {
    return this.hashids.decode(hash);
  }

  // 编码多个数字
  encodeMultipleIds(...ids: number[]): string {
    return this.hashids.encode(...ids);
  }
}

第二步：在组件中调用服务 #

import { Component, OnInit } from '@angular/core';
import { HashidsService } from './hashids.service';

@Component({
  selector: 'app-hashids-demo',
  template: `
    <div>
      <h3>Hashids Demo</h3>
      <p>原ID：12345 → 编码后：{{ encodedId }}</p>
      <p>解码后：{{ decodedId }}</p>
    </div>
  `
})
export class HashidsDemoComponent implements OnInit {
  encodedId: string;
  decodedId: number;

  constructor(private hashidsService: HashidsService) {}

  ngOnInit(): void {
    this.encodedId = this.hashidsService.encodeSingleId(12345);
    // 因为解码返回数组，取第一个元素即可
    this.decodedId = this.hashidsService.decodeHash(this.encodedId)[0];
  }
}

4. 注意事项 #

• 确保hashids库的版本和类型定义版本匹配：你找到的是1.x的类型，所以建议安装1.x版本的库，比如npm install hashids@1.0.0；如果想用最新版，可能需要找对应版本的类型或者自行补充类型
• 盐值（salt）是用来保证哈希唯一性的，不同盐值生成的哈希不同，建议放在Angular的environment.ts文件中，避免硬编码
• Hashids支持编码多个数字，解码后会返回对应的数字数组，按需处理即可

内容的提问来源于stack exchange，提问作者AFetter