Using TypeScript
The first step to using TypeScript is to install the TypeScript compiler. In the tutorial, we will explain this process in detail. There are two ways to install the compiler, one is to install the command line version and the other is to use Visual Studio. We will use the command line version as this is the most versatile and will allow us to use it in other IDEs and editors.
TypeScript code is saved in files with a .ts extension. For example, we can create TypeScript code in a file called mycode.ts.
mycode.tsThe TypeScript compiler will generate JavaScript code from this file and save it in a file with a .js extension. During code compilation, any syntax errors are displayed to the programmer. For example, the above TypeScript code will be compiled into a JavaScript code file named mycode.js.
mycode.jsThis system has an important impact. Your HTML pages must contain generated JavaScript code (not TypeScript code!) using <script> tags. TypeScript code cannot be placed directly in HTML files. Although it may seem restrictive, placing code and HTML markup in separate files is actually good web development practice. On large projects, different people will work on different files, including individual CSS files. In addition, other JavaScript frameworks will be imported from local installations or other websites.
Installation and compilation of TypeScript
Install typescript using the npm utility installed along with the Node.js package. When you launch the command line, you can install Typescript using:
npm install -g typescriptWhen you type this command, the software is downloaded from the Internet and installed for all users on the computer (this is the meaning of the -g option). Depending on how your computer is configured, you may need to launch an administrator-mode command window to perform this operation. Various messages will flash on the screen, and there should be no error messages. Please note that you need the latest version of Node.js so if your Node is old, maybe installed a year ago, you should delete the current version and install the latest version as shown in the JavaScript section.
We can then compile the typescript program using the command line. For example, assume we have a Typescript program in the file Tut2.ts. We compile this Typescript program by typing:
tsc Tut2.tsIf the compilation is successful, this will generate a file called Tut2 .js which can be loaded directly into the browser using the <script> tag in the HTML file.
NOTE: This is the only module for which you must manually compile the code. This is done automatically when we use various frameworks.
Now we'll walk through a simple example.
1. Create a new directory for this example. In the subdirectory named "src", edit a file named Tut2.ts.
2. Type the following typescript code into the file created in step 1:
let clicked: number = 0;
function doMessage():void {
clicked++;
let msg:string = "Clicked " + clicked + " times.";
document.getElementById("message").innerHTML = msg;
}3. We need an HTML file to test the code. In the root directory, we can create an index.html file using the following code:
<!DOCTYPE html>
<!-- PROG2005 Tutorial 2 -->
<html>
<head>
<title>Tutorial 2</title>
<script type="text/javascript" src="src/Tut2.js"></script>
</head>
<body>
<h1>Tutorial 2</h1>
<button onClick="doMessage()">Click Me!</button>
<p id="message">Not clicked yet.</p>
</body>
</html>Please note that the included script files are JavaScript files with a ".js" extension.
4. We then need to compile the code to generate the JavaScript that is loaded in the HTML file. The following two commands will do the trick.
cd src
tsc Tut2.ts5. If the compilation has no errors, then we have created a new file Tut2.js in the src/ directory. If you encounter syntax errors, you'll need to fix them before continuing.
6. We can then load the web page to check if the application is working properly. If we are using the Node.js server from a JavaScript activity, then we also copy the server.js and server.bat files into the root directory.
