TypeScript 기초 - 개념 정리

 

 

< 목차 >

1. TypeScript
2. TypeScript Project in VSCode
3. Types in TypeScript

 

 

1. TypeScript ?? 

TypeScript는 JavaScript에 타입을 부여한 언어이다. 쉽게 말해, JavaScript의 확장된 언어라고 볼 수 있다. 그렇다면, TypeScript를 쓰는 이유는 무엇일까? TypeScript를 사용해서 개발을 할 경우, 에러를 사전에 방지할 수 있다는 점과 코드 가이드 및 자동완성을 통해 JavaScript 코드의 품질과 개발 생산성을 높일 수 있다는 점에서 장점을 갖는다.

 

TypeScript를 사용할 경우 에러를 사전에 방지할 수 있다는 말의 의미를 다시한번 되새겨 보도록 하자. JavaScript에서는 코드가 실행되고 나서야 에러를 확인할 수 있다. 우리가 작성한 코드에 문제가 있을 경우 코드가 실행된 이후에 문제를 발견할 수 있다는 뜻이다. 이렇게 코드가 실행될 때 발생하는 에러를 "런타임 에러"라고 한다. 그리고 이러한 런타임 에러를 마주하는 것은 실제 사용자가 된다. 개발자 입장에서는 코드가 실행되기 이전에 에러를 잡아주고 싶은 것이 당연할 것이다. TypeScript를 사용하면 코드가 실행되기 이전에 에러를 발견해서 코드를 수정할 수 있게 된다. 다시말해, TypeScript는 개발자를 도와주는 보호장치 같은 존재라고 할 수 있다.

 

TypeScript는 프로그래밍 언어이다. 공식 홈페이지에서는 TypeScript를 강타입 프로그래밍 언어라고 소개하고 있다. C#, Java, GO, RUST 와 같은 언어를 사용해 본 사람들은 프로그래밍 언어라는 말을 듣고 컴파일러를 떠올릴 것이다. 방금 언급한 언어들은 코드를 다 작성하고 나면 해당 코드를 컴파일해서 0과 1로 이루어진, 컴퓨터가 알아들을 수 있는 언어로 바꿔주는 과정을 거치게 된다. 하지만 TypeScript의 경우에는 작성한 코드가 JavaScript로 변환된다. TypeScript에서의 컴파일은 그저 TypeScript로 작성된 코드를 일반 JavaScript 코드로 바꿔주는 것이다. JavaScript로 변환하는 이유는 브라우저가 이해할 수 있는 것은 TypeScript가 아니라 JavaScript로 작성된 코드이기 때문이다. 

 

TypeScript가 제공하는 보호장치는 TypeScript 코드가 JavaScript로 변환되기 이전에 발생한다. TypeScript가 먼저 작성된 코드를 확인한 다음 변환된 JavaScript 안에서 에러가 발생하지 않게끔 확인하는 작업을 진행해준다고 생각하면 된다. TypeScript로 코드를 작성한 후에 컴파일을 하면 일반적인 JavaScript 코드가 된다. 하지만 컴파일에 들어가기에 앞서 작성된 TypeScript 코드에 에러가 있으면 그 코드는 JavaScript로 컴파일 되지 않는다. TypeScript에서 우선적으로 에러가 발생할 것 같은 코드를 감지해서 컴파일 되지 않게끔 하는 일종의 보호장치로서 기능하는 것이다. TypeScript의 이러한 보호장치는 런타임에서 발생하는 것이 아니기 때문에 개발자에게 있어서는 사전에 에러를 감지해서 수정할 수 있다는 이점을 제공받을 수 있다. 즉, TypeScript가 성공적으로 컴파일돼서 JavaScript 코드를 반환한다면 코드가 제대로 작성된 것이고 데이터 타입에도 전혀 문제가 없었다는 의미가 된다. 한마디로 변환된 JavaScript 코드에 버그가 없다는 뜻이 되는 것이다.

 

 

 

2. TypeScript Project in VSCode 

우선 아래의 명령어를 통해 VSCode 에디터에서 TypeScript를 설치해주도록 하자.

npm install -D typescript

설치를 완료한 뒤 다음의 명령어를 통해 제대로 설치가 되었는지 확인해 볼 수 있다.

tsc --version

설치된 Typescript 버전이 나온다면 제대로 설치가 완료된 것이다. 

마지막으로 아래의 명령어를 입력하면 tsconfig.json 파일이 생성된다. tsconfig.json 파일은 TypeScript 설정파일로 해당 파일을 통해 TypeScript의 설정값을 조작할 수 있다. ( tsc --init 명령어 없이 직접 tsconfig.json 파일을 생성해도 무방하다. )

tsc --init

 

