Is there a type for base64 encoded images in Typescript?

user_8252267 0
Viewed 4045

being a Typescript rookie, I am trying to type everything as precisely as possible as a part of the learning process.

I have a lqip (low quality image placeholder) property coming from a CMS which should be a base64 encoded image. It is clearly a string, but typing it as a string feels kind of imprecise.

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
}

Is there a type for base64 encoded image in Typescript? I've tried to google extensively, but I've found only topics regarding atob/btoa conversions, not the type itself. Thanks!

typescript-typings typescript base64
3 Answers

For those who is still looking for an answer, you can create your own type

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

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

you can try here

user_81988890

I don't think there is, but you can create your own type that is an alias for a string type, So when you look at your code you can disambiguate between regular string and your base type.

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

Opaque types can give you extra safety here, while TypeScript does not support them natively, it is possible to hack something together

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

You can now write a type guard or runtime check and assert that a string is Base64 just to have a little more safety

Admin1
Related