TypeScript  

TypeScript: Strong Types and Where to Find Them?

My Journey from C# to TypeScript

Now, here’s where it gets personal: I’ve spent my whole life in the world of C#, living the strongly typed, object-oriented lifestyle. And now, here I am, working with TypeScript, created by the same guy, Anders Hejlsberg. Yes, the very same mastermind behind C#!

What is TypeScript?

TypeScript is a superset of JavaScript. This means that TypeScript builds on JavaScript by adding extra features, such as static typing, to help ensure your code is more reliable. TypeScript files use the .ts extension, and you compile them into JavaScript before running them in the browser or Node.js.

Here’s how a typical conversation between the two might go:

JavaScript: “I can be anything! A number? A string? A flying toaster? Sure!”

TypeScript: “NO. Pick a type, stick to it, and for heaven’s sake, label your variables like a responsible adult.”

Why Use TypeScript?

Now, let's break down why TypeScript is quickly becoming the go-to choice for modern web development.

  1. Type Safety: TypeScript checks your code for errors before you run it. This is helpful if you come from a compiled language background. By catching bugs early in development, it prevents that dreadful moment when things break in production.
  2. Better Editor Support: With TypeScript, you get autocomplete, real-time error highlighting, and refactoring tools. These features make development faster and less error-prone.
  3. Improved Readability: TypeScript enforces clear types, which enhances code readability.
  4. Scalability: TypeScript shines in large projects. Its strict typing helps manage complexity.

How to Install TypeScript?

You can install TypeScript either globally (available on your entire system) or locally (only in one project). Link: typescriptlang

Global installation

npm install -g typescript

Local (project-specific) installation

npm install --save-dev typescript

A local install is preferred in most projects because it ensures consistent TypeScript versions across different environments.

Why npm though?

npm stands for Node Package Manager. It’s a tool that comes with Node.js and is used to download and install packages (like TypeScript)

When you run npm install typescript, npm fetches the TypeScript compiler and adds it to your project.

Does TypeScript Run in the Browser?

No, TypeScript doesn't run directly in the browser. Browsers only understand JavaScript, so you need to compile your TypeScript code to JavaScript using the TypeScript compiler.

But wait, don’t worry! You’re not sitting there manually compiling files every time you hit "save". In most real-world projects, tools like Webpack, Vite, or ts-node-dev are doing the heavy lifting for you behind the scenes. These tools watch your files, compile them automatically, and often even refresh the browser so you can stay in your flow and not worry about hitting a compile button like it’s 1999.

So yes, TypeScript doesn’t run in the browser, but thanks to modern tooling, it sure feels like it does.

TypeScript Accepts JavaScript (But Adds Safety)

You can paste plain JavaScript into a .ts file, and it will work

JavaScript example:

function greet(name) {
  return 'Hello, ' + name;
}

With TypeScript:

function greet(name: string): string {
  return 'Hello, ' + name;
}

This helps prevent mistakes by making the expected input and output types explicit.

Type Checking in Action

let message = 'Hello from TypeScript';
message = 12; // Error: ❌ Type 'number' is not assignable to type 'string'

TypeScript sees that message was originally a string, so assigning a number is not allowed. This is called static type checking.

This would be allowed in JavaScript, but it might cause bugs later.

TypeScript vs JavaScript: Key Differences
 

Feature JavaScript TypeScript
Type checking At runtime At compile-time
Syntax Dynamic and flexible Typed, optional annotations
File extension .js .ts
Editor support Basic Advanced (intellisense)

Implicit typing (TypeScript guesses the type)

TypeScript allows implicit types like "any" because it's designed to be as flexible as JavaScript, especially for gradual adoption. Under the hood, TypeScript compiles down to JavaScript, and since JavaScript is dynamically typed, TypeScript doesn’t force you to be strict unless you choose to be.

let value;
value = 'hello';
value = 42; // Allowed: type is 'any'

But if you explicitly declare a type, TypeScript gets serious about it:

Explicit typing

let value: string;
value = 'hello';
value = 42; // ❌ Error: number is not assignable to string

Primitive Types in TypeScript

These are called primitive types, and they are the most basic data types you’ll work with.

//first.ts

let name: string = 'Alice';
let age: number = 30;
let isActive: boolean = true;
let nothing: null = null;
let notSet: undefined = undefined;

Using the TypeScript Compiler (tsc)

The compiler converts your .ts file into .js.

Compile manually

tsc first.ts

//Or with npx (no global install needed):
npx tsc first.ts

This creates a first.js file in the same directory, containing equivalent JavaScript.

Output

After compiling, first.js looks like this

//first.js

var name = 'Alice';
var age = 30;
var isActive = true;
var nothing = null;
var notSet = undefined;

Common Conventions in TypeScript

Here are a few naming conventions typically followed:

  • Filenames: kebab-case: user-profile.ts
  • Variables/functions: camelCase: getUserInfo()
  • Classes/interfaces: PascalCase: UserProfile, IUser
  • Constants: UPPER_CASE: MAX_COUNT

Consistent naming helps make your code easier to read and maintain.

Conclusion

TypeScript is a typed superset of JavaScript designed to help you write more reliable and understandable code. It adds type safety, improves editor tooling, and reduces bugs, especially in larger applications.

It may take a little adjustment at first, but once you’re familiar with it, TypeScript can save hours of debugging and make working in JavaScript more enjoyable.

Membership not found