💪 TypeScript w/ 코딩앙마

Summary

배경

동적 언어인 JavaScript는 run time에 type이 결정되어 오류가 발견되면 사용자가 볼 수 있게 된다.
Java나 TypeScript같은 정적 언어는 compile time에 type이 결정되기 때문에 code 짤 때는 시간이 오래 걸려도 오류가 사용자에게 보이는 걸 막을 수 있다.

TypeScript는 JavaScript의 type을 명확하게 하는 언어이다.
JavaScript는 dynamic typing이 가능해서 자유도와 유연성이 높은데, 이는 project가 클수록 부정적인 효과가 크다.
이때 TypeScript는 JavaScript와 달리 유연성을 허용하지 않고 error로 잡아준다.
덕분에 error message가 더 명확하다.

1. Types

string, number, boolean, array

let 글자 : string = "sentence"
let 나이 : number = 30;
let 성인여부 : boolean = true;
let 배열1 : number[] = [1, 2, 3];
let 배열2 : Array<number> = [1, 2, 3];
let 일주일1 : string[] = ["mon", "tue", "wed"];
let 일주일2 : Array<string> = ["mon", "tue", "wed"];

tuple

배열 요소의 type이 다를 때 사용한다.

let 배열 : [string, number]; // 첫 번째 요소는 문자, 두 번째 요소는 숫자
배열[1].toLowerCase(); // 숫자 type엔 없는 method이므로 error 발생

void, never

void는 함수에서 아무것도 반환하지 않을 때 사용한다.

function sayHello() : void {
    console.log("Hello")
}

never는 항상 error를 반환하거나 끝나지 않는 함수에 사용한다.

function showError() : never {
    throw new Error();
}

function inLoop() : never {
    while (true) {
        // loop loop
    }
}

enum

비슷한 값들끼리 묶는다.
type을 enum으로 선언하면 enum에 적은 값만 입력할 수 있다.

enum Os {
    Window = "win",
    Ios = "ios",
    Android = "and"
}

let myOs: Os;
myOs = Os.Window

null, undefined

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

2. Interface

object에는 특정 속성 값에 대한 정보가 없다.
property를 정의해서 객체를 표현할 때 interface를 사용한다.

let user : object;

user = {
    name: "mai",
    age: 30,
}

console.log(user.name) // name에 다음과 같은 error 발생 'Property 'name' does not exist on type 'object'.'

// ↓ interface 사용

interface User {
    name : string;
    age : number;
}

let user : User = {
    name : "mai",
    age : 30,
}

readonly

값에 접근은 가능하지만 수정은 할 수 없다.

interface User {
    name : string;
    age : number;
    readonly birthYear : number;
}

let user : User = {
    name : "mai",
    age : 30,
    birthYear : 2000,
}

user.birthYear = 1990; // birthYear는 readonly이기 때문에 error 발생

문자열 index

interface Score {
    [grade : number] : string; // 이 형식으로 여러 개 입력할 수 있음
}

let studens : Score = {
    1 : "A",
    2 : "B"
}

함수

interface Add {
    (num1 : number, num2 : number) : number;
}

const add : Add = function(x, y) {
    return x + y;
}

add(10, 20);

interface IsAdult {
    (age : number) : boolean;
}

const a : IsAdult = (age) => {
    return age > 19;
}

a(33) // true

class

implements를 사용한다.

interface Car {
    color : string;
    wheels : number;
    start() : void;
}

class Lucid implements Car {
    color;
    wheels = 4;
    constructor(c : string) {
        this.color = c;
    }
    start() {
        console.log("Engine Start");
    }
}

const b = new Lucid("ivory");
console.log(b); // Lucid: { "wheels": 4, "color": "ivory" }
b.start(); // "Engine Start"

확장

extends를 사용한다.
여러 개의 interface를 extends 할 수도 있다.

interface Car {}
interface Toy {}
interface ToyCar extends Car, Toy {}

3. Function

선택적 매개변수

// 🎵 name이 선택적 매개변수임
function hello(name? : string) {
    return `Hello, ${name || "world"}`;
}

const result1 = hello();
const result2 = hello("Mai");

// ↓ 매개변수에 default 값을 주면

function hello(name = "world") {
    return `Hello, ${name}`;
}

const result1 = hello();
const result2 = hello("Mai");

참고로 매개변수가 여러 개일 때, 선택적 매개변수가 필수 매개변수보다 앞에 오면 안 된다. 만약 선택적 매개변수를 먼저 쓰고 싶다면 undefined를 받을 수 있게 적고, 명시적으로 undefined를 전달해야 한다.

function hello(age : number | undefined, name : string) : string {
    if (age !== undefined) {
        return `Hello, ${name}. You are ${age}.`;
    } else {
        return `Hello, ${name}`;
    }
}

console.log(hello(undefined, "Mai"));

나머지 매개변수

function add(...nums : number[]) {
    return nums.reduce((result, num) => result + num, 0);
}

add(1, 2, 3); // 6
add (1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

this 관련

함수의 첫 번째 매개변수 자리에 this를 입력하고 type을 입력한다.

interface User {
    name : string;
}

const Mai : User = {name : "Mai"}

function showName(this : User) {
    console.log(this.name)
}

const a = showName.bind(Mai); // bind로 this를 Mai 객체로 강제
a();

overload

함수 overload로 전달 받은 매개변수의 개수나 type에 따라 다른 동작을 하게 한다.

interface User {
    name : string;
    age : number;
}

function join(name : string, age : string) : string; // 첫 번째 overload 함수
function join(name : string, age : number) : User; // 두 번째 overload 함수
function join(name : string, age : number | string) : User | string {
    if (typeof age === "number") {
        return {
            name,
            age,
        };
    } else {
        return "나이는 숫자로 입력해 주세요.";
    }
}

const mai: User = join("Mai", 30);
const ian : string = join("Ian", "30");

4. Literal Types

type

정해진 string 값을 가진 것을 '문자열 literal type'이라고 한다.
type을 enum처럼 쓸 수 있다.

const userName1 = "Ian";
let userName2 : string = "Mai";

type Job = "police" | "developer" | "scientist";

interface User {
    name : string;
    job : Job;
}

const user : User = {
    name : "Ian",
    job : "developer" // job property는 위에서 선언한 string만 쓸 수 있음
}

interface HighSchoolStudent {
    name : string;
    grade : 1 | 2 | 3; // 1, 2, 3 중에 하나만 입력할 수 있음
}

식별 가능한 union types

interface Car {
    name : "car";
    color : string;
    start() : void;
}

interface Mobile {
    name : "mobile";
    color : string;
    call() : void;
}

function getGift(gift : Car | Mobile) {
    if (gift.name === "car") {
        gift.start();
    } else {
        gift.call();
    }
}

intersection types

교차 type은 여러 개의 type을 하나로 합쳐준다.
union type이 '또는'이라면, 교차 type은 'and'를 의미한다.
그래서 모든 속성을 기입해 주어야 한다.

interface Car {
    name : string;
    start() : void;
}

interface Toy {
    name : string;
    color : string;
    price : number;
}

const ToyCar : Toy & Car = {
    name : "타요",
    start() {},
    color : "blue",
    price : 1000,
};

---

Endnote

🙇 the source of this content

코딩애플 - 타입스크립트 쓰는 이유 & 필수 문법 10분 정리
코딩앙마 - TypeScript 강좌

🔗 related sites

TS Playground