Fix: Type 'string' is not assignable to type error in TypeScript - Complete Guide

The ‘Type string is not assignable to type’ error is a common TypeScript compilation error that occurs when TypeScript’s type checker detects an incompatible type assignment. This error happens when you try to assign a string value to a variable or property that expects a different type, such as a specific string literal, number, boolean, or custom interface. This error is particularly prevalent in TypeScript projects where strict type checking is enforced.

This comprehensive guide explains what causes this error, why it happens, and provides multiple solutions to fix it in your TypeScript projects with clean code examples and directory structure.

---

What is the ‘Type string is not assignable to type’ Error?

The “Type string is not assignable to type” error occurs when:

• You try to assign a string to a variable expecting a different type
• TypeScript’s type checker finds incompatible type assignments
• String literals don’t match expected literal types
• Generic types don’t match the expected constraints
• Union types don’t include the assigned string value
• Interface properties have mismatched types

Common Error Manifestations:

• Type 'string' is not assignable to type 'number'
• Type 'string' is not assignable to type '"red" | "blue" | "green"'
• Type 'string' is not assignable to type 'boolean'
• Type 'string' is not assignable to type 'MyInterface'
• Type 'string' is not assignable to type 'null'

---

Understanding the Problem

This error typically occurs due to:

• Strict type checking enabled in TypeScript configuration
• Mismatched type definitions between variables and assignments
• Generic type constraints not being met
• Union types that don’t include the assigned value
• Interface property type mismatches
• Function parameter type conflicts
• Return type mismatches
• Enum value assignments

Why This Error Happens:

TypeScript’s type system ensures type safety by preventing incompatible assignments. When you try to assign a string to a variable that expects a different type, TypeScript prevents this to avoid runtime errors. This error helps catch potential bugs during development rather than at runtime.

---

Solution 1: Understand Type Compatibility

The first step is to understand why the types are incompatible.

❌ Without Understanding Compatibility:

// ❌ This will cause an error
let color: 'red' | 'blue' | 'green';
color = 'yellow'; // ❌ Error: Type '"yellow"' is not assignable to type '"red" | "blue" | "green"'

let count: number;
count = '5'; // ❌ Error: Type 'string' is not assignable to type 'number'

interface User {
  id: number;
  name: string;
}
let user: User;
user = { id: '1', name: 'John' }; // ❌ Error: Type 'string' is not assignable to type 'number'

✅ With Proper Understanding:

Type Compatibility Examples:

// ✅ Understanding type compatibility
let color: 'red' | 'blue' | 'green';
color = 'red';    // ✅ Valid - 'red' is in the union
color = 'blue';   // ✅ Valid - 'blue' is in the union
// color = 'yellow'; // ❌ Would cause error

let count: number;
count = 5;        // ✅ Valid - number assignment
count = parseInt('5'); // ✅ Valid - converting string to number

interface User {
  id: number;
  name: string;
}
let user: User;
user = { id: 1, name: 'John' }; // ✅ Valid - correct types

---

Solution 2: Type Conversion and Casting

❌ Without Proper Conversion:

// ❌ Direct assignment without conversion
let age: number;
age = '25'; // ❌ Error: Type 'string' is not assignable to type 'number'

let isActive: boolean;
isActive = 'true'; // ❌ Error: Type 'string' is not assignable to type 'boolean'

let score: number | null;
score = '100'; // ❌ Error: Type 'string' is not assignable to type 'number | null'

✅ With Proper Conversion:

Safe Type Conversions:

// ✅ Convert string to number
let age: number;
age = parseInt('25');        // ✅ Convert string to integer
age = parseFloat('25.5');    // ✅ Convert string to float
age = Number('25');          // ✅ Convert string to number
age = +'25';                 // ✅ Unary plus operator

// ✅ Convert string to boolean
let isActive: boolean;
isActive = 'true' === 'true';     // ✅ Compare string to boolean
isActive = Boolean('true');       // ✅ Convert using Boolean constructor
isActive = 'true'.toLowerCase() === 'true'; // ✅ Case-insensitive comparison

