Is there a way to make sure that TS will scream if it receives something else from lowercase string for fieldName?
type Props = {
onEdit: (data: Record<string, string | number>) => void;
title: string;
fields: {
fieldName: string;
fieldValue?: string | number;
}
};
It's simple enough to create a utility to enforce that string literals are lowercase using the type utility Lowercase<StringType>:
type EnforceLowerCase<T extends string> = Lowercase<T> extends T ?
string extends T ? never : T
: never;
type Str1 = EnforceLowerCase<'Hello'>; // never
type Str2 = EnforceLowerCase<'hello'>; // "hello"
However, using it in your scenario would be very convoluted, because it would require using only string literals (which TS doesn't infer on object property values).
Instead, it's better to ensure conformance of the expectation at runtime. Here's an example using a pure function which doesn't mutate the input object:
function ensureLowerCaseFieldName (props: Props): Props {
return {...props, fields: {
...props.fields,
fieldName: props.fields.fieldName.toLocaleLowerCase(),
}};
}
function doSomethingWithProps (props: Props) {
props = ensureLowerCaseFieldName(props);
console.log(props);
}
const props: Props = {
onEdit: data => {},
title: 'title',
fields: {fieldName: 'Hello'},
};
doSomethingWithProps(props); // {..., fields: { fieldName: "hello" } }
As of TypeScript 4.8 there is now support for using the intrinsic string manipulation types with wide types like string. This was implemented in microsoft/TypeScript#47050 but not mentioned in the TS 4.8 release notes.
So now, Lowercase<string> only corresponds to lowercase strings (strings which remain unchanged after .toLowerCase()), whereas in TypeScript 4.7 and below it could match any string:
type Props = {
onEdit: (data: Record<string, string | number>) => void;
title: string;
fields: {
fieldName: Lowercase<string>;
fieldValue?: string | number;
}
};
const p: Props = {
onEdit() { },
title: "ABC",
fields: {
fieldName: "okay" // okay
}
}
p.fields.fieldName = "Oops" // error! Type 'string' is not assignable to type 'Lowercase<string>'
p.fields.fieldName = "123" // okay, Lowercase<"123"> is "123"
|, documentation here : typescriptlang.org/docs/handbook/2/template-literal-types.htmlfieldName.toLowerCase() === fieldName. Or write 30 lines of overkill typing nonsense.