TypeScript Basic Notes

typescript

*Some TypeScript notes for me, myself, and I

Typescript

  • adds types
  • write cleaner code
  • avoid unneccessary error

install

npm install --save-dev typescript

compile .ts to .js

command line: tsc hoge.js

or

command line: tsc hoge.ts --watch or tsc hoge.ts -w // no need to recompile hoge.ts every time file is saved

or

tsc --init // the whole project is managed by typescript which creates a tsconfig.json
tsc // will compile the whole project
tsc --watch // recompile every changed file with save

assigning types

variable + : + type

ex:
let hoge: string;
function hoge(message: string) {
   console.log(message);
}

Core Types

number string boolean

objects

const hoge: object {} // only knows that its an object cant get individual elements in objects (hoge.name)

const hoge: { name: string, age: number } // this can get individual elements

ex:

const person: {
    name: string;
    age: number;
} = {
    name: ‘Max’,
    age: 42,
};
console.log(person.name);

arrays

const hoge: string[] // array of strings

ex:
let favHobbies: string[];
favHobbies = [‘Swimming’, 'Golf'];

tuple - array with fixed length and type

  - const hoge: [number, string]; // but push can be implemented

enum

let favHobbies: string[];
favHobbies = [‘Swimming’, 'Golf'];

enum Role {
    ADMIN,
    READ_ONLY,
    AUTHOR,
}

const person: {
    name: string;
    age: number;
    hobbies: string[];
    role: Role;
} = {
    name: ‘Max’,
    age: 42,
    hobbies: favHobbies,
    role: Role.ADMIN,
};

Union types

  • expect multiple types
  • function hoge(input1: number | string, input2: number | string)

Literal Types

  • union type but is specific value
  • function hoge(input1: ‘Max’| ‘Matt’)

Type Aliases

  • define your own types
  • type Combinable = sting | number; function hoge(input: Combinable)

Function Types

  • defines the return type
  • describe which type of function specifically use somewhere (parameter, callback, variable )
  • function hoge(num: number): number { return num; }
type Combinable = string | number;
type ConversionDescriptor = 'as-number' | 'as-string';

function combine(
    input1: Combinable,
    input2: Combinable,
    resultConversion: ConversionDescriptor
) {
    let result;
    if (
        (typeof input1 === 'number' && typeof input2 === 'number') ||
        resultConversion === 'as-number'
    ) {
        result = +input2 + +input2;
    } else {
        result = input1.toString() + input2.toString();
    }

    return result;
}

const combinedHoges = combine('32', '23', 'as-number');
console.log(combinedHoges);

const combinedAges = combine(34, 43, 'as-number');
console.log(combinedAges);

const combnedNames = combine('Max', 'Anderson', 'as-string');
console.log(combnedNames);

** some tsconfig.json notes

  • "exclude": ["hoge.ts"] // typescript will ignore hoge.ts

  • "node_modules" // ignore node_modules already in default

  • "include": ["hoge.ts"] // typescript will only think hoge.ts is typescript, so will need to add all typescript files

  • compilerOptions

    • "noEmitOnError": true, // will not compile any ts while there is an error