Typescript

프로젝트에서 사용하는 또 다른 기술스택 중 하나인 Typescript를 공부하기 시작했다. 우선 가장 기본이 되는 걸 정리하면서 시작하면 좋을 것 같다.

사용이유

Typescript를 사용하는 이유는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이다. 이게 가장 크기 때문에 사용을 한다. Javascript에서는 발견하지 못하고 console.log를 찍어가며 확인을 하지만 Typescirpt는 그렇게 하지 않아도 된다.

사용방법

사용방법은 간단하다. .ts파일을 만들어서 사용하면 된다. 그러면 Typescript 형식의 파일이 만들어진다. 그리고 터미널에서

tsc <컴파일 할 파일.ts>

를 입력하여 .js파일로 컴파일 한 후 사용할 수 있다. 그러면 아래와 같은 코드를 사용할 수 있다.

코드

const add = (num1: number, num2: number) => {
    return num1 + num2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

주의깊게 볼 부분은 매개변수 부분이다. num1과 num2에 number라는 타입을 확실하게 줘서 number 타입 이외의 값이 들어오면 오류가 나온다.

사진과 같이 number1이 string 타입일 경우 컴파일 에러가 나타난다.

상수/변수 선언방식

Typescript에서는 상수와 변수에 따라 타입을 선업하는 방식이 다르다. const는 상수를 등록하기 때문에 타입이 따로 존재하지 않는다.

사진처럼 const number1은 그냥 5이다. 만약 변수 let을 이용하면 어떨까.

let number1은 타입이 number로 형성이 되었다. 상수와 변수의 차이를 분명하게 알고 타입을 선언할 필요가 있다. 변수를 생성하고 나중에 값이 들어올 때는 미리 타입을 선언해주면 된다.

이 사진과 같이 number1에 타입을 number로 설정하고 나중에 값이 들어올 때 string 타입으로 들어오면 에러가 나온다. 항상 에러 상태일 경우에는 컴파일을 할 수가 없고, 컴파일을 할 수 없으면 app이 작동을 할 수 없기 때문에 작동하기 전에 에러를 알 수 있게 해주는 좋은 언어다.

정리하기

오늘도 간단하게 Typescipt에 대해 기초지식을 쌓았다. 들어보고 눈으로 봤지만 직접 해보는 건 늘 다르기 때문에 이번에도 직접 해봄으로써 조금 더 성장할 수 있었다.

Typescript의 장점은 결국 컴파일을 하기 전에 에러를 알 수 있다는 점과 협업을 할 때 타입을 맞출 수 있다는 점이다. 그렇기 때문에 미리미리 잘 숙지하고 프로젝트에 발 맞춰 갈 수 있게 노력해야겠다.