AWS & Typescript Masterclass - Typescript recap

September 12th, 2022

100-123

 


 

(103) Types

inferred type

var a = 'hello'    // inferred string

explicit type

var a:string = 'hello'    // explicit string

 

var arr: string[] = []

arr.push('hello')    // ok

arr.push(123)    // nok

 

ANY - last resort

var a:any = 'hello'

a = 3;    //ok

a = true    //ok

 


(104) User defined types

objects have types

functions have types

 

interface

interface Person {

firstName: string,

lastName: string,

}

 

type

type job = string

 

type specificJob = 'Engineer' | 'Programmer'

 

combining types

> found in AWS sdk

type AWSError = Error & {

code: string;

}

 


(105) Optional properties

optional properties

interface Foo {

optProp?: string   // optional

}

 

optional parameters

function foo(optParam?: string) {}

 


(106) Type guards

type info only exists at compile time

runtime is not checked -> type guards

function isPerson(potentialPerson: any): boolean {

return 'firstName' in potentialPerson && 'lastName' in potentialPerson

}

 

if(isPerson(foo)) {

const definitelyPerson: Person = foo

}

 

ref: Typescript: Type Guards

 


(109) Access Modifiers

public    // default

private

protected    // -> classes who extend

 

workaround for private

const privateData = (someClass as any).somePrivateField

 

shorthand fields:

class Server {

private port: number

constructor(port: number) {this.port = port}

}

 

class SameServer {

constructor(private port: number) {this.port = port}

}

 


(110) Inheritance

abstract class BaseServer {

abstract stopServer(): void

}

 

 

class Server extends BaseServer {

stopServer(){}

}

 


(111) Implementing interfaces+

interface IServer {

startServer(): void

}

 

class Server implements IServer {

startServer(){}

}

 


(112) Generics

function returnKeys<T>(arg: T) {

return arg

}

 

function returnKeys<T extends Object>(arg: T) {

return arg

}

 

interface Person<T> {

special: T

}

 

 

 


(114) Modules

import {Bar} from './foo'

import * as Foo from './foo'

 

using paths

without paths

import { Foo } from './data/components/Foo'

with paths

import { Foo } from '@components/Foo'

tsconfig.json (convention is to start with '@')

{

"paths": {

"@components/*": ["data/components/*"]

}

}

 


(115) Strict Checks

tsconfig.json

{

"compilerOptions": {

"noImplicitAny": true,// type must be configured

"noImplicitThis": true, // avoid errors within an anonymous function

"strictNullChecks": true, // forces 'string | undefined' to be unwrapped

"strictPropertyInitialization": true   // require class field to be initialized

"strict": true     // all other checks

}

}

 


(116) undefined, null, never, unknown

you often use undefined and null

you rarely use never and unknown

 

undefined & null are the same as in JS

 

Undefined constants - when it should be defined in the future

let abc = undefined

 

Undefined functions response - when remote call fails

function getDataOverInternet(): string | undefined {}

 

const data = getDataOverInternet()

 

if(data)

const definitelyString: string = data

else

throw new Error('nope')

 

Null - ?? don't use it??

 

Unknown - when you're not sure yet

let input: unknown;

input = someInput

 

if(typeof input === 'string')

const definitelyString: string = input

else

throw new Error('nope')

 

Never - when you throw

function foo(tasks: number) : void | never {

if(tasks > 3)

throw new Error('too many tasks')

}

 

function error() : never {

throw new Error()

}

?? why not void|Error

-> that's Promises / callbacks, Error is not a return type of a direct throw (unless wrapped in Promise / callback)

 


(117) Enums and Switch

enum Foo { A,B,C }

 

Foo.A// = 0

Foo[Foo.A]   // = "A"

 

enum Bar {

A = "aaa",

B = "bbb",

C = "ccc"

}

Foo.A        // = "aaa"

 

const foo: Foo = Foo.A

switch(foo) {

case Foo.A:

break;

case Foo.B:

case Foo.C:

break;

default:

break;

}

 


(118) Running on NodeJS

npm i -D @types/node

 

// Server.ts

import { createServer, IncomingMessage, ServerResponse } from 'http'

 

export class Server {

public startServer(){

createServer(

(req: IncomingMessage, res: ServerResponse)=>{

console.log(`Got request from ${req.headers['user-agent']} for ${req.url}`)

res.write('Hello from TS server!')

res.end()

}

).listen(8080)

console.log('Server started')

}

}

 

// Launcher.ts

import { Server } from "./Server";

 

class Launcher {

private server: Server = new Server();

 

public launchApp(){

this.server.startServer()

}

}

 

new Launcher().launchApp()

 

running with node

tsc

node dist/Launcher.js

 

running with ts-node

npm i -D ts-node

npm i -D typescript

 

ts-node src/Launcher.ts

 

 


(122) Property Decorators

https://www.typescriptlang.org/docs/handbook/decorators.html

add something to existing classes / method / accessor / property / parameter

tsconfig.json

{

"compilerOptions": {

"experimentalDecorators": true

}

}

 

Class properties

class Manager {

@propertyDecorator

someProperty: string

}

 

new Manager().someProperty = 'foo'

// same as without the decorator calling:

propertyDecorator(Manager.prototype, 'someProperty')

 

function propertyDecorator(target: any, key: string) {

let property = target[key]

const getter = () => property

const getter = (newVal: any) => {property = newVal}

Object.defineProperty(target, key, {

get: getter,

set: setter,

configurable: true,

enumerable: true,

})

}

 

Decorator factory (second order function to pass config)

class Manager {

@decoratorWithParameters('foo')

someProperty: string

}

 

function decoratorWithParameters(otherObject:any) {

return (target: any, key: string) => ...

}

 


(123) Method decorators

https://www.typescriptlang.org/docs/handbook/decorators.html

tsconfig.json

{

"compilerOptions": {

"experimentalDecorators": true

}

}

 

Class properties

class Manager {

@methodDecorator

someMethod(){}

}

 

function methodDecorator(target: Object, propertyKey: string, descriptor: PropertyDecorator){

const classname = target.constructor.name

const originalMethod = descriptor.value

descriptor.value = async function(...args: any[]){

const result = await originalMethod.apply(this, args)

return result

}

}