// ✅ Convert string to number or null
let score: number | null;
score = '100' ? Number('100') : null; // ✅ Convert with null check
score = isNaN(Number('100')) ? null : Number('100'); // ✅ Safe conversion

Custom Type Conversion Functions:

// ✅ Create utility functions for safe conversions
function safeNumber(value: string | number | null | undefined): number | null {
  if (value === null || value === undefined) return null;
  const num = typeof value === 'string' ? Number(value) : value;
  return isNaN(num) ? null : num;
}

function safeBoolean(value: string | boolean | null | undefined): boolean {
  if (value === null || value === undefined) return false;
  if (typeof value === 'boolean') return value;
  return value.toLowerCase() === 'true';
}

function safeInteger(value: string | number | null | undefined): number | null {
  if (value === null || value === undefined) return null;
  const num = typeof value === 'string' ? parseInt(value, 10) : value;
  return isNaN(num) ? null : num;
}

// ✅ Usage
const age = safeNumber('25');        // Returns 25
const isActive = safeBoolean('true'); // Returns true
const score = safeInteger('100');    // Returns 100

---

Solution 3: React - Fix Type Assignment Issues

Component Prop Type Issues

❌ With Type Mismatches:

// src/components/UserCard.tsx
import React from 'react';

interface UserProps {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
}

const UserCard: React.FC<UserProps> = ({ id, name, age, isActive }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>ID: {id}</p>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
};

// ❌ This will cause type errors
const App = () => {
  return (
    <UserCard 
      id={'1'}        // ❌ Error: Type 'string' is not assignable to type 'number'
      name={'John'}   // ✅ This is fine
      age={'25'}      // ❌ Error: Type 'string' is not assignable to type 'number'
      isActive={'true'} // ❌ Error: Type 'string' is not assignable to type 'boolean'
    />
  );
};

✅ With Proper Type Handling:

Component with Correct Types:

// src/components/UserCard.tsx
import React from 'react';

interface UserProps {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
}

const UserCard: React.FC<UserProps> = ({ id, name, age, isActive }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>ID: {id}</p>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
};

// ✅ Correct usage with proper types
const App = () => {
  return (
    <UserCard 
      id={1}              // ✅ Correct number type
      name={'John'}       // ✅ Correct string type
      age={25}            // ✅ Correct number type
      isActive={true}     // ✅ Correct boolean type
    />
  );
};

// ✅ Alternative: Using converted values
const AppWithConversion = () => {
  const userData = {
    id: '1',
    name: 'John',
    age: '25',
    isActive: 'true'
  };

  return (
    <UserCard 
      id={parseInt(userData.id)}           // ✅ Convert string to number
      name={userData.name}                 // ✅ Already string
      age={parseInt(userData.age)}         // ✅ Convert string to number
      isActive={userData.isActive === 'true'} // ✅ Convert string to boolean
    />
  );
};

React Hook State Type Issues

❌ With Type Mismatches:

// ❌ State type mismatches
const MyComponent = () => {
  const [count, setCount] = useState<number>('0'); // ❌ Error: Type 'string' is not assignable to type 'number'
  const [isVisible, setIsVisible] = useState<boolean>('true'); // ❌ Error: Type 'string' is not assignable to type 'boolean'
  
  return <div>{count}</div>;
};

✅ With Proper State Types:

// ✅ Correct state initialization
const MyComponent = () => {
  const [count, setCount] = useState<number>(0); // ✅ Initialize with number
  const [isVisible, setIsVisible] = useState<boolean>(true); // ✅ Initialize with boolean
  
  // ✅ Or convert from string if needed
  const [countStr, setCountStr] = useState<string>('0');
  const countNum = parseInt(countStr); // ✅ Convert when needed
  
  return <div>{count}</div>;
};

---

Solution 4: Angular - Fix Type Assignment Issues

Component Property Type Issues

