Jul 1, 2021
Compiler Convince
When I decided to jump into TypeScript the first thing that struck me as an unknown was the compiler. Simply put, the compiler is a program that translates between two programming languages. With TypeScript this is important specifically because the browser itself, is unable to read the TypeScript language, therefore the compiler is needed to turn the TypeScript(source language) into browser friendly JavaScript(target language).
Assuming that you have your local environment setup for programming(text editor, terminal access, ect…) setting up the compiler itself only requires two steps.
- Make sure that you have Node.js installed(available at “https://nodejs.org”)
2. Run the command: “npm install -g typescript” in your terminal
Now that TypeScript has been installed, opening my favorite text editor(VS Code) and setting up a basic file structure(terminal commands “touch index.js”, “touch index.html”, and “touch styles.css”) would look something like this: have a JavaScript file, HTML file, and a CSS file.
We want to add a Typescript that the compiler will translate to JavaScript, for simplicity in this example, the name of our TypeScript and JavaScript files will both be “index” to add create the TypeScript “index’ file, enter the terminal command “touch index.ts”
Right now all of our files are blank so let’s add some basic test content in our ‘index.ts’ file.
Time to compile- in the terminal we now run the command “tsc index.ts” and when we look at our ‘index.js’ file we can see that it has been populated with the same code that we have in the ‘index.ts’ file.
The compiler has done it’s job! Although they look similar, the JS code is browser friendly while the TS code allows us to program in TypeScript. As the programming gets more specific to TypeScript, the difference that the two files have will become much more apparent. Thanks the compiler, our code will be translated to JavaScript and digestible to most modern browsers.
