What is causing TypeScript to compile and remove local variables in my Angular base controller?

Question

What is causing TypeScript to compile and remove local variables in my Angular base controller?

I am trying to develop a base controller in Typescript/Angular for accessing form data, but I'm encountering an issue where the form member seems to be getting removed during compilation and is not present in the generated JavaScript code.

Could you please help me identify where I might be making a mistake?

Below is the snippet of my code:

export class FormController {

    form: ng.IFormController;

    constructor() {
    }

    showValidation(fieldName: string, errorType: string): boolean {
        var field = this.form[fieldName];
        var fieldError = typeof errorType === 'undefined' ? field.$invalid : field.$error[errorType];
        return !field.$pristine && fieldError;
    }

}}

export class ImplController extends FormController {

    constructor(private $state: ng.ui.IStateService) {
        super();
    }


    public validateField(): boolean {
        return this.showValidation('field-name', 'invalid');
    }

}

The resulting output in JS looks similar to this:

var FormController = (function () {
    function FormController() {
    }
    FormController.prototype.showValidation = function (fieldName, errorType) {
              ...
    };
    return FormController;
}());

javascript angularjs typescript

Answer 1

Answer №1

When programming in TypeScript, properties declared outside of the constructor are specific to TypeScript and do not actually exist in JavaScript's language specification. They are mainly used to help TypeScript understand the properties of your class.

To illustrate this concept further, consider the following TypeScript code:

class TestClass {
    myString: string = "Hello";
    constructor(){}
}

If you compile this code using the TypeScript compiler with ES6 as the target, it will be transformed into:

class Tester {
    constructor() {
        this.myString = "Hello";
    }
}

However, if you do not initialize a value for your variable, the TypeScript compiler will remove it:

class TestClass {
    myString: string;
    constructor(){}
}

This code will transpile to:

class TestClass {
    constructor(){}
}

Additional Note

In response to your query, the error you are encountering is likely due to not assigning a value to your property, causing the TypeScript compiler to remove it. Simply assign it a value such as IFormController to avoid errors.

Answer 2

When programming in TypeScript, properties declared outside of the constructor are specific to TypeScript and do not actually exist in JavaScript's language specification. They are mainly used to help TypeScript understand the properties of your class.

To illustrate this concept further, consider the following TypeScript code:

class TestClass {
    myString: string = "Hello";
    constructor(){}
}

If you compile this code using the TypeScript compiler with ES6 as the target, it will be transformed into:

class Tester {
    constructor() {
        this.myString = "Hello";
    }
}

However, if you do not initialize a value for your variable, the TypeScript compiler will remove it:

class TestClass {
    myString: string;
    constructor(){}
}

This code will transpile to:

class TestClass {
    constructor(){}
}

Additional Note

In response to your query, the error you are encountering is likely due to not assigning a value to your property, causing the TypeScript compiler to remove it. Simply assign it a value such as IFormController to avoid errors.

What is causing TypeScript to compile and remove local variables in my Angular base controller?

Answer №1

Similar questions

Utilizing variables in Angular service to make API calls

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

What is limiting me from utilizing the entire Google Calendar feed?

Include new options to the select box only if they are not already listed

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

Easily accessible jQuery tabs with the option to directly link to a specific tab

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

leveraging the power of jquery colorbox to dynamically display an angularjs template

Reactjs Router.push function does not behave as intended

What is the best way to make a box modal function that displays a different image source than the one shown in the modal?

"Alert in Javascript executing prematurely prior to initiating the function for sending a get request

Is there a way to set columns as initially hidden in MaterialTable?

The angular.json file contains a script and a styles property

Changing the state of a form field to "dirty" using Angular.js programmatically

Tips for adding an svg element to an existing svg using d3.js

How should one properly format an array of objects with elements that are different types of variations?

Was anticipating 1 argument, however received 5 in TypeScript

Ways to interact with similar dynamic controls in Javascript

How to retrieve the first option selected in Material-UI React?

Utilizing Google Closure Library with Angular 6