Open sebastienlabine opened 4 years ago
FWIW one workaround is mentioned in #33
This is a tough one to figure out, because [extra: string]: string | ThingBase
effectively removes a lot of type checking that we talk about, e.g. if you type nmae
instead of name
, etc.
The two critical user journeys we want to address are (a) the IDE / completions experience and (b) tsc
typechecking for obviously wrong/accidental input. Extra props remove (b)
, which might be an issue.
Writing your own XyzAction
type especially works neatly if you're saving it as an intermediate variable. Since TS's excess property check only applies to object literals. So if you define this as:
// Available actions:
type QueryAction = SearchAction & {
"query-input": string;
};
export const EXPLORE_ACTION: QueryAction = {
"@id": `${process.env.NEXT_PUBLIC_WEBSITE_URL}/explore`,
"@type": "SearchAction",
target: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/explore/results?q={search_term_string}`,
"query-input": "required name=search_term_string"
};
// Elsewhere:
/* ... */ {
// ...
potentialAction: EXPLORE_ACTION
};
Does that work?
That's what I was afraid of. I didn't really know how to keep both theses user journeys while including custom attributes.
The solution you provided should be good! I don't know how often we might need to create our own action but in my opinion we would benifit from having documentation on how to include custom attributes by creating custom types.
Can I just ignore the TypeScript error?
This is what I did for https://pillser.com
export const meta: MetaFunction = () => {
return [
{ title: 'Pillser – Supplement Comparison Site' },
{
content: 'The best value for your money supplements.',
name: 'description',
},
{
href: 'https://pillser.com/',
rel: 'canonical',
tagName: 'link',
},
{
'@context': 'https://schema.org',
'@type': 'WebSite',
description:
'The best value for your money supplements. Find and compare supplements to get the most effective product for the best price.',
name: 'Pillser – Supplement Comparison Site',
potentialAction: {
'@type': 'SearchAction',
// @ts-expect-error - https://github.com/google/schema-dts/issues/114
'query-input': 'required name=search_term_string',
target: {
'@type': 'EntryPoint',
urlTemplate: 'https://pillser.com/search?q={search_term_string}',
},
},
publisher: {
'@type': 'Organization',
logo: {
'@type': 'ImageObject',
url: 'https://www.pillser.com/pillser-logo.png',
},
name: 'Pillser',
},
url: 'https://www.pillser.com',
} satisfies WithContext<WebSite>,
];
};
... or is this going to backfire somehow?
Problem Sometimes, we need to input a custom attribute in the Schema. For instance the sitelinks-searchbox structured data requires a query-input attribute that is not available in the schema.org representation. However, I can't add it manually, because the compiler will throw:
Solution Add an attribute that let's you input a custom key value pair.