Typescript Essentials pt. 1

Prerequisites:

• Node.js installed (version 14 or higher)
• Basic knowledge of JavaScript

Introduction

TypeScript is a statically-typed superset of JavaScript that adds optional type annotations and compiles to plain JavaScript, enabling developers to catch errors at compile-time rather than runtime.

info

TypeScript is called a superset of JavaScript because every valid JavaScript program is also a valid TypeScript program, but TypeScript adds additional features (like types) on top of JavaScript's existing syntax.

function add(a: number, b: number): number {
    return a + b;
}

const goodExample = add(5, 5);
const badExample = add("5", 5); // will give an error

What'll you learn

By the end of this tutorial, you’ll be able to:

• Understand what TypeScript is and why it’s a superset of JavaScript
• Install and use the TypeScript compiler (tsc) to turn .ts files into plain JavaScript
• Set up and run TypeScript files directly with tsx, including watch mode for rapid iteration
• Declare variables with basic built-in types (number, string, boolean, null, undefined)
• Leverage TypeScript’s type inference to avoid redundant annotations
• Annotate function parameters and return values for safer APIs
• Recognize when (and when not) to use the any type to preserve type-safety
• Apply these essentials in a real project so you catch errors at compile-time rather than in production

Your First TypeScript code

Follow these steps to create your first TypeScript code.

1

Installing TypeScript

Open your Terminal and install TypeScript.

Terminal

npm install -g typescript

2

First TypeScript Code

After you installed it, create a file named index.ts (this can be any name you want). Add the following code:

index.ts

let message: string;
message = "Hello World!";
console.log(message);

3

Compile to JavaScript

Compile the TypeScript file to Javascript using tsc index.ts

As you'll see a new index.js file is compiled.

index.ts

index.js

index.js

let message;
message = "Hello World!";
console.log(message);

More elegant set-up with tsx

tsx is a minimal command-line tool that runs TypeScript files directly. It compiles code in memory using an optimized compiler and launches it with Node.js, removing the need for a separate build step.

tsx works out of the box with sensible defaults. A custom tsconfig.json can be added at the project root to override those defaults.

1

Install tsx

Add tsx as a development dependency.

npmyarn

npm install --save-dev tsx

2

Run the TypeScript file

Execute it without a prior build step.

Terminal

npx tsx index.ts

3

Enable watch mode

Automatically restart on file changes.

Terminal

npx tsx --watch index.ts

info

Watch mode monitors for changes and restarts the process automatically.

4

Define npm scripts

Simplify usage by adding scripts to package.json.

Run npm run dev for rapid iteration.

index.ts

package.json

package.json

{
  "scripts": {
    "dev": "tsx --watch index.ts",
    "start": "tsx index.ts"
  }
}

Introduction to TypeScript Types

A list of essential TypeScript types:

• number – Represents numeric values, both integers and decimals (e.g. 42, 3.14).
• string – Text data enclosed in single or double quotes (e.g. "Hello, world!").
• boolean – Logical values: true or false.
• null – An explicit “empty” or “no value” assignment.
• undefined – The default value of a declared but uninitialized variable.
• any – Disables type checking, allowing any value.
• void – Indicates the absence of a value, typically used as a function return type when nothing is returned.
• Array<T> (or T[], e.g. number[], string[]) – A list of values all of the same type T.
• object – A non-primitive type; any value that isn’t number, string, boolean, null, or undefined.

Type assignment

You can explicitly declare a variable’s type using a colon:

let userName: string
userName = "Alice"

Now userName must always hold a string. If you try userName = 123, TypeScript will flag an error before you run the code.

Avoid redundant annotations when the initializer already makes the type clear.

let userName: string = "George"

let userName = "George"

Type inference

When you initialize a variable without an explicit type, TypeScript infers it from the value:

let userAge = 38

Here userAge is inferred as number. Later assignments must match that inferred type:

userAge = 40       // OK
userAge = "forty"  // Error: Type 'string' is not assignable to type 'number'

Typing Function Parameters and Return Values

Always annotate each parameter. A default value lets TypeScript infer that parameter’s type. The return type is inferred from what you return.

function add(a: number, b: number = 5) {
  return a + b
}
const sum = add(10, 20)

• a must be a number
• b defaults to 5, so it’s a number
• sum is inferred as number

info

You can add an explicit return type (: number) after the parameters if you want extra clarity, but it’s optional when inference is clear.

The any Type

The any type turns off all type checking for a variable. Use it only when you genuinely cannot know a value’s type ahead of time:

let data: any = 36
data = "now a string"
data = false
data = {}
data = []

warning

Overusing any negates TypeScript’s safety benefits, making your code behave like plain JavaScript.

• Use any only when absolutely necessary.
• Narrow any to a more specific type as soon as you understand the data.
• Document why any was required in that context.

Conclusion

With TypeScript installed globally and tsx introduced for direct execution and watch-mode compilation, you have elevated a plain JavaScript workflow into a statically typed environment that detects errors before they reach production.