Currently, I am in the process of converting existing javascript files into typescript for my business needs.
Below is an example object structure:
[
{
// Sample column names givenName, familyName, and picture are provided as examples.
"givenName": {
"text": "Foo",
"type": "text"
},
"familyName": {
"text": "Bar",
"type": "text"
},
"picture": {
"text": "abc.png",
"type": "image",
"thumbnail": "https://example.com/thumbnail/sample.png"
},
// Paths to PDF and thumbnail generated from the above information.
"pdf62882329b9baf800217efe7c": "https://example.com/pdf/genarated_pdf.pdf",
"thumbnail62882329b9baf800217efe7c": [
"https://example.com/thumbnail/head.png",
"https://example.com/thumbnail/tail.png"
]
},
{
// ... (same structure as previous object)
}, // ...
]
The objective is to type the object part like this:
type Row = {
[headerKey: string]: {
text: string;
type: "text";
} | {
text: string;
type: "image";
thumbnail: string;
};
// Paths to the generated PDF and thumbnails.
pdf+id: string; // path to PDF
thumbnail+id: [string, string]; // path to thumbnail image (two elements due to two sides of image)
};
Utilizing Template literal types, the typing appears as follows:
type Row = {
[headerKey: string]: {
text: string;
type: "text";
} | {
text: string;
type: "image";
thumbnail: string;
};
[pdfKey: `pdf${string}`]: string;
[thumbnailKey: `thumbnail${string}`]: [string, string];
};
However, it is not functioning as expected. Is there a method to accurately type this object?