A user-defined type is a programmer-named specification of permitted values. In TypeScript, it makes variables, function results, and component inputs explicit while allowing the compiler to reject invalid assignments before runtime. section 5.2.2
Use the narrowest useful definition for the value being modeled:
- Combine alternatives when a value may have different forms, such as null or a string: type Name = null | string. section 5.2.2
- Restrict a value to specific literals, such as LOADING, SUCCESS, or ERROR, so unsupported states become type errors. section 5.2.2
- Describe structured React component inputs with a type alias or interface, marking optional properties with ?. section 5.2.2
- Prefer unknown when an external value has an unverified type; avoid any when its unrestricted behavior would remove useful checking. section 5.2.2
Constrain a status and component props
type Status = "LOADING" | "SUCCESS" | "ERROR"; let status: Status = "LOADING"; interface PersonProps { name?: string; age?: number; } function Person({ name = "Anonymous", age }: PersonProps) { // ... } status = "COMPLETE"; // TypeScript error The literal union rejects values outside the declared state set, while the interface documents optional component inputs and supports a default name. section 5.2.2
type Status = "LOADING" | "SUCCESS" | "ERROR"; let status: Status = "LOADING";
Inspect the compact literal-union definition used to constrain status values. section 5.2.2
type PersonProps = {
name: string;
age: number;
};
function Person({ name, age }: PersonProps) {
...
}
Inspect the typed React component props pattern. section 5.2.2
