TypeScript adds class-based object orientation, interfaces, and modules. These features will help us structure our code in a much better way. But those features are only available at design time.
For example, we can declare interfaces in TypeScript but since JavaScript doesn’t support interfaces, the TypeScript compiler will not declare or try to emulate this feature in the output JavaScript code.
Why TypeScript
Variables in JavaScript can hold a number of data types, including numbers, strings, arrays, objects, functions, and more. The data type of an object in JavaScript is determined by its assignment. Consider the following example:
function solve(a, b, c) {
return (a * b) + c;
}
var solution = solve(1, 1, 1);
console.log('solve(): ' + solution);
The output of this sample would be:
solve(): 2
This is the expected result, as 1 * 1 = 1, and 1 + 1 = 2.
Now, if we call the function with strings instead of numbers:
solution = solve("1","1","1");
console.log('solve(): ' + solution);
The output of this code sample is as follows:
solve():11
The result of 11 is very different from our expected result of 2. So what is going on here?
The product of two numbers, that is, (a * b), returns a numeric value, so JavaScript is automatically converting the values "1" and "1" to numbers in order to compute the product, and correctly computing the value 1. This is a particular rule that JavaScript applies in order to convert strings to numbers, when the result should be a number. But the addition symbol, that is, +, does not infer that both values are numeric.
Because the argument c is a string, JavaScript is converting the value 1 into a string in order to add two strings. This results in the string "1" being added to the string "1", which results in the value "11". Obviously, these sorts of automatic type conversions can cause unwanted behavior in our code.
Getting Started with TypeScript
The easiest and fastest way to start writing some TypeScript code is to use the online editor available on the official TypeScript website at www.typescriptlang.org/play/.
To work offline, you can download and install the TypeScript compiler. You will need to first install Node.js. You can find Node.js installation instructions on the official website at https://nodejs.org/.
Once you have installed Node.js, run the following command in a console or terminal:
npm install -g typescript
sudo command is required on OS X and Linux operating systems for user credentials and install the package using administrative privileges:
sudo npm install -g typescript
TypeScript files normally have a ‘.ts‘ extension. Create a new file named hello.ts and add the following code to it:
let h : string = "hello";
Now execute the command tsc hello.ts into the directory where you saved the file hello.ts.
tsc hello.ts
The tsc command will compile the hello.ts file and output the JavaScript version of this file.
You will find a file named hello.js in the same directory in which the hello.ts file was located. Now, you know how to compile your TypeScript code into JavaScript.