❌ With Type Mismatches:

// src/app/components/user-profile/user-profile.component.ts
import { Component } from '@angular/core';

interface User {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
}

@Component({
  selector: 'app-user-profile',
  template: `
    <div>
      <h2>{{ user.name }}</h2>
      <p>ID: {{ user.id }}</p>
      <p>Age: {{ user.age }}</p>
      <p *ngIf="user.isActive">Status: Active</p>
    </div>
  `
})
export class UserProfileComponent {
  user: User = {
    id: '1',      // ❌ Error: Type 'string' is not assignable to type 'number'
    name: 'John', // ✅ Correct
    age: '25',    // ❌ Error: Type 'string' is not assignable to type 'number'
    isActive: 'true' // ❌ Error: Type 'string' is not assignable to type 'boolean'
  };
}

✅ With Proper Type Handling:

Component with Correct Types:

// src/app/components/user-profile/user-profile.component.ts
import { Component, Input } from '@angular/core';

interface User {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
}

@Component({
  selector: 'app-user-profile',
  template: `
    <div>
      <h2>{{ user.name }}</h2>
      <p>ID: {{ user.id }}</p>
      <p>Age: {{ user.age }}</p>
      <p *ngIf="user.isActive">Status: Active</p>
    </div>
  `
})
export class UserProfileComponent {
  @Input() set userData(value: Partial<User>) {
    // ✅ Convert string values to proper types
    this.user = {
      id: typeof value.id === 'string' ? parseInt(value.id, 10) : value.id,
      name: value.name || '',
      age: typeof value.age === 'string' ? parseInt(value.age, 10) : value.age,
      isActive: typeof value.isActive === 'string' ? value.isActive === 'true' : value.isActive
    };
  }

  user: User = {
    id: 0,        // ✅ Initialize with correct type
    name: '',     // ✅ Initialize with correct type
    age: 0,       // ✅ Initialize with correct type
    isActive: false // ✅ Initialize with correct type
  };
}

// ✅ Alternative: Using getter/setter with automatic conversion
export class UserProfileComponentAlt {
  private _userData: Partial<User> = {};

  @Input() set userData(value: Partial<User>) {
    this._userData = {
      ...value,
      id: typeof value.id === 'string' ? parseInt(value.id, 10) : value.id,
      age: typeof value.age === 'string' ? parseInt(value.age, 10) : value.age,
      isActive: typeof value.isActive === 'string' ? value.isActive === 'true' : value.isActive
    };
  }

  get user(): User {
    return {
      id: this._userData.id || 0,
      name: this._userData.name || '',
      age: this._userData.age || 0,
      isActive: this._userData.isActive || false
    };
  }
}

Service Type Issues

❌ With Type Mismatches:

// src/app/services/user.service.ts
import { Injectable } from '@angular/core';

interface User {
  id: number;
  name: string;
  age: number;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  createUser(userData: { id: string; name: string; age: string }): User {
    // ❌ Type mismatches in return value
    return {
      id: userData.id,    // ❌ Error: Type 'string' is not assignable to type 'number'
      name: userData.name, // ✅ Correct
      age: userData.age   // ❌ Error: Type 'string' is not assignable to type 'number'
    };
  }
}

✅ With Proper Type Handling:

Service with Type Conversion:

// src/app/services/user.service.ts
import { Injectable } from '@angular/core';

interface User {
  id: number;
  name: string;
  age: number;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  createUser(userData: { id: string | number; name: string; age: string | number }): User {
    // ✅ Convert string values to proper types
    return {
      id: typeof userData.id === 'string' ? parseInt(userData.id, 10) : userData.id,
      name: userData.name,
      age: typeof userData.age === 'string' ? parseInt(userData.age, 10) : userData.age
    };
  }

  // ✅ Alternative: Using a mapping function
  mapToUser(userData: any): User {
    return {
      id: this.toNumber(userData.id),
      name: this.toString(userData.name),
      age: this.toNumber(userData.age)
    };
  }

