Beginners notes about TypeScript: Part 1

These is a series of notes about TypeScript. In this first part you will learn what is TypeScript, how to install and debug the same.

What is TypeScript?

Programming languages can generally be categorized into two types: dynamically typed and statically typed.

1. Dynamically Typed Languages:

   • In dynamically typed languages like JavaScript and Python, variables do not have fixed types. You can assign any type of value to a variable, and type errors are only detected at runtime.
   • While this provides flexibility, it can also lead to unpredictable behavior and make debugging more difficult since type-related errors are not caught during development.

2. Statically Typed Languages:

   • In statically typed languages like C# and Java, variables are declared with specific types. The type of a variable cannot be changed, and assigning a value of the wrong type will result in a compile-time error. This helps identify errors early, ensuring more robust and maintainable code.

To address the challenges of type safety in JavaScript, Microsoft introduced TypeScript, a programming language built on top of JavaScript.

TypeScript can be thought of as “JavaScript with type checking.” It adds optional static typing to JavaScript, allowing developers to define the types of variables, function parameters, and return values. This enables errors to be caught during development rather than at runtime, improving code predictability and making it easier to debug and maintain.

Benefits of TypeScript

• Static typing
• Code completion
• Refactoring
• Shorthand notations

Installing TypeScript

To install TypeScript, follow these steps:

1. Install Node.js and npm

   • Before installing TypeScript, ensure you have Node.js and the Node Package Manager (npm) installed on your system.
   • You can download Node.js (which includes npm) from the official website.

2. Install TypeScript Globally

   • Run the following command in your terminal or command prompt to install TypeScript globally:

     npm install -g typescript  
     

3. Verify the Installation

   • After installation, check the version of the TypeScript compiler to verify that it’s installed correctly:

     tsc -v  
     

   • This command will display the installed TypeScript version, confirming that the installation was successful.

First Program in TypeScript

Let’s dive into TypeScript by creating a simple app. Follow these steps:

1. Create a Folder

   • Use the command:

     mkdir hello-world  
     

2. Navigate to the Folder

   • Move into the newly created folder:

     cd hello-world  
     

3. Initialize TypeScript

   • Run the following command to create a TypeScript configuration file:

     tsc --init  
     

4. Configuration File (tsconfig.json)

   • After running the above command, a tsconfig.json file will be created in your folder.
   • When you open this file, you’ll notice that most parameters are commented out, and only a few are active. Don’t worry about this for now—we’ll focus on the ones we need.

5. Key Parameters in tsconfig.json
   Here are some important parameters to configure:

   • target:

     • Default: "es2016"
     • Specifies the ECMAScript version to which your TypeScript code will be compiled. For example, es2016, esnext.

   • module:

     • Determines the module system used in the compiled JavaScript code. Common options include "commonjs", "amd", "es2015", and "esnext".

   • rootDir:

     • Specifies the root directory for your TypeScript source files. By default, you can set it to ./src if your source files are placed in a folder named src.

   • outDir:

     • Defines the directory where the compiled JavaScript files will be generated. By default, it’s set to ./dist. Adjust this according to your project structure.

   • removeComments:

     • When set to true, this option removes comments from the compiled JavaScript code.

   • noEmitOnError:

     • When set to true, the compiler will not generate JavaScript files if there are any type-checking errors in your TypeScript code.

6. Write Your First TypeScript Code

   • Create a file named index.ts in your project folder.
   • Add the following code to index.ts:

     let greeting: string = "Hello, world!";  
     console.log(greeting);  
     

7. Compile Your TypeScript Code

   • Run the command:

     tsc  
     

   • This will compile your TypeScript code and generate a JavaScript file in the dist folder named index.js.

8. Run the JavaScript File

   • Use Node.js to execute the generated JavaScript file:

     node dist/index.js  
     

Debugging a TypeScript Application

After successfully creating a simple TypeScript application, let’s explore how to debug it effectively. Follow these steps:

1. Enable Source Maps

• Open your tsconfig.json file.
• Enable the "sourceMap" option by setting it to true:

  "sourceMap": true
  

• This generates .js.map files alongside the compiled .js files. These source map files map your JavaScript code back to the original TypeScript source, allowing debuggers to display the TypeScript code instead of the compiled JavaScript.
• For more details, refer to the TypeScript sourceMap documentation.

2. Create a Debug Configuration (launch.json)

• Open Run and Debug view in your editor (shortcut: Ctrl+Shift+D).
• Select Create a launch.json file from the dropdown or the provided link.
• This will generate a launch.json file inside a .vscode folder in your project directory with default configurations.

3. Customize the Debug Configuration

Update the launch.json file to include the preLaunchTask for TypeScript compilation. Your file should look like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

Explanation of Key Fields:

• type: Specifies the type of debugger. Here, it’s set to node for debugging Node.js applications.
• program: Specifies the entry point for your application, such as index.ts.
• preLaunchTask: Runs the TypeScript compiler (tsc) before starting the debugger.
• outFiles: Points to the compiled JavaScript files for debugging.

4. Debugging the Application

• Click the Run and Debug button in the debug bar or press F5 to start debugging.
• Add breakpoints in your .ts files to pause execution and inspect variables, expressions, and call stacks.

References

TypeScript Handbook, Programming with Mosh, TypeScript Doc, GCore