Hyun1008.log

#스터디 #TS

원본 영상

개발환경 구성

sudo npm install -g typescript ts-node

타입스크립트 컴파일러를 사용할 수 있습니다.

tsc --init

tsconfig.json 파일을 생성합니다.

여기에서 tsconfig 파일을 만드는 이유는 컴파일 되기 전의 ts파일과 컴파일 되고 나서의 js 파일을 구분해서 저장하기 위해서입니다.

/src 폴더와 /build 폴더를 만들어줍니다. ts 파일은 /src 폴더에, js 파일은 /build 폴더에 저장되도록 하고자 합니다.

    "rootDir": "./src",    
    "outDir": "./build",     

저장한 후, /src 폴더에서 ts 파일을 생성한 다음 터미널에서 tsc 명령어를 쳐주면, /src 폴더에 있는 ts 파일의 컴파일된 js 파일이 /build 폴더에 생성됩니다.

npm init -y

package.json 파일을 생성합니다.

npm i nodemon concurrently

nodemon과 concurrently 모듈을 설치합니다.

그리고 package.json 에서

//package.json
  "scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  },

이렇게 설정하면 npm start 명령어로 컴파일과 실행이 이루어집니다.

“tsc -w” 는 컴파일 과정을 콘솔에서 확인하겠다는 의미입니다.

//index.ts
console.log('Hello World!');

index.ts 를 저장하고 npm start 명령어를 입력하면 index.js 가 컴파일되고, 콘솔에 헬로월드가 찍히게 됩니다!

JS의 경우 – 클래스

class TodoItem {
    constructor(id, task, complete) {
        this.id = id;
        this.task = task;
        this.complete = complete;
    }

    printDetails() {
        console.log(`${this.id}\t${this.task}\t${this.complete ? '\t(complete)': ''}`)
    }
}

참고: this.complete ? '\t(complete)': ''는, this.complete 값이 true 이면 (complete) 라는 문자열을, 그렇지 않으면 빈 문자열을 반환하겠다는 것입니다.

TS의 경우 – 클래스

같은 클래스입니다.

class TodoItem {
    constructor(public id: number, public task: string, public complete: boolean) {
        this.id = id;
        this.task = task;
        this.complete = complete;
    }

    printDetails(): void { 
        console.log(`${this.id}\t${this.task}\t${this.complete ? '\t(complete)': ''}`)
    }
}

export default TodoItem

public이라고 된 부분은 접근지정자라고 하는데, 이 경우 어디서나 접근 가능한 값이라고 합니다. 참고 링크

TS의 함수

함수를 정의할 때 파라미터와 리턴값에 타입을 지정합니다. (리턴값이 없으면 void 지정)

JS는 가변인자를 통한 함수 호출이 가능했지만, TS는 가변인자를 지원하지 않습니다.

대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현할 수 있습니다.

body 가 없는 추상함수 형태의 자료형이 명시된 코드 와 any type을 받는 코드가 정의되어야 합니다.

function add(fp: string, sp: string): string
function add(fp: number, sp: number): number

function add(fp: any, sp: any): any {
    console.log(fp + sp)
}

add(10, 20)
add('10', '20')