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

Question

作为 TypeScript 新手，我正在学习过程中尽可能准确地为所有内容设置类型。

我从 CMS 获取了一个 "lqip"（低质量图像占位符）属性，它应该是一个 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转换的主题，而不是类型本身。谢谢！

- HynekS

---

一个字符串就是一个字符串，Typescript不区分类型的实际值。正如伊万在这个答案中指出的那样，通常的做法是只使用类型别名，这样更清楚地说明该字符串应该包含什么内容。请注意，这并不强制任何值。 - Johannes Klauß

@JohannesKlauß 谢谢。我曾经试着使用正则表达式，希望它们能有所帮助，但我发现由于静态类型检查的原因，它们既没有被当前支持也没有用处。或许如果我测试一下 props PropType（像在使用 React 时那样），这可能会有所帮助，但我更愿意相信我的 CMS。 - HynekS

Answer 1

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

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

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

您可以在这里尝试

- tsu

Answer 2

我认为目前没有，但是你可以创建自己的类型，作为字符串类型的别名，这样当你查看代码时就可以区分普通字符串和你的基础类型。

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

- Ivan V.

---

谢谢。我曾经试着使用正则表达式，希望它们能够帮助我，但是我发现由于静态类型检查的原因，它们既不被当前支持也没有用处。也许如果我测试一下属性 PropType（使用React），会有所帮助，但我可能更愿意相信我的CMS。 - HynekS

Answer 3

不透明类型可以在此处提供额外的安全性，虽然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，以获得更多的安全性。

- user15485638