  private toNumber(value: string | number | undefined | null): number {
    if (typeof value === 'number') return value;
    if (typeof value === 'string') return parseInt(value, 10);
    return 0;
  }

  private toString(value: string | undefined | null): string {
    return value || '';
  }
}

---

Solution 5: Type Assertions and Type Guards

Using Type Assertions Safely

❌ Unsafe Type Assertions:

// ❌ Dangerous type assertions
let someValue: any = 'hello world';
let strLength: number = (someValue as string).length; // ❌ Risky if someValue isn't actually a string

// ❌ Direct casting without validation
interface User {
  id: number;
  name: string;
}
const userData: any = { id: '1', name: 'John' };
const user = userData as User; // ❌ This bypasses type checking

✅ Safe Type Assertions:

Proper Type Assertions:

// ✅ Safe type assertion with validation
let someValue: any = 'hello world';
if (typeof someValue === 'string') {
  let strLength: number = (someValue as string).length; // ✅ Safe after validation
}

// ✅ Type assertion with proper validation
interface User {
  id: number;
  name: string;
}

function isValidUser(obj: any): obj is User {
  return obj && 
         typeof obj.id === 'number' && 
         typeof obj.name === 'string';
}

const userData: any = { id: 1, name: 'John' };
if (isValidUser(userData)) {
  const user: User = userData; // ✅ Safe assignment after validation
}

Type Assertion Utilities:

// ✅ Utility functions for safe type assertions
function assertString(value: unknown): string {
  if (typeof value !== 'string') {
    throw new Error(`Expected string, got ${typeof value}`);
  }
  return value;
}

function assertNumber(value: unknown): number {
  if (typeof value === 'string') {
    const num = Number(value);
    if (isNaN(num)) {
      throw new Error(`Cannot convert "${value}" to number`);
    }
    return num;
  }
  if (typeof value !== 'number') {
    throw new Error(`Expected number, got ${typeof value}`);
  }
  return value;
}

function assertBoolean(value: unknown): boolean {
  if (typeof value === 'string') {
    return value.toLowerCase() === 'true';
  }
  if (typeof value === 'number') {
    return value !== 0;
  }
  if (typeof value === 'boolean') {
    return value;
  }
  throw new Error(`Cannot convert ${typeof value} to boolean`);
}

// ✅ Usage
const rawId = '123';
const id = assertNumber(rawId); // ✅ Safely converts string to number

const rawActive = 'true';
const isActive = assertBoolean(rawActive); // ✅ Safely converts string to boolean

---

Solution 6: Generic Types and Type Constraints

Working with Generics

❌ Without Proper Constraints:

// ❌ Generic without constraints
function processValue<T>(value: T): T {
  // ❌ Can't safely assume T has string methods
  return value.toUpperCase(); // ❌ Error: Property 'toUpperCase' does not exist on type 'T'
}

// ❌ Generic function with type mismatch
function createEntity<T>(data: T): T {
  return {
    ...data,
    createdAt: new Date()
  }; // ❌ Error: Type mismatch
}

✅ With Proper Constraints:

Generic Functions with Constraints:

// ✅ Generic with string constraint
function processValue<T extends string>(value: T): T {
  return value.toUpperCase() as T; // ✅ Safe because T extends string
}

// ✅ Generic with object constraint
interface Timestamped {
  createdAt: Date;
}

function addTimestamp<T extends object>(obj: T): T & Timestamped {
  return {
    ...obj,
    createdAt: new Date()
  };
}

// ✅ Usage
const result = addTimestamp({ name: 'John', age: 30 }); // ✅ Type-safe
console.log(result.createdAt); // ✅ Available

// ✅ Generic function with type conversion
function convertValues<T extends Record<string, unknown>>(obj: T, converters: { [K in keyof T]?: (value: any) => T[K] }): T {
  const result = { ...obj } as T;
  
  for (const [key, converter] of Object.entries(converters)) {
    if (converter && key in obj) {
      (result as any)[key] = converter((obj as any)[key]);
    }
  }
  
  return result;
}

