Type syntax

The TypeScript syntax for declaring the type of a variable is to include a colon (:) after the variable name, and then indicate its type. As an example of this, let's rewrite our problematic doCalculation function to only accept numbers. Consider the following TypeScript code:

function doCalculation( 
    a : number, 
    b : number, 
    c : number) { 
    return ( a * b ) + c; 
} 
 
var result = doCalculation(3,2,1); 
console.log("doCalculation():" + result); 

Here, we have specified that the doCalculation function needs to be invoked with three numbers. This means that the properties a, b, and c must be of type number in order to call this function. If we now attempt to call this function with strings, as we did with the JavaScript sample, as follows:

var result = doCalculation("1", "2", "3"); 
console.log("doCalculation():"" + result); 

The TypeScript compiler will generate the following error:

error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.

This error message clearly tells us that we cannot pass a string into our function, where a numeric value is expected.

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

var myString : string; 
var myNumber : number; 
var myBoolean : boolean; 
myString = "1"; 
myNumber = 1; 
myBoolean = true; 

Here, we are telling the compiler that the myString variable is of type string, even before the variable itself has been used. Similarly, the myNumber variable is of type number, and the myBoolean variable is of type boolean. TypeScript has introduced the string, number, and boolean keywords for each of these basic JavaScript types.

If we then attempt to assign a value to a variable that is not of the same type, the TypeScript compiler will generate a compile-time error. Given the variables declared in the preceding code, consider the following TypeScript code:

myString = myNumber; 
myBoolean = myString; 
myNumber = myBoolean; 

This is what happens after our attempt to mix these basic types:

The TypeScript compiler has now started generating compile errors because it has detected that we are attempting to mix these basic types:

• The first error is generated because we cannot assign a number value to a variable of type string
• Similarly, the second compile error indicates that we cannot assign a string value to a variable of type boolean
• And the third error is generated because we cannot assign a boolean value to a variable of type number

The strong typing syntax that the TypeScript language introduces means that we need to ensure that the types on the left-hand side of an assignment operator (=) are the same as the types on the right-hand side of the assignment operator.

To fix the preceding TypeScript code and remove the compile errors, we would need to do something similar to the following:

myString = myNumber.toString(); 
myBoolean = (myString === "test"); 
if (myBoolean) { 
    myNumber = 1; 
} 

Here, our first line of code has been changed to call the .toString() function on the myNumber variable (which is of type number), in order to return a value that is of type string. This line of code, then, does not generate a compile error because both sides of the equal sign (or assignment operator) are strings.

Our second line of code has also been changed, so that the right-hand side of the assignment operator returns the result of a Boolean comparison, myString === "test", which will return a value of type boolean. The compiler will, therefore, allow this code because both sides of the assignment resolve to a value of type boolean.

The last line of our code snippet has been changed to only assign the value 1 (which is of the type number) to the myNumber variable if the value of the myBoolean variable is true.

This is the feature that Anders Hejlsberg describes as syntactic sugar. In other words, with a little sugar on top of comparable JavaScript code, TypeScript has enabled our code to transform into a strongly typed language. Whenever you break these strong typing rules, the compiler will generate errors for the offending code.