Deep Analysis of TypeError "... is not a function" in Angular: The Pitfalls of TypeScript Class Instantiation and JSON Deserialization

Problem Phenomenon and Background

In Angular 6 development, developers frequently encounter a confusing error: ERROR TypeError: "... is not a function", even when the relevant function is clearly defined in the class. This article analyzes a typical case: in the BatterieSensorComponent, a Device object is received via @Input(), and when calling this.device.addKeysToObj() in ngOnInit, the error "_this.device.addKeysToObj is not a function" is thrown.

Root Cause Analysis

The core issue lies in the discrepancy between TypeScript's type system and JavaScript's runtime behavior. Although device is declared as type Device, the actual passed object is not a true instance of the Device class. Examining the log output:

{
    deviceID: "000000001",
    deviceType: "sensor",
    id: 5,
    location: "-",
    name: "Batteries",
    subType: "sensor",
    valueNamingMap: { v0: "vehicle battery", v1: "Living area battery" },
    <prototype>: Object { … }
}

This object has all properties of the Device class but lacks class methods. This occurs because the data originates from an HTTP response; the get() method of HttpClient returns plain JavaScript objects, not TypeScript class instances.

Fundamental Differences Between TypeScript Interfaces and Classes

Understanding this issue requires distinguishing between TypeScript interfaces and classes:

• Interface: A purely compile-time construct that does not exist in JavaScript runtime. It only provides type checking and generates no actual code.
• Class: Compiled into JavaScript constructor functions and prototype methods, existing in runtime.

Consider the following example:

interface SimpleValue {
    a: number;
    b: string;
}

class SimpleClass {
    constructor(public a: number, public b: string) { }

    printA() {
        console.log(this.a);
    }
}

// Store to localStorage
const valueToSave: SimpleClass = new SimpleClass(1, 'b');
localStorage.setItem('MyKey', JSON.stringify(valueToSave));

// Load from localStorage
const loadedValue = JSON.parse(localStorage.getItem('MyKey') as string) as SimpleClass;

console.log(loadedValue.a); // Output: 1
console.log(loadedValue.b); // Output: 'b'
loadedValue.printA(); // TypeError: loadedValue.printA is not a function

The JSON serialization process loses all method information because JSON format only supports basic data types (strings, numbers, booleans, arrays, objects, and null), unable to represent functions or class instances.

Solutions

Solution 1: Instantiate Objects in Parent Component

Convert plain objects to class instances immediately after data retrieval:

ngOnInit() {
  this.deviceService.list('', 'sensor').subscribe(
    res => { 
      this.devices = res.results.map(x => Object.assign(new Device(), x));
    }
  )
}

Object.assign(new Device(), x) creates a new Device instance and copies properties from x to it, thereby restoring class methods.

Solution 2: Use Explicit Constructor

Create a dedicated constructor for data transformation:

class Device {
    id: number;
    deviceID: string;
    // ... other properties

    constructor(data?: any) {
        if (data) {
            this.id = data.id;
            this.deviceID = data.deviceID;
            // ... copy other properties
            this.valueNamingMap = data.valueNamingMap || {};
        }
    }

    addKeysToObj(deviceValues: object): void {
        for (let key of Object.keys(deviceValues)) {
            if (!this.valueNamingMap.hasOwnProperty(key)) {
                this.valueNamingMap[key] = '';
            }
        }
    }
}

// Usage
this.devices = res.results.map(x => new Device(x));

Solution 3: Transform in Service Layer

Encapsulate transformation logic in services to ensure components always receive proper class instances:

@Injectable({
    providedIn: 'root'
})
export class DeviceService {
    constructor(private httpClient: HttpClient) { }

    list(url?: string, deviceType?: string, subType?: string): Observable<Page<Device>> {
        if(!url) url = `${this.url}/devices/`;
        if(deviceType) url+= '?deviceType=' + deviceType;
        if(subType) url+= '&subType=' + subType;

        return this.httpClient.get<Page<any>>(url, { headers: this.headers })
            .pipe(
                map(page => ({
                    ...page,
                    results: page.results.map(item => new Device(item))
                })),
                catchError(this.handleError('LIST devices', new Page<Device>()))
            );
    }
}

Extended Application: Handling Complex Types

This pattern also applies to other types requiring special handling, such as date objects:

interface UserContract {
    id: string;
    name: string;
    lastLogin: string; // Date in ISO string format
}

class UserModel {
    id: string;
    name: string;
    lastLogin: Date; // Actual Date object

    constructor(contract: UserContract) {
        this.id = contract.id;
        this.name = contract.name;
        this.lastLogin = new Date(contract.lastLogin); // String to Date conversion
    }

    printFriendlyLastLogin() {
        console.log(this.lastLogin.toLocaleString());
    }
}

// Usage in service
return this.httpClient.get<UserContract>('api/user')
    .pipe(
        map(contract => new UserModel(contract))
    );

Best Practices Summary

1. Clearly Distinguish Data Contracts and Domain Models: Define interfaces (or types) to describe API response structures, and classes to implement business logic.
2. Perform Type Conversion Early: Convert plain objects to class instances at application boundaries (e.g., service layer).
3. Keep Transformation Logic Centralized: Encapsulate object conversion code in constructors or factory functions to avoid scattering.
4. Leverage TypeScript Type System: Although interfaces provide no runtime guarantees, combined with proper conversion logic, type-safe applications can be built.
5. Test Validation: Write unit tests to verify correctness of object conversion, especially method availability.

Conclusion

The "... is not a function" error in Angular typically stems from TypeScript class instantiation issues rather than code logic errors. By understanding the limitations of JSON serialization, the characteristics of TypeScript's type system, and adopting appropriate data transformation strategies, developers can avoid this common pitfall and build more robust and maintainable applications. The three solutions presented in this article each have suitable scenarios, and developers should choose the most appropriate implementation based on specific requirements.