JavaScript provides the bind, call, and apply functions that are used when we need to override the value of the this variable inside a function. We have already seen the use of the apply function in our discussion on decorators in Chapter 4, Decortators, Generics and Asynchronous Features. We will discuss the use of the bind function in detail in Chapter 7, TypeScript Compatible Frameworks. The strictBindCallApply compiler option can be used to ensure that the parameters that are used in any of these calls are type safe. To illustrate this concept, consider the following code:

class MyBoundClass {
    name: string = "defaultNameValue";

    printName(index: number, description: string) {
        console.log(`this.name : ${this.name}`);
        console.log(`index : ${index}`);
        console.log(`description : ${description}`);
    }
}

let testBoundClass = new MyBoundClass();
testBoundClass.printName(1, 'testDesc');

Here, we have defined a class named MyBoundClass that has a single property named name, which is set to a default value of "defaultNameValue". We have then defined a printName function that has two parameters. The first parameter is named index, and is of type number, and the second parameter is named description, which is of type string. The printName function logs the value of this.name to the console, and then also logs the value of the index and description arguments. We then create an instance of the MyBoundClass class, and assign it to the variable named testBoundClass. Finally, we call the printName function with two arguments. The output of this code snippet is as follows:

this.name : defaultNameValue
index : 1
description : testDesc

Here, we can see that the values logged to the console are as expected. Note in particular that the value of the this.name property is what we set by default for this class. If we now use the JavaScript call function, we are able to override the this.name property as follows:

testBoundClass.printName.call(
    { name: `overridden name property value` },
    1, 'call : whoah !');

Here, we are executing the printName function of the variable testBoundClass, which is an instance of the MyBoundClass class. This time, however, we are using the JavaScript call function, which uses the the first parameter we supply as the value of this. The second and third arguments are then passed through to the printName function. The results of this call are as follows:

this.name : overridden name property value
index : 1
description : call : whoah !

Here, we can see that the name property of the MyBoundClass class has been overridden from its default value of "defaultNameValue" to the value of the name property from the object that was passed into the JavaScript call function, which was "overridden name property value".  In  other words, using the call function, we are able to override the value of the this.name property by specifying a value to be used for the this property.

The TypeScript compiler will generate errors if the types of the properties used in the call to the JavaScript call function are incorrect. This can be illustrated by the following code:

testBoundClass.printName.call(
    { name: `overridden name property value` },
    "string", 12);

Here, we are using the JavaScript call function to override the value of this that is used in the MyBoundClass class.  Unfortunately, we have provided a string value of "string" for the first parameter that should have been of type number. The TypeScript compiler will generate the following error in this case:

error TS2345: Argument of type '"string"' is not assignable to parameter of type 'number', "string", 12);

Here, we can see that the TypeScript compiler does, in fact, generate errors if the parameters supplied to a function are not of the correct types. It enforces these rules even if we use the JavaScript call function, as we have specified that the strictBindCallApply compiler option is set to true. 

Note that the format of the apply function uses an array to specify the argument list as follows:

testBoundClass.printName.apply(
    { name: `overridden by apply` },
    [1, 'apply : whoah !']);

Here, we are using the JavaScript apply function to override the value of this inside the instance of the MyBoundClass instance. However, instead of using a parameter list, we are using an array of arguments.

Using the strictBindCallApply compiler option will generate errors if any one of the bind, call, or apply functions are used with incorrect parameter types.