TypeScript’s Type Checking
How TypeScript’s duck typing system works?
TypeScript uses static type checking which means that it checks for types at compile time. No information about type is used or retained at runtime. TypeScript uses duck typing which is unlike Java or C++ type checking system. Below are few examples that explains a few nuances of typescript’s type checking.
Functions Compatibility
Consider the following example
A class Foo implements an interface foo and as such it required to implement the two functions defined in the interface. The implementation of the functions is somewhat different than what is defined in the interface. To start with, the method bar doesn’t have enough arguments and method log has a return type of String where as the method returns void as defined in the interface. Despite of all this, TypeScript type checking still passes and the code is compiled to JavaScript.
When comparing functions, each argument in the parameter list of the target function (in this case bar() ) must have a corresponding parameter of the same type in the source function (in this case bar(para: number) ). In our case the implementation of bar method has no arguments and it is completely valid. In simple terms, a function with less number of arguments is assignable to a function with greater number of arguments provided that the type of parameters matches.
When considering the return types of methods, a target function is assignable to a source function if and only if the return type of source function is a subtype of the return type of target function. In our case, the implementation of the log method returns a string and the source method’s return type is void which is a subtype of the target type’s return type.
If you understood the above two paragraphs then you would completely understand why the code below is completely valid
TypeScript models JavaScript’s runtime behavior a lot and as such it allows ignoring extra function parameters as it did in the above example (implementation of x has one less parameter). We ignore function parameters in JavaScript all the time. For example, in Node.js when handling request we define middleware and these functions by definition takes three arguments req, res and next . It is very common to ignore the third argument next and only define two arguments req and res . Another example, is the callback of foreach method defined on array objects. The callback method by definition takes 3 arguments, currentValue, index, array and in most of the implementations, we only deal with currentValue and the rest of the two parameters are ignored.
Type Checking with Objects
Consider the following example
This example illustrates TypeScript’s structural typing or duck-typing in action. TypeScript only checks if the type of obj2 which is y has all properties defined in the type of obj1 which is x . If yes, then type y is completely assignable to type x . It is worth mentioning that in the example above even though extra properties can sneak in but we will be unable to use them since those extra properties are not defined on the type of source variable. For example, obj1.age would give an error, since the interface x does not define a property age. However, you might want to know something else as well which is illustrated below
Going by the above explanation then the object literal has all the properties defined in interface x in addition with extra property age: 7 . This should be valid, but it is not. Here we are assigning an object literal and object literals undergo excessive property checking. In case of object literals if it has any property which the source type does not have it throws an error. However, in the previous example it did not throw an error and any excessive properties can easily sneak in.
References
This article has just scratched the surface of TypeScript type checking and these are the scenarios that you will encounter the most in your daily coding. However, there is much more to it. Read more at the following
