원본 영상

개발환경 구성

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')

원본 영상

타입스크립트의 필요성

자바스크립트의 타입(자료형)은 크게 원시타입과 객체타입으로 구분됩니다.

Primitive Type

• number
• boolean
• string
• null
• undefined
• symbol – ES6
• void – null, undefined

Object Type

• function
• array
• class

자바스크립트는 타입의 제한이 느슨한 언어로, 자바스크립트에서 선언한 변수에는 어떤 타입의 값도 들어갈 수 있습니다. (동적 타입)

이는 프로그램의 유연성은 보장 하지만, 예측 가능하고 안전한 코드를 구현하기는 어렵게 됩니다.

타입스크립트

타입스크립트는 자바스크립트의 슈퍼셋 언어로서, 기존 자바스크립트에 Type System을 적용한 것입니다.

타입스크립트는 정적 타입을 지원하므로, 변수의 정의와 함께 대입할 타입의 값을 지정합니다.

함수의 패러미터, 반환값에는 지정된 타입의 값만 대입할 수 있습니다. 그렇지 않으면 컴파일 시점에 에러를 발생합니다.

타입 추론(Type Inference)

타입 추론이란, 정적으로 타입을 명시하지 않고 대입하는 값을 통해 타입을 유추해 결정하는 것입니다.

let name = 'Kim' // 처음 가진 값이 string

name 이라는 변수는 string 타입이 됩니다. 이 변수는 이후의 코드에서도 계속 string 타입만 담을 수 있습니다.

let name // 처음에 값을 대입 하지 않음
name = 'Kim'

name 이라는 변수는 any 타입이 되어 자바스크립트 처럼 어떠한 타입도 담을 수 있는 변수가 됩니다.

이 경우 컴파일 시점에 해당 변수에 대한 타입 검사를 실행하지 않는다고 합니다.

처음부터 변수가 any 타입이라고 선언할 수도 있습니다.

let name: any