Basic of TypeScript

If you want to know about TypeScript? First you should know about JavaScript’s tricky feature.

JavaScript is not type safe language, so ["hello"]+{world:12} will be run in Javascript.

GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

const age: number = 24
const weather: string = "cloudy"
const answers: boolean[] = [true, false, true, true]

// name is required, flavor is optional
const icecream: { name: string, flavor?: string}
 = { name: "Bingbong", flavor: "strawberry" }

TypeScript complied to JavaScript code using TypeScript compilier(tsc).

This mean you can use both TypeScript and JavaScript in the same project.

But readonly class property in TypeScript will not be readonly in JavaScript, so readonly from TypeScript is not compile to JavaScript.

Type Definition

Type Definition file(.d.ts) is a TS file with comments that explains to TS the types of JS code.

If you want to create a new name for a type, use Type aliases.

type Person = {
  name: string;
  age: number;
};
 
function printPerson(person: Person) {
  console.log("I'm " + person.name + "and " + person.age + " years old");
}
 
printPerson({ name: "yeslee", age: 24 });

Inside of tsconfig.json

{
  "include": ["src/**/*.ts"],
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES6",
    "lib": ["ES6"],
    "strict": true,
    "module": "CommonJS"
  }
}

include property tells TS where to look for code to compile.

outDir property tells TS where to put the output code.

target property specifies the version of JS we want to compile to the to.

lib property specifies what environment the code is going to run on.

strict property set type checking strongly.

module property specifies module be used to JavaScript file that compiled TypeScript.

TSConfig Reference — Docs on every TSConfig option

Any, unknown

We should not try to use type any as much as possible, because any has any type like string or number, etc.

Before using type unknown , we have to first check with typeof.

Call signature

call signature is the type of the arguments and return value of a function.

call signature does not have the implementation of functions and will not be complied into JavaScript.

And can use the same call signature for multiple functions.

When a function has multiple call signatures, the overloading happen.

When the function should accept different argument types, you can use function overloading.

Interface vs Type

Documentation - Everyday Types

Interfaces can only be used to type an object, Type can be used for any type.

interface Animal {
  name: string;
}

// interface can inherit other interface
interface Bear extends Animal {
  honey: boolean;
}

type Animal = {
  name: string;
}

type Bear = Animal & { 
  honey: boolean;
}

When compiling to TypeScript code, interfaces will disappear.

Generics

Documentation - Type Compatibility

Generics can have multiple types using T, U, V, etc.

It benefits reusable and maintainable for code.

// T, U: generic type parameters
function information<T, U>(x: T, y: U): T & U {
  // ...
};

const name: string = "yeslee";
const age: number = 24;

information(name, age);

Abstract class

Normal class can make an instance of an abstract class, but can’t make an instance of an abstract class.

Abstract class will become a normal class in JavaScript.

@ts-check

//@ts-check tells TS to type check JS files.

We can use JSDoc on any JS file.