This error occurs when you pass a boolean value (true or false) to a function that expects a string parameter. TypeScript enforces strict type checking to prevent type mismatches. The fix involves converting the boolean to a string using .toString(), template literals, or by passing the correct string value instead.
This TypeScript error indicates a type mismatch where you are trying to pass a boolean value to a function parameter that expects a string type. TypeScript performs static type checking at compile time to catch these incompatibilities before code execution. The error commonly occurs when you inadvertently pass true or false directly to a function expecting a string like "true" or "false", or when you pass a boolean variable to a string parameter without explicit conversion. This is one of TypeScript's fundamental type safety features—preventing you from mixing incompatible types that could lead to runtime bugs. The error typically appears during development in your IDE, during compilation, or when running type checking tools. Understanding this error helps you grasp TypeScript's type system, which distinguishes between primitive types like boolean, string, and number, preventing them from being used interchangeably without explicit conversion.
Look at the error message and locate the exact function call or assignment causing the type mismatch. Determine the source of the boolean value:
// Example error location
function setStatus(status: string): void {
console.log("Status:", status);
}
const isActive = true; // Boolean variable
setStatus(isActive); // Error: boolean not assignable to stringCommon sources include:
- Boolean variables or constants
- Conditional expressions (value > 10)
- Boolean function return values
- Boolean state or props in React/Vue components
- Boolean flags from configuration
The most explicit way to convert a boolean to a string is using the .toString() method:
function setStatus(status: string): void {
console.log("Status:", status);
}
const isActive = true;
setStatus(isActive.toString()); // OK - converts to "true"
const isDisabled = false;
setStatus(isDisabled.toString()); // OK - converts to "false"This makes the conversion explicit and clear to other developers reading the code.
Template literals automatically convert boolean values to strings:
function logMessage(message: string): void {
console.log(message);
}
const isEnabled = true;
logMessage(`${isEnabled}`); // OK - converts to "true"
// More practical example with context
const hasAccess = false;
logMessage(`User has access: ${hasAccess}`); // OK - "User has access: false"This approach is useful when you want to embed the boolean in a larger string.
If you know the boolean value at the call site, pass the string literal instead:
// WRONG - passing boolean
setTheme(true); // Error
setTheme(false); // Error
// CORRECT - pass string literals
setTheme("true"); // OK
setTheme("false"); // OK
// Or better yet, use descriptive strings
function setTheme(theme: string): void {
console.log("Theme:", theme);
}
setTheme("dark"); // More semantic than "true"
setTheme("light"); // More semantic than "false"Instead of converting true/false directly, map them to descriptive string values:
function setUserStatus(status: string): void {
console.log("User status:", status);
}
const isActive = true;
const statusString = isActive ? "active" : "inactive";
setUserStatus(statusString); // OK - "active"
// Or inline
setUserStatus(isActive ? "enabled" : "disabled"); // OK
// More complex mapping
const isAdmin = false;
const roleString = isAdmin ? "administrator" : "user";
setUserRole(roleString);This makes your code more readable and self-documenting.
If your function genuinely needs to accept both boolean and string types, use a union type or function overloads:
// Option 1: Union type
function setFlag(value: boolean | string): void {
const stringValue = typeof value === "boolean" ? value.toString() : value;
console.log("Flag:", stringValue);
}
setFlag(true); // OK
setFlag("custom"); // OK
// Option 2: Function overloads (more type-safe)
function processValue(value: boolean): void;
function processValue(value: string): void;
function processValue(value: boolean | string): void {
if (typeof value === "boolean") {
console.log("Boolean:", value.toString());
} else {
console.log("String:", value);
}
}
processValue(true); // OK
processValue("test"); // OKOnly change the function signature if it makes sense for your API design.
When working with TypeScript's type system, it's important to understand that boolean and string are completely separate types, even when converting between them. String literals like "true" and "false" are not the same as the boolean values true and false. If you're working with type-safe APIs, consider using TypeScript's string literal types instead of general strings. For example, type Status = "active" | "inactive" is more type-safe than type Status = string. When dealing with form inputs or URL parameters, remember that these always produce strings, so a checkbox value might be the string "true" rather than the boolean true—be careful not to confuse them. In React applications, this error commonly occurs when passing boolean props to components that expect string props, or when using boolean state values with functions expecting strings. The String() constructor can also be used for conversion (String(true) === "true"), but .toString() and template literals are generally preferred for clarity. If you're working with JSON serialization, note that JSON.stringify() will convert booleans to their string representations ("true"/"false"), but JSON.parse() will convert them back to actual booleans, so type mismatches can occur when round-tripping data through JSON if you're not careful about your type definitions.
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