// ✅ Usage example
interface User {
  id: number;
  name: string;
  age: number;
  isActive: boolean;
}

const rawData = {
  id: '123',
  name: 'John',
  age: '30',
  isActive: 'true'
};

const convertedUser = convertValues(rawData, {
  id: (val: string) => parseInt(val, 10),
  age: (val: string) => parseInt(val, 10),
  isActive: (val: string) => val === 'true'
}) as User;

---

Solution 7: Union Types and Literal Types

Handling Union Types

❌ Without Proper Union Handling:

// ❌ Not handling union types properly
type Status = 'active' | 'inactive' | 'pending';

let userStatus: Status;
userStatus = 'unknown'; // ❌ Error: Type '"unknown"' is not assignable to type 'Status'

✅ With Proper Union Handling:

Union Type Management:

// ✅ Proper union type handling
type Status = 'active' | 'inactive' | 'pending';

function setStatus(status: Status): void {
  console.log(`Setting status to: ${status}`);
}

// ✅ Safe assignment
let userStatus: Status = 'active'; // ✅ Valid
setStatus(userStatus);

// ✅ Converting string to union type
function stringToStatus(str: string): Status | null {
  const validStatuses: Status[] = ['active', 'inactive', 'pending'];
  return validStatuses.includes(str as Status) ? str as Status : null;
}

const rawStatus = 'active';
const convertedStatus = stringToStatus(rawStatus); // ✅ Returns 'active' | null

if (convertedStatus) {
  setStatus(convertedStatus); // ✅ Safe to use
}

// ✅ Using type guards for union types
type ApiResponse = { success: true; data: any } | { success: false; error: string };

function isSuccessfulResponse(response: any): response is { success: true; data: any } {
  return response && response.success === true && 'data' in response;
}

function isErrorResponse(response: any): response is { success: false; error: string } {
  return response && response.success === false && 'error' in response;
}

// ✅ Usage with type guards
const apiResponse: any = { success: true, data: { id: 1, name: 'John' } };

if (isSuccessfulResponse(apiResponse)) {
  console.log(apiResponse.data); // ✅ TypeScript knows this has data property
} else if (isErrorResponse(apiResponse)) {
  console.log(apiResponse.error); // ✅ TypeScript knows this has error property
}

---

Working Code Examples

Complete React Solution:

// src/components/SafeForm.tsx
import React, { useState } from 'react';

interface FormData {
  id: number;
  name: string;
  age: number;
  email: string;
  isActive: boolean;
}

const SafeForm: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    id: 0,
    name: '',
    age: 0,
    email: '',
    isActive: false
  });

  const [rawInputs, setRawInputs] = useState({
    id: '',
    name: '',
    age: '',
    email: '',
    isActive: ''
  });

  // ✅ Handle input changes with type conversion
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target;
    
    setRawInputs(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked.toString() : value
    }));

    // ✅ Convert and update form data
    setFormData(prev => ({
      ...prev,
      [name]: name === 'id' ? parseInt(value) || 0 :
               name === 'age' ? parseInt(value) || 0 :
               name === 'isActive' ? checked :
               value
    }));
  };

  // ✅ Safe submission with validation
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // ✅ Validate before submitting
    if (formData.name && formData.email) {
      console.log('Submitting:', formData);
    } else {
      console.error('Missing required fields');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>ID: </label>
        <input
          type="number"
          name="id"
          value={rawInputs.id}
          onChange={handleInputChange}
        />
      </div>
      
      <div>
        <label>Name: </label>
        <input
          type="text"
          name="name"
          value={rawInputs.name}
          onChange={handleInputChange}
        />
      </div>
      
      <div>
        <label>Age: </label>
        <input
          type="number"
          name="age"
          value={rawInputs.age}
          onChange={handleInputChange}
        />
      </div>
      
      <div>
        <label>Email: </label>
        <input
          type="email"
          name="email"
          value={rawInputs.email}
          onChange={handleInputChange}
        />
      </div>
      
      <div>
        <label>
          <input
            type="checkbox"
            name="isActive"
            checked={formData.isActive}
            onChange={handleInputChange}
          />
          Is Active
        </label>
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
};

