TypeScript报错：string类型无法赋值给自定义UUID类型的解决方法

问题背景 #

自定义UUID类后，调用要求传入UUID类型参数的CreateBilling函数时，直接传字符串ID会触发类型错误：

Argument of type 'string' is not assignable to parameter of type 'UUID'

相关代码 #

UUID.ts

// Typescript UUID
export class UUID {
  private str: string;

  constructor(str?: string) {
      this.str = str || UUID.getNewGUIDString();
  }

  toString() {
      return this.str;
  }

  private static getNewGUIDString() {
      // GUID生成逻辑
      let d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
          d += performance.now(); //使用高精度计时器（如果可用）
      }
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d/16);
          return (c=='x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
  }
}

server.ts（报错代码）

// 类型错误
const data = await CreateBilling('a1208217-3587-40e1-97ab-695b01cae342');

CreateBilling函数

const CreateBilling = async (shop_id: UUID) => {
  try {
  // 获取分类并去重
  const data = await ShopGetCategories(shop_id);

  console.log(data);
  return data;
  } catch(e) {
    console.log(e);
    Sentry.captureException(e);
    return e;
  }
};

export default CreateBilling;

解决方法 #

方法1：用UUID构造函数包装字符串 #

利用UUID类已支持传入字符串的构造函数，将字符串ID转为UUID实例后传入：

// server.ts 修改后
const data = await CreateBilling(new UUID('a1208217-3587-40e1-97ab-695b01cae342'));

方法2：添加静态工厂方法优化可读性 #

在UUID类中新增静态方法，更直观地从字符串创建实例：

// UUID.ts 修改后
export class UUID {
  private str: string;

  constructor(str?: string) {
      this.str = str || UUID.getNewGUIDString();
  }

  toString() {
      return this.str;
  }

  // 新增：从字符串生成UUID实例
  public static fromString(str: string): UUID {
      return new UUID(str);
  }

  private static getNewGUIDString() {
      // 原生成逻辑不变
      let d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
          d += performance.now();
      }
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d/16);
          return (c=='x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
  }
}

调用时写法更清晰：

const data = await CreateBilling(UUID.fromString('a1208217-3587-40e1-97ab-695b01cae342'));

方法3：放宽参数类型（业务允许时） #

如果ShopGetCategories兼容字符串或UUID类型，可修改CreateBilling的参数类型为联合类型，内部自动处理转换：

// CreateBilling 修改后
const CreateBilling = async (shop_id: string | UUID) => {
  try {
      // 统一转换为UUID实例
      const uuidInstance = typeof shop_id === 'string' ? new UUID(shop_id) : shop_id;
      const data = await ShopGetCategories(uuidInstance);
      console.log(data);
      return data;
  } catch(e) {
      console.log(e);
      Sentry.captureException(e);
      return e;
  }
};

此时直接传字符串即可正常调用：

const data = await CreateBilling('a1208217-3587-40e1-97ab-695b01cae342');

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