tsconfig.json 파일에 대한 내용은 추후에 자세히 알아보도록 하고 우선 TypeScript에서 제공하는 타입들에 대해 먼저 알아보도록 하자.

 

 

 

3. Types in TypeScript 

TypeScript에서는 아래와 같은 방식으로 변수에 타입을 지정해주게 된다. 

 

변수명 : 타입 = 초기값

 

가장 기본적인 타입으로는 true/false 값의 boolean , number , string , undefined , null 등이 있다. 

👉 Basic types 

let a : number = 1;
let b : string = "hello";
let c : boolean = true;
let numArr : number[] = [1, 2, 3];
let d : undefined = undefined;
let e : null = null;

 

numArr 변수를 살펴보면 number[ ] 와 같은 형태로 타입이 지정되어 있는 것을 확인할 수 있는데 이는 number type으로 이루어진 배열을 의미한다. number[ ] 타입의 배열 안에 number 타입이 아닌 요소가 포함되면 에러가 발생하게 된다.

 

👉 Optional types 

TypeScript에서 객체의 타입을 지정할 때는 객체 안에 있는 속성들의 타입을 일일이 지정해줘야만 한다. 그리고 타입이 지정된 속성들의 경우 객체가 반드시 해당 속성을 포함하고 있어야만 한다. 하지만 객체를 생성할 때 특정 속성의 포함여부가 불확실한 경우가 존재할 수도 있다. 이 때 option 형태로 객체의 속성 타입을 지정해줄 수 있다.

const player: {
    name: string,
    age?: number
} = {
    name: "bitkunst"
}
// name 속성은 필수, age 속성은 옵션

객체의 타입을 지정해 줄 때 위와 같이 속성명? : 타입 형태로 지정할 경우 해당 속성은 옵션값이 되어 객체가 해당 속성을 포함하고 있지 않을지라도 에러가 발생하지 않는다. 

 

👉 type Alias 

TypeScript에서는 별칭 타입을 사용할 수 있다. 다음과 같이 Player 라는 사용자 지정 타입을 만들어 놓고 필요할 때마다 재사용이 가능하게끔 할 수 있다.

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

const user: Player = {
    name: 'bitkunst',
    age: 20
}

 

👉 tuple 

TypeScript에는 tuple이라는 개념이 존재한다. Tuple은 배열을 생성할 수 있게 하는데, 최소한의 길이를 가져야 하고 특정 위치에 특정 타입이 있어야만 한다. Tuple을 사용하면 항상 정해진 개수의 요소를 가져야만 하는 배열을 지정할 수 있다. 또한 지정된 순서에 맞는 타입을 가져야만 한다. 

const player: [string, number, boolean] = ["bitkunst", 20, true]

 

👉 any 

let a : any[] = [1, true, "hi"]

any는 TypeScript로부터 빠져나오고 싶을 때 쓰는 타입이다. TypeScript의 보호장치들로부터 빠져나오고 싶다면 any를 사용하면 된다. any는 TypeScript의 모든 보호장치를 비활성화 시킨다. 즉, any라는 말 뜻 그대로 아무 타입이나 될 수 있다. 무분별하게 any를 사용할 경우 TypeScript를 사용하는 의미가 퇴색되어 버릴 수 있다. 따라서 TypeScript 설정에서 any의 무분별한 사용을 막기 위해 추가할 수 있는 규칙들이 존재한다.

 

👉 unknown

let a : unknown

TypeScript에서의 핵심은 Type Checker와 소통하는 것이다. 그렇다면, 어떤 타입인지 모르는 변수의 경우 TypeScript에게 어떻게 알려줘야 할까?? 예를 들어 API로부터 응답을 받았는데 응답 받은 결과물의 타입을 모르는 상황이 발생할 수 있다. 이럴 경우 "unknown"이라는 타입을 사용할 수 있다. 즉, 변수의 타입을 미리 알고 있지 못할 때 unknown을 사용한다. 주의할 점은 unknown 타입을 사용할 경우 아래와 같이 해당 변수의 타입을 확인하는 작업을 거치면서 코드를 작성해줘야 한다.

if (typeof a === 'number') {
    let b = a + 1;
}

 

👉 void 

void는 "비어 있는 것"을 의미한다. TypeScript에서는 함수를 정의할 때 매개변수의 타입과 return값의 타입을 지정해주게 된다. 이 때 아무것도 return 하지 않는 함수를 대상으로 void를 사용한다. 

function hello() : void {
    console.log('hi')
}

function 함수명( ) : return타입 { } 과 같은 형식으로 함수를 정의하게 되는데 보통의 경우 void를 따로 지정해줄 필요는 없다. TypeScript에서 해당 함수가 아무것도 return 하지 않는다는 것을 자동으로 인식해서 void 를 부여한다.