This TypeScript error occurs when you try to assign an object or type that lacks required properties defined in the target type. Fix it by providing all required properties, making properties optional, or using the Partial utility type.
This error appears when TypeScript's type checker detects that you're trying to assign a value to a variable, parameter, or return type that doesn't include all the required properties defined in the target type. TypeScript uses structural typing (also called "duck typing"), which means it checks if an object has the required shape. When you define an interface or type with certain properties, any value assigned to that type must include all non-optional properties. If properties are missing, TypeScript will list them in this error message. This is one of the most common TypeScript errors, especially when working with React components, API responses, or when initializing objects. The error is actually protecting you from runtime errors that would occur if your code tried to access properties that don't exist.
The most straightforward solution is to add the missing properties to your object:
interface User {
id: number;
name: string;
email: string;
}
// ❌ Error: Type is missing properties: name, email
const user: User = {
id: 1
};
// ✅ Fixed: All properties provided
const user: User = {
id: 1,
name: 'John Doe',
email: '[email protected]'
};Check the error message to see exactly which properties are missing and add them to your object.
If some properties aren't always needed, mark them as optional using the ? operator:
interface User {
id: number;
name: string;
email?: string; // Now optional
phone?: string; // Now optional
}
// ✅ Valid: Optional properties can be omitted
const user: User = {
id: 1,
name: 'John Doe'
};This is useful when properties might be undefined or provided later. Only use this for properties that are genuinely optional in your domain logic.
TypeScript's Partial<T> utility type makes all properties optional, which is useful for partial updates:
interface User {
id: number;
name: string;
email: string;
}
// For partial updates or initialization
function updateUser(id: number, updates: Partial<User>) {
// updates can have any subset of User properties
}
// ✅ Valid: Only updating email
updateUser(1, { email: '[email protected]' });
// ✅ Valid: Empty object is allowed
let userDraft: Partial<User> = {};This is particularly useful for update operations, form drafts, or gradual object construction.
As a last resort, you can use type assertions to bypass the check, but this removes type safety:
interface User {
id: number;
name: string;
email: string;
}
// ⚠️ Bypasses type checking - use with caution
const user = {} as User;
// Better: Use type assertion with partial initialization
const user = {
id: 1,
name: 'John'
} as User; // Still missing email, but TypeScript won't complainWarning: Type assertions should be avoided unless you're absolutely certain about the runtime behavior. They can lead to runtime errors if the object is actually missing properties.
When you need to build objects step by step, use proper typing strategies:
interface User {
id: number;
name: string;
email: string;
}
// Strategy 1: Start with Partial, then assert when complete
let user: Partial<User> = {};
user.id = 1;
user.name = 'John';
user.email = '[email protected]';
const completeUser = user as User; // Assert when all properties set
// Strategy 2: Use a builder pattern
class UserBuilder {
private user: Partial<User> = {};
setId(id: number) {
this.user.id = id;
return this;
}
setName(name: string) {
this.user.name = name;
return this;
}
setEmail(email: string) {
this.user.email = email;
return this;
}
build(): User {
if (!this.user.id || !this.user.name || !this.user.email) {
throw new Error('Missing required properties');
}
return this.user as User;
}
}
const user = new UserBuilder()
.setId(1)
.setName('John')
.setEmail('[email protected]')
.build();In React, this error commonly occurs with component props:
interface ButtonProps {
label: string;
onClick: () => void;
variant: 'primary' | 'secondary';
}
const Button: React.FC<ButtonProps> = (props) => {
return <button onClick={props.onClick}>{props.label}</button>;
};
// ❌ Error: Missing variant property
<Button label="Click me" onClick={() => console.log('clicked')} />
// ✅ Fixed: All required props provided
<Button
label="Click me"
onClick={() => console.log('clicked')}
variant="primary"
/>
// Alternative: Make variant optional with default
interface ButtonProps {
label: string;
onClick: () => void;
variant?: 'primary' | 'secondary'; // Optional
}
const Button: React.FC<ButtonProps> = ({
label,
onClick,
variant = 'primary' // Default value
}) => {
return <button onClick={onClick}>{label}</button>;
};### Understanding TypeScript's Structural Type System
TypeScript uses structural typing rather than nominal typing. This means types are compatible based on their structure (properties and methods), not their names. When the error lists missing properties, it's comparing the actual shape of your object against the expected shape.
### Excess Property Checks
TypeScript performs stricter checks on object literals assigned directly to typed variables. If you first assign to a variable without a type annotation, excess property checks don't apply:
interface User {
name: string;
}
// ❌ Excess property error
const user: User = { name: 'John', age: 30 }; // 'age' doesn't exist
// ✅ No error - indirect assignment
const temp = { name: 'John', age: 30 };
const user: User = temp; // Works, extra properties ignored### Union Types and Missing Properties
When working with union types, all possible types must be satisfied:
interface Cat { meow: () => void; }
interface Dog { bark: () => void; }
type Pet = Cat | Dog;
// ❌ Error: Missing both meow and bark
const pet: Pet = {};
// ✅ Valid: Satisfies one of the union members
const pet: Pet = { meow: () => console.log('meow') };### Readonly and Missing Properties
The error can also occur with readonly properties. Even if you plan to set them later, TypeScript requires them at initialization or they must be optional.
### Generic Constraints
When using generics with constraints, ensure the constraint type's properties are satisfied:
function merge<T extends { id: number }>(obj: T) {
return obj;
}
// ❌ Error: Missing property 'id'
merge({ name: 'John' });
// ✅ Valid
merge({ id: 1, name: 'John' });Function expression requires a return type
Function expression requires a return type
Value of type 'string | undefined' is not iterable
How to fix "Value is not iterable" in TypeScript
Type 'undefined' is not assignable to type 'string'
How to fix "Type undefined is not assignable to type string" in TypeScript
Type narrowing from typeof check produces 'never'
How to fix "Type narrowing produces never" in TypeScript
Type parameter 'T' has conflicting constraints
How to fix "Type parameter has conflicting constraints" in TypeScript