Introduction to TypeScript (Part 2)

function printName({first: firstName, second: secondName}) {
console.log("Hello, " + firstName + " " + secondName);
}
printName({first: "Ashok", second: "Khanna"});
function printName({first: string, second: string}) { ... }
function printName({first, second}: {first: string, second: string})

Understanding how the TypeScript Compiler Works

// TypeScript Code:
const x: number = 10;
const y: number = 20;
function add(x: number, y: number): number {
return x + y;
}
// Transpiled JavaScript Code:
const x = 10;
const y = 20;
function add(x, y) {
return x + y;
}
  • Never write anything that would interfere or violate JavaScript syntax
  • Never expect anything more from TypeScript than static type checking. Imagine your code without the type annotations and ensure it is written in a way that it will work without them (fortunately, TypeScript will give you enough errors to remind you of this point, the next section being an insightful example)

Intermediate Topic 1: Type Guarding

if (typeof strs === "object") { ... }
if (typeof strs === "string") { ... }
if (strs && typeof strs === "object") { ... }
function test(object: string | boolean) {
if (typeof object === "string") {
console.log(object.toUpperCase());
} else {
console.log(object);
}
}
if (typeof object === "string" | "boolean") { ... }
if (typeof objet === "fish") { ... }
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
if (isFish(pet)) {
pet.swim();
} else {
pet.fly();
}
function isFish(pet) { return pet.swim !== undefined; }

Intermediate Topic 2: Type Assertions

Type Assertions

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
const x = "hello" as number;
const a = (expression as any) as boolean;
console.log(x!.toFixed());

Rounding it Out: Some Miscallenous Types

  • The object type refers to any value that isn’t a primitive (string, number,
    bigint, boolean, symbol, null, or undefined). This is different from the empty object type{}, and also different from the global type Object. It’s very likely you will never use Object
  • The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value
  • The never type represents values which are never observed. In a return type, this means that the function throws an exception or terminates execution of the program
  • The global type Function describes properties like bind, call, apply, and others present on all function values in JavaScript. It also has the special property that values of type Function can always be called; these calls return any

Next Steps

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashok Khanna

Ashok Khanna

Masters in Quantitative Finance. Writing Computer Science articles and notes on topics that interest me, with a tendency towards writing about Lisp & Swift