export default SafeForm;

Complete Angular Solution:

// src/app/components/type-safe-form/type-safe-form.component.ts
import { Component } from '@angular/core';

interface FormData {
  id: number;
  name: string;
  age: number;
  email: string;
  isActive: boolean;
}

@Component({
  selector: 'app-type-safe-form',
  template: `
    <form (ngSubmit)="onSubmit()" #form="ngForm">
      <div>
        <label for="id">ID:</label>
        <input 
          type="number" 
          id="id" 
          name="id" 
          [(ngModel)]="rawInputs.id" 
          (ngModelChange)="convertAndSet('id', $event)"
          #idInput="ngModel"
        >
      </div>
      
      <div>
        <label for="name">Name:</label>
        <input 
          type="text" 
          id="name" 
          name="name" 
          [(ngModel)]="rawInputs.name" 
          (ngModelChange)="convertAndSet('name', $event)"
          #nameInput="ngModel"
        >
      </div>
      
      <div>
        <label for="age">Age:</label>
        <input 
          type="number" 
          id="age" 
          name="age" 
          [(ngModel)]="rawInputs.age" 
          (ngModelChange)="convertAndSet('age', $event)"
          #ageInput="ngModel"
        >
      </div>
      
      <div>
        <label for="email">Email:</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          [(ngModel)]="rawInputs.email" 
          (ngModelChange)="convertAndSet('email', $event)"
          #emailInput="ngModel"
        >
      </div>
      
      <div>
        <label for="isActive">
          <input 
            type="checkbox" 
            id="isActive" 
            name="isActive" 
            [(ngModel)]="formData.isActive"
            #isActiveInput="ngModel"
          >
          Is Active
        </label>
      </div>
      
      <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>
    
    <div class="preview">
      <h3>Form Data Preview:</h3>
      <pre>{{ formData | json }}</pre>
    </div>
  `,
  styles: [`
    form { max-width: 500px; margin: 20px; }
    div { margin-bottom: 15px; }
    label { display: inline-block; width: 100px; }
    input { padding: 5px; }
    .preview { margin: 20px; padding: 15px; background: #f5f5f5; }
  `]
})
export class TypeSafeFormComponent {
  formData: FormData = {
    id: 0,
    name: '',
    age: 0,
    email: '',
    isActive: false
  };

  rawInputs = {
    id: '',
    name: '',
    age: '',
    email: '',
    isActive: ''
  };

  // ✅ Convert and set form data with proper types
  convertAndSet(field: keyof FormData, value: any): void {
    switch (field) {
      case 'id':
        this.formData.id = typeof value === 'string' ? parseInt(value) || 0 : value;
        break;
      case 'age':
        this.formData.age = typeof value === 'string' ? parseInt(value) || 0 : value;
        break;
      case 'name':
      case 'email':
        this.formData[field] = value;
        break;
      case 'isActive':
        this.formData.isActive = typeof value === 'string' ? value === 'true' : value;
        break;
    }
  }

  onSubmit(): void {
    if (this.isFormValid()) {
      console.log('Submitting form data:', this.formData);
    } else {
      console.error('Form has invalid data');
    }
  }

  private isFormValid(): boolean {
    return this.formData.name.trim() !== '' && 
           this.formData.email.includes('@');
  }
}

Utility Functions for Type Safety:

// src/utils/type-safety.ts
export class TypeConverter {
  /**
   * Safely convert a value to number
   */
  static toNumber(value: unknown, defaultValue: number = 0): number {
    if (value === null || value === undefined) return defaultValue;
    if (typeof value === 'number') return value;
    if (typeof value === 'string') {
      const num = Number(value);
      return isNaN(num) ? defaultValue : num;
    }
    return defaultValue;
  }

