[노마드코더] #2 Overview of TypeScript

How TypeScript Works

TypeScript가 제공하는 보호장치는 JavaScript로 변환되기 전에 작동한다!

 

TypeScript Playground에서 전에 수행했던 코드들을 테스트해보자

TS Playground - An online editor for exploring TypeScript and JavaScript

 

억지로 실행되거나 런타임 에러가 발생했던 코드들이 사전에 방지된다

할당된 값으로 타입을 추론하거나, 명시된 타입으로 오류를 체크한다

이처럼 직접 타입을 명시하는 것이 Implicit Types, 할당된 값으로 타입 추론(Type Inference)하는 것이 Explicit Types인데, 타입 추론이 가능하다면 가급적 Explicit Types 사용을 권장한다!

 

Types of TS

let a: string = "hi";
let b: number = 1;
let c: boolean = true;

let a2: string[] = ["hi", "bye"];
let b2: number[] = [1, 2];
let c2: boolean[] = [true, false];

기본적인 타입으로는 string, number, boolean, 그리고 각 기본 타입의 배열 형태가 있다

 

const player : {
    name: string,
    age?: number
} = {
    name: "joseph"
};

// error
if (player.age < 10){}

// pass
if (player.age && player.age < 10){}

객체의 경우, 데이터 값에 대한 타입을 객체로 작성하고, 매개변수가 옵션인 경우 ?를 붙여준다

* 외부에서 optional parameter에 접근하려면 먼저 해당 값이 존재하는지 체크해줘야 한다

 

type Player = {
    name: string,
    age?: number
};

const player1: Player = {
    name: "player1"
};
const player2: Player = {
    name: "player2",
    age: 12
};

객체 타입뿐만 아니라 반복되는 모든 타입은 type으로 선언(Type Aliases)해주자

 

type Player = {
    name: string,
    age?: number
};

function playerMaker(name: string): Player {
    return {
        name
    };
}

const player = playerMaker("joseph");
player.age = 23;

함수의 경우 매개변수의 타입과 반환값의 타입 지정이 가능하다

 

const playerMaker = (name: string): Player => ({name})

* Arrow Function을 사용하는 경우

---

type Player = {
    readonly name: string,
    age?: number
};

const playerMaker = (name: string): Player => ({name})

const player = playerMaker("joseph");
player.age = 23;

// error
player.name = "yee";

원한다면 요소의 값을 변경할 수 없게 만드는 readonly 속성을 타입에 추가할 수 있다

* JavaScript는 변경가능성(mutability)이 기본값

 

const numbers: readonly number[] = [1, 2, 3, 4];

// pass
numbers.map(e => e += 1);
numbers.filter(e => e === 1);

// error
numbers.push(5);
numbers.pop();
numbers.shift();
numbers.sort();

* readonly 배열에 원본 배열을 수정하려는 메서드 사용도 불가능하다

 

const player: [string, number, boolean] = ["joseph", 23, false];

Tuple은 최소한의 길이를 가지며 특정 위치에 특정 타입이 존재하는 배열을 생성한다

 

let a: undefined = undefined;
let b: null = null;

type Player = {
    // (property) age?: number | undefined
    age?: number
};

null과 undefined 타입은 JavaScript와 동일하며 ?(optional parameter)는 undefined를 포함한다

 

const a: any[] = [1, 2, 3, 4];
const b: any = true;

// pass
a + b;

any 타입은 적용된 부분에 한해서 TypeScript를 비활성화해 JavaScript처럼 사용할 수 있다

* 일반적인 경우 사용을 권장하지 않음

---

let a: unknown;

if (typeof a === "number") {
    let b = a + 1;
}
if (typeof a === "string") {
    let b = a.toUpperCase();
}

API의 응답을 받을 때, 타입이 확실하지 않다면 unknown 타입을 사용하자

* 타입을 문자열로 반환하는 typeof로 타입을 확인하고 작업

 

// function hello(): void
function hello() {
    console.log("hello")
}

return 값이 없는 함수에는 기본적으로 void 타입이 추론된다

 

function hello(): never {
    throw new Error("xxx");
}

function hello2(name: string|number) {
    if (typeof name === "string") {
        // (parameter) name: string
        name;
    } else if (typeof name === "number") {
        // (parameter) name: number
        name;
    } else {
        // (parameter) name: never
        name;
    }
}

예외를 throw하거나 존재할 수 없는 경우에는 never 타입이 추론된다

 

본 내용은 노마드코더의 'Typescript로 블록체인 만들기'를 바탕으로 작성되었습니다.