typescript 제대로 공부하기 1

in Study

typescript 를 SPA 프레임워크에 적용하기위한 공부

제로초의 강의[웹 게임을 만들며 배우는 React에 TypeScript 적용하기] 를 들으면서 중요한 개념을 정리한 문서이다.

topic 🚀

  1. class 문법으로 작성할때 state 표기시, type 선언 주의

  2. const 대신 import ‼

  3. setTimeout 은 무조건 window.setTimeout

class 문법 작성시 state 표기시 type 선언에 주의하자

class Component 작성시 constructor에 state를 this.state로 표기하지 않고 state 선언시 타입 에러가 발생할 수 있다.

import * React from 'react';
import {Component} from 'react';

interface State{
    state: "안녕하세요" | "또 뵙네요" | "안녕히가세요";
    message:string;
}

class GreetClass extens Component<{},State>{
    // 이렇게 선언 시 에러가 발생할 수 있다..!
    state = {
        state:"안녕하세요",
        message:"처음 뵙는 분입니다"
    }

    // -> 이렇게 고치자 ⛏

    state:State = {
        state:"안녕하세요",
        message:"처음 뵙는 분입니다"
    }

}

const 대신 import ‼

export 해올 때, const 말고 import로 써야 interface도 import 해올 수 있다!

import * React from 'react';
import {Component} from 'react';

setTimeout 은 무조건 window.setTimeout

setTimeout은 문서에서 보듯이 NodeJs환경과 window 환경에서 쓰인다. 하지만, 그냥 setTimeout으로 선언해서 쓰면 React가 NodeJS인지 window 환경인지 구분을 하지 못하므로 window.setTimeout 으로 명시해서 써줘야한다.

 function setTimeout<TArgs extends any[]>(callback: (...args: TArgs) => void, ms?: number, ...args: TArgs): NodeJS.Timeout;
        // util.promisify no rest args compability
        // tslint:disable-next-line void-return
        function setTimeout(callback: (args: void) => void, ms?: number): NodeJS.Timeout;
        namespace setTimeout {
            const __promisify__: typeof setTimeoutPromise;
        }