Typescript 中是否有 base64 编码图像的类型？

Question

作为 Typescript 菜鸟，我正在尝试尽可能准确地键入所有内容，作为学习过程的一部分。

我有一个 lqip（低质量图像占位符）属性来自 CMS，它应该是 base64 编码图像。明明是一个字符串，但是把它打成一个字符串感觉有点不准确。

mainImage: Schema.Post["mainImage"] & {
  //  can I be more precise? It should be always a base64 encoded image, not just a generic string…
  // e.g. "data:image/jpeg;base64,/9j/2wBDAAYEB…"
  lqip: string
}

Typescript中有base64编码图片的类型吗？我已广泛尝试 google，但我只找到了有关 atob/btoa 转换的主题，而不是类型本身。谢谢！

Answer 1

我认为没有，但您可以创建自己的类型，它是字符串类型的别名，因此当您查看代码时，可以消除常规字符串和基本类型之间的歧义。

type Base64 = string
mainImage: Schema.Post["mainImage"] & {
  lqip: Base64
}

Answer 2

可以在这里给你额外的安全，而 TypeScript 本身不支持它们，可以一起破解一些东西

type Opaque<T, K extends string> = T & { __typename: K }

type Base64 = Opaque<string, "base64">

const decodeBase64 = (base64String: Base64) => {
  return Buffer.from(base64String, "base64").toString("utf8")
}

const str = "a"
decodeBase64(str) // errors

const str2 = "a" as Base64
decodeBase64(str2) // valid

您现在可以编写类型保护或运行时检查并断言字符串是 Base64 只是为了更加安全

Answer 3

对于那些仍在寻找答案的人，您可以创建自己的类型

type Base64<imageType extends string> = `data:image/${imageType};base64${string}`

const base64: Base64<'png'> = 'data:image/png;base64test...'

你可以try here

Typescript 中是否有 base64 编码图像的类型？

Is there a type for base64 encoded images in Typescript?

base64

typescript

typescript-typings