Frontend Engineering | VoidX Academy

7. Basic Types in TypeScript

Defining Your Data

To benefit from TypeScript, you must tell the compiler what type of data your variables are allowed to hold. This is called Type Annotation. We start with the primitive types: strings, numbers, and booleans.

The Primitives

You apply a type to a variable using a colon : followed by the type name.

// Explicit Type Annotations
let firstName: string = "Prince";
let currentLevel: number = 200;
let isEnrolled: boolean = true;

// TypeScript will now actively block illegal assignments
// currentLevel = "Graduated"; // ERROR: Type 'string' is not assignable to type 'number'.

Type Inference

TypeScript is incredibly smart. If you assign a value to a variable immediately when you create it, you do not need to write the explicit type annotation. TypeScript will infer (guess correctly) what the type is and protect it just as strictly.

// We did not write ': string', but TS infers it based on the value "Voidx"
let companyName = "Voidx";

// The protection still works perfectly!
// companyName = 100; // ERROR: Type 'number' is not assignable to type 'string'.

null and undefined

In JavaScript, `null` represents the intentional absence of an object value, while `undefined` means a variable has been declared but not assigned a value. TypeScript treats these as their own specific types.

let emptyValue: null = null;
let notYetAssigned: undefined = undefined;

// Usually, these are used with Union Types (which we cover later)
// let username: string | null = null;

The 'any' Type: The Escape Hatch

The any type completely turns off the TypeScript compiler for that specific variable. It tells TS, "Let me do whatever I want, act like regular JavaScript." You should avoid `any` at all costs. Using it defeats the entire purpose of installing TypeScript.

let chaoticVariable: any = "Hello";
chaoticVariable = 500; // Allowed
chaoticVariable = false; // Allowed

// TS won't even warn you if you call a method that doesn't exist!
chaoticVariable.thisMethodDoesNotExist(); // No TS error, but will crash the browser!

The 'unknown' Type: The Safe Escape Hatch

If you genuinely do not know what type of data is coming (e.g., from a third-party API), use unknown instead of any. While unknown allows you to assign any value to it, it strictly forbids you from performing any operations on it until you explicitly prove what type it is.

let mysteryData: unknown = "I am a string in disguise";

// TS BLOCKS THIS: Object is of type 'unknown'.
// console.log(mysteryData.toUpperCase()); 

// You must 'prove' the type first using a check
if (typeof mysteryData === "string") {
  // Inside this block, TS safely allows string methods
  console.log(mysteryData.toUpperCase());
}

7. Basic Types in TypeScript

Defining Your Data

The Primitives

You apply a type to a variable using a colon : followed by the type name.

// Explicit Type Annotations
let firstName: string = "Prince";
let currentLevel: number = 200;
let isEnrolled: boolean = true;

// TypeScript will now actively block illegal assignments
// currentLevel = "Graduated"; // ERROR: Type 'string' is not assignable to type 'number'.

Type Inference

// We did not write ': string', but TS infers it based on the value "Voidx"
let companyName = "Voidx";

// The protection still works perfectly!
// companyName = 100; // ERROR: Type 'number' is not assignable to type 'string'.

null and undefined

let emptyValue: null = null;
let notYetAssigned: undefined = undefined;

// Usually, these are used with Union Types (which we cover later)
// let username: string | null = null;

The 'any' Type: The Escape Hatch

let chaoticVariable: any = "Hello";
chaoticVariable = 500; // Allowed
chaoticVariable = false; // Allowed

// TS won't even warn you if you call a method that doesn't exist!
chaoticVariable.thisMethodDoesNotExist(); // No TS error, but will crash the browser!

The 'unknown' Type: The Safe Escape Hatch

let mysteryData: unknown = "I am a string in disguise";

// TS BLOCKS THIS: Object is of type 'unknown'.
// console.log(mysteryData.toUpperCase()); 

// You must 'prove' the type first using a check
if (typeof mysteryData === "string") {
  // Inside this block, TS safely allows string methods
  console.log(mysteryData.toUpperCase());
}

7. Basic Types in TypeScript

Defining Your Data

The Primitives

Type Inference

null and undefined

The 'any' Type: The Escape Hatch

The 'unknown' Type: The Safe Escape Hatch

Knowledge Check

7. Basic Types in TypeScript

Defining Your Data

The Primitives

Type Inference

null and undefined

The 'any' Type: The Escape Hatch

The 'unknown' Type: The Safe Escape Hatch

Knowledge Check