Basic Types

1. Welcome and Icebreaker:

• Welcome! If you could add one feature to JavaScript, what would it be and why?

2. Outline the Session:

• Today we’ll explore TypeScript’s basic types: number, string, boolean, null, undefined, and any.
• Learning Outcomes: Understand what each basic type represents and how to use them to annotate variables.
• We’ll have examples and a quick exercise.

3. Concept Explanation:

• TypeScript adds static typing to JavaScript. This means we can declare the types of variables, function parameters, and return values.
• number: Represents both integer and floating-point numbers. Example: let age: number = 30;
• string: Represents textual data. Example: let name: string = "Alice";
• boolean: Represents logical values true or false. Example: let isActive: boolean = true;
• null: Represents an intentional absence of an object value. Example: let user: string | null = null;
• undefined: Represents a variable that has been declared but not yet assigned a value. Example: let city: string | undefined;
• any: Represents a dynamic type. Using any opts out of type checking for that variable. Use it sparingly as it defeats the purpose of TypeScript. Example: let dynamicValue: any = "This can be anything"; dynamicValue = 100;

4. Live Coding Demonstration:

// Number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let pi: number = 3.14;

console.log("Numbers:", decimal, hex, binary, octal, pi);

// String
let color: string = "blue";
color = 'red'; // Can use single or double quotes
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;
console.log("Sentence:", sentence);

// Boolean
let isDone: boolean = false;
console.log("Is done?", isDone);

// Null and Undefined
let u: undefined = undefined;
let n: null = null;
console.log("Undefined:", u);
console.log("Null:", n);

// Note: By default, null and undefined are subtypes of all other types.
// That means you can assign null and undefined to something like number.
// However, when using the --strictNullChecks flag, null and undefined are 
// only assignable to any and their respective types (the one exception
// being that undefined is also assignable to void).
let someNumber: number = 10;
// someNumber = null; // Error with strictNullChecks

let nullableName: string | null = "Alice";
nullableName = null;
console.log("Nullable Name:", nullableName);

let undefinedAge: number | undefined;
console.log("Undefined Age:", undefinedAge);

// Any
let notSure: any = 4;
console.log("Not Sure (number):", notSure);
notSure = "maybe a string instead";
console.log("Not Sure (string):", notSure);
notSure = false; // okay, definitely a boolean
console.log("Not Sure (boolean):", notSure);

5. Tasks:

• Short Exercise:
  1. Declare a variable for each of the basic types discussed (number, string, boolean).
  2. Initialize them with appropriate values.
  3. Try reassigning a variable to a value of a different type (e.g., assign a number to a string variable). Observe the TypeScript error.
  4. Declare a variable that can hold either a string or null.
  5. Declare a variable of type any and assign it a number, then a string, then a boolean. Log its value each time.