  /**
   * Safely convert a value to string
   */
  static toString(value: unknown, defaultValue: string = ''): string {
    if (value === null || value === undefined) return defaultValue;
    return String(value);
  }

  /**
   * Safely convert a value to boolean
   */
  static toBoolean(value: unknown, defaultValue: boolean = false): boolean {
    if (value === null || value === undefined) return defaultValue;
    if (typeof value === 'boolean') return value;
    if (typeof value === 'string') {
      return value.toLowerCase() === 'true' || value === '1';
    }
    if (typeof value === 'number') {
      return value !== 0;
    }
    return defaultValue;
  }

  /**
   * Safely convert to a specific enum/literal type
   */
  static toLiteral<T extends string>(value: unknown, validValues: T[], defaultValue: T): T {
    if (typeof value === 'string' && validValues.includes(value as T)) {
      return value as T;
    }
    return defaultValue;
  }

  /**
   * Validate and convert an object to a specific interface
   */
  static convertToObject<T>(obj: any, schema: { [K in keyof T]: (value: any) => T[K] }): T | null {
    try {
      const result = {} as T;
      for (const [key, converter] of Object.entries(schema)) {
        const typedKey = key as keyof T;
        if (typedKey in obj) {
          (result as any)[typedKey] = converter(obj[typedKey]);
        }
      }
      return result;
    } catch (error) {
      console.error('Object conversion failed:', error);
      return null;
    }
  }
}

// ✅ Usage examples
const rawId = '123';
const id = TypeConverter.toNumber(rawId); // Returns 123

const rawActive = 'true';
const isActive = TypeConverter.toBoolean(rawActive); // Returns true

const rawName = null;
const name = TypeConverter.toString(rawName, 'Anonymous'); // Returns 'Anonymous'

// ✅ Using with schema
interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const rawUserData = { id: '456', name: 'Jane', isActive: 'false' };
const userSchema = {
  id: (v: any) => TypeConverter.toNumber(v),
  name: (v: any) => TypeConverter.toString(v),
  isActive: (v: any) => TypeConverter.toBoolean(v)
};

const user = TypeConverter.convertToObject<User>(rawUserData, userSchema);
// Returns: { id: 456, name: 'Jane', isActive: false }

---

Best Practices for Type Safety

1. Always Define Clear Interfaces

// ✅ Define clear interfaces upfront
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  createdAt: Date;
}

2. Use Type Guards for Runtime Validation

// ✅ Implement type guards for complex validations
function isUser(obj: any): obj is User {
  return obj && 
         typeof obj.id === 'number' && 
         typeof obj.name === 'string' && 
         typeof obj.email === 'string' && 
         typeof obj.isActive === 'boolean' &&
         obj.createdAt instanceof Date;
}

3. Convert Data at the Boundary

// ✅ Convert external data immediately when received
const apiResponse = await fetch('/api/user');
const rawData = await apiResponse.json();
const user: User = {
  id: parseInt(rawData.id),
  name: rawData.name,
  email: rawData.email,
  isActive: rawData.isActive === 'true',
  createdAt: new Date(rawData.createdAt)
};

4. Use Strict TypeScript Configuration

// ✅ Enable strict type checking
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictFunctionTypes": true
  }
}

5. Create Utility Functions for Common Conversions

// ✅ Create reusable conversion utilities
const safeParseInt = (value: string, fallback: number = 0) => {
  const parsed = parseInt(value, 10);
  return isNaN(parsed) ? fallback : parsed;
};

---

Debugging Steps

Step 1: Identify the Exact Error

# ✅ Read the full error message
# Note the specific types involved
# Check the line number and context

Step 2: Check Type Definitions

// ✅ Examine the type definitions
// Look for interface/union/type mismatches
// Verify generic constraints

Step 3: Trace the Assignment Chain

// ✅ Follow the data flow
// Identify where the wrong type is introduced
// Check all intermediate assignments

