First Step towards TypeScript
Ever wondered what is the hype about TypeScript? Well, it is nothing absolutely new. In fact, TypeScript is pretty similar to the good old JavaScript we are accustomed to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
This one-liner from the official website of TypeScript pretty much says what TypeScript (or TS) is all about. TypeScript is statically typed- which means, we can assign data types to variables. This is an awesome feature of TS, that unlike JavaScript, we can sure of the type of the data being actually held in a variable. We can also define the data types a function is to accept as parameters and also what type of data it is to return. This makes debugging the code less of a headache. Since TypeScript is compiled, the compiler will show any errors in the code then and there. And besides a bit of change here and there, TypeScript is just ES6 with added features. So getting started with TypeScript is a breeze if you already are familiar with the basics of JavaScript.
Prerequisites
Before diving right into TypeScript, somewhat familiarity with Object-Oriented Programming Languages might come in handy. While not an absolute need, you will be able to catch up TypeScript quicker if you know how defining data types of variables work.
No worries whatsoever. This post is written for beginners and covers the basic stuff about TypeScript to get you started.
Also, TypeScript download is essentially a Node.js package. So you need to have Node.js pre-installed. If you do not know how to, you can refer to the official Node.js website to do so.
Installing TypeScript
TypeScript can be installed as a Node.js package. Assuming you already have Node.js installed, you also get npm, or Node Package Manager installed as well. You just need to run the command,
npm install typescript -gJust a small explanation of the above command, npm install <package> is used to install a package from the npm registry. The flag -g stands for ‘global’. Globally installed packages can be run from your terminal, irrespective of your current working directory (in simpler terms, it is omnipresent). To check if everything is properly installed, you can run to see if the version is displayed on your screen,
tsc --version
The command for calling the TypeScript compiler into action is tsc. But before we check out the compiler, let us create a simple TypeScript file in the first place.
Creating a simple TypeScript file
TypeScript files end with the extension, yes you guessed it right, “.ts”. So to start with we create a “newAdventure.ts” file in an editor. You can use any editor of your preference.
Let us break down the code.
Step 1: First, we are declaring a variable adventure. This variable as a type of String Array. In TypeScript, we declare variables as,
const/let/var <variable_name> : <data-type>TypeScript has lots of data types to use. While we cannot cover everything in this post, I will leave a link to know more about types in the “Further Ahead” section.
Step 2: We now define a function named randomAdventureGenerator. The declaration of this function follows the way of ES6 Arrow Functions. Do not worry if you don’t understand it. I plan to cover arrow functions in a future post. For now, the “Further Ahead” section will have a link to understand arrow functions and how to use them.
Our function here uses the built-in Math object to create a random number in the range of 0 to 4. And it simply prints the value present at the index of the newly generated number in our adventure array.
Step 3: The last step is to call our function. We invoke the function by function_name() which in our case will be randomAdventureGenerator().
Compiling and Running our Code
The final thing to before we can execute our code is to compile it. We call the TypeScript compiler to compile our TypeScript code in plain JavaScript, which we can then execute. The command to call the TypeScript compiler is,
tsc <optional_file_names.ts>If you do not mention a filename, tsc will compile all the typescript files (provided you have a valid tsconfig file present) in the present directory and in all sub-directories and convert them into JavaScript. You can make tsc compile specific files by mentioning their file names. The compiler saves the new JavaScript files in the same location as their corresponding TS files.
Once our code is compiled, we can use Node.js to run our code. Type in node new adventure to execute our file.
Conclusion
So, we have successfully written, compiled and executed our first TypeScript code. To summarise the basics of TypeScript,
- TypeScript has static typing support. You can define the data types of variables.
- TypeScript is compiled, so you get all errors if any listed during the compilation itself.
- TypeScript is JavaScript ES6 plus features, so you do not have to worry about learning an entirely new language if you know JavaScript.
- TypeScript compiles down to JavaScript, so it can be run by browsers as well. Any platform that can execute JavaScript can be made to execute compiled TypeScript as well.
TypeScript has lots of features. I plan to cover TypeScript as a language for backend in the upcoming weeks. Stay tuned, stay safe. Peace out.
Further Ahead
If you wish to explore TypeScript yourself, here are a couple of resources you might find useful.
