如何确保字符串引用使用 typescript 的图像？

Question

I have a ReactJs project in which I get the image path through a require in an object. This object has a type and the img property receives a string. It works, but the problem is that TS can't know whether this string is an image or any other thing:

type Obj = {
  img: string
}

// That's correct
const obj1 = {
  img: require('./../img-path-here')
}

// That's not correct, but TS doesn't complain
const obj2 = {
  img: './../img-path-here'
}

// That's not correct either, but TS doesn't complain
const obj3 = {
  img: 'any string'
}

Is there a way to type img so TS would know which value is really valid?

Answer 1

You may want to wrap that require in a function which does some runtime type checking. require returns any anyway.

If the type of the img field is a datauri then it is simple. You can express that as a type:

type Base64Image = `data:image/${'jpeg'|'png'|'gif'};base64,${string}`
const base64ImageDecoder = /^data:image\/(jpeg|png|gif);base64,/;

const requireImage = (path: string) => {
    const data = require(path);
    if(typeof data === 'string' && base64ImageDecoder.test(data)) {
        return data as Base64Image
    } else throw Error(`"${path}" doesn't point to a Base64Image`)
}

type Obj = {
    img: Base64Image
}

const obj1: Obj = {
    img: requireImage('./../img-path-here')
}

const obj2: Obj = {
    // @ts-expect-error: not Base64Image
    img: './../img-path-here'
}

If it's a path, the way you check whether or not it's valid at runtime is up to you and your level of paranoia. Maybe you only want to make sure require is used, then you can skip the check, but it's fundamentally the same process:

type ImagePath = string & { _tag: 'ImagePath' }
const isImagePath = (data: unknown) => /* you do you */;

const requireImagePath = (path: string) => {
    const data = require(path);
    if(isImagePath(data)) {
        return data as ImagePath
    } else throw Error(`"${path}" doesn't point to an ImagePath`)
}


type Obj = {
    img: ImagePath
}

const obj1: Obj = {
    img: requireImagePath('./../img-path-here')
}

const obj2: Obj = {
    // @ts-expect-error: not ImagePath
    img: './../img-path-here'
}