Step 4: Test Type Conversions

// ✅ Test conversions in isolation
// Verify that conversions work as expected
// Check for edge cases

---

Common Mistakes to Avoid

1. Using ‘any’ to Suppress Errors

// ❌ Don't use 'any' to suppress type errors
let value: any = 'string';
let num: number = value; // ❌ This defeats type safety

2. Overusing Type Assertions

// ❌ Don't overuse type assertions without validation
const data: any = { id: '123' };
const user = { id: data.id as number }; // ❌ Risky

3. Ignoring Union Type Constraints

// ❌ Don't ignore union type limitations
type Color = 'red' | 'blue' | 'green';
let color: Color = 'yellow'; // ❌ This will cause an error

4. Not Handling Asynchronous Data Types

// ❌ Don't assume API responses have correct types
const response = await fetch('/api/data');
const data = await response.json(); // ❌ Could be any type
// Need to validate/convert before assigning to typed variables

---

Performance Considerations

1. Efficient Type Conversions

// ✅ Use efficient conversion methods
const num = +str; // ✅ Faster than parseInt for simple cases
const bool = !!str; // ✅ Faster than Boolean() for truthiness

2. Minimize Runtime Type Checks

// ✅ Perform type checks once, store results
// Avoid repeated type guard calls in loops

3. Cache Converted Values

// ✅ Cache expensive conversions
// Store converted values rather than converting repeatedly

---

Security Considerations

1. Validate External Input

// ✅ Always validate data from external sources
// Don't trust API responses to have correct types

2. Sanitize User Input Before Type Conversion

// ✅ Sanitize input before conversion
// Prevent injection attacks through type manipulation

3. Handle Type Conversion Failures Gracefully

// ✅ Implement proper error handling
// Don't crash on invalid type conversions

---

Testing Type Safety

1. Unit Tests for Type Conversion Functions

// ✅ Test conversion functions with various inputs
test('toNumber converts string to number', () => {
  expect(TypeConverter.toNumber('123')).toBe(123);
  expect(TypeConverter.toNumber('abc', 0)).toBe(0);
});

2. Test Edge Cases

// ✅ Test with null, undefined, and invalid values
test('handles null and undefined', () => {
  expect(TypeConverter.toNumber(null)).toBe(0);
  expect(TypeConverter.toNumber(undefined)).toBe(0);
});

3. Integration Tests for Type Flow

// ✅ Test the complete type flow in components
// Verify that data maintains correct types through the application

---

Alternative Solutions

1. Using Zod for Runtime Validation

// ✅ Use external validation libraries
import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  isActive: z.boolean()
});

type User = z.infer<typeof UserSchema>;

2. Custom Type Guards

// ✅ Create specific type guard functions
const isNumericString = (value: string): boolean => /^\d+$/.test(value);

3. Wrapper Classes

// ✅ Create type-safe wrapper classes
class TypedValue<T> {
  constructor(private value: T) {}
  get(): T { return this.value; }
}

---

Migration Checklist

• Review all type definitions for accuracy
• Identify areas with type assignment errors
• Implement proper type conversion functions
• Update interfaces to match actual data structures
• Add type guards for runtime validation
• Test all type conversions with edge cases
• Enable strict TypeScript checking
• Update documentation for team members

---

Conclusion

The ‘Type string is not assignable to type’ error in TypeScript is a safety feature that prevents incompatible type assignments. By following the solutions provided in this guide—whether through proper type conversions, type guards, generic constraints, or utility functions—you can create robust and type-safe TypeScript applications.

The key is to understand TypeScript’s type system, implement proper conversion strategies, validate data at boundaries, and maintain type safety throughout your application. With proper implementation of these patterns, your TypeScript applications will be more reliable, maintainable, and less prone to runtime errors.

Remember to always validate external data, implement proper type conversions, use type guards for runtime validation, and maintain strict type checking to create robust TypeScript applications that leverage the full power of TypeScript’s type system.