타입스크립트가 뭐죠?

만식이형·2023년 6월 2일

TypeScript

목록 보기

1/2

이 포스팅은 타스린이인 제가 타입스크립트 공부를 위해 정리하는 것입니다. 당연히 내용은 부실할 수 있어요. 😄

타입스크립트 정리를 위해 저는 코딩 고수님들의 유튜브 채널들과 타입스크립트 페이지를참고했어요.
- 코딩애플님 : https://youtu.be/xkpcNolC270
- 코딩앙마님 : https://youtu.be/5oGAkQsGWkc

타입스크립트 홈 : 타입스크립트

1. 타입스크립트가 뭐죠?

타입스크립트가 무엇인지 이해하기 위해선 자바스크립트의 특징을 알고 있어야 한다.

1.1 자바스크립트 동적 타입의 장단점

var a = 10 - 5; // 5
var b = 10 - '5'; // 5
var c = '10'-5;

자바스크립트로 위와 같이 코딩해보면, 개발자가 별도로 타입을 지정하지 않았음에도 자바스크립트 엔진이 모두 정상적 연산 처리를 해준다. 이는 자바스크립트가 동적 타이핑"(dynamic typing)을 지원하는 프로그래밍 언어이기 때문이다.

다른 정적 타입 언어(예: C++, Java)에서는 변수를 선언할 때 해당 변수가 어떤 데이터 타입을 가지는지 명시적으로 선언해야 한다. 그러나 자바스크립트에서는 변수를 선언할 때 타입을 명시하지 않아도 되며, 실행 중에 변수에 할당되는 값에 따라 자동으로 타입이 결정된다.

let message = "Hello, world!";
console.log(typeof message);  // 출력: "string"

message = 10;
console.log(typeof message);  // 출력: "number"

이러한 동적 타이핑에는 장단점이 있다.

장점 : 동적타이핑은 자바스크립트를 유연하고 편리하게 만들어주는 특징 중 하나이다. 이를 통해 개발자는 데이터 타입을 명시적으로 선언하지 않고도 자유롭게 변수를 사용할 수 있다.
단점 : 의도하지 않은 동작이 발생할 수도 있다. 따라서 자바스크립트 개발자는 변수의 타입을 주의깊게 관리해야 한다.

소규모 프로젝트에서는 동적타이핑이 문제가 되지 않을 수 있지만, 프로젝트 규모가 커질 수록 수 많은 변수의 동적인 타입을 세심하게 관리하는 것은 결코 쉬운 일은 아닐 것이다.

1.2 타입스크립트(TypeScript)

타입스크립트는 위에서 살펴본 자바스크립트의 동적 타이핑이 가지는 단점을 극복하기 위해 도입되었다. 쉽게 말하면 동적인 타이핑을 보다 엄격하게 정적인 타입으로 지정하여 어플리케이션의 오작동이나 에러를 줄이는 것이다.

타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어이다. 자바스크립트에 정적 타입을 추가한 것으로, JavaScript의 확장된 버전이라고 볼 수 있습니다. 타입스크립트는 자바스크립트 코드와 거의 동일한 구문을 사용하며, 자바스크립트 런타임 환경에서 실행될 수 있습니다.

자바스크립트는 파일명이 xxx.js 인 반면 타입스크립트는 xxx.ts이다. 하지만 브라우저는 직접적으로 ts 파일을 인식하지 못하고 js 파일만 인식하고 실행할 수 있다. 이는 타입스크립트가 자바스크립트로 컴파일되어야만 브라우저에서 실행될 수 있음을 의미한다. ts 파일이 타입스크립트 컴파일러를 거쳐 컴파일되면 js 파일로 변환된다.

아래는 간단한 자바스크립트와 타입스크립트 비교 예시이다.

// test.js
function add(num1, num2) {
  console.log(num1 + num2);
}
add();  // NaN
add(1); // NaN
add(1, 2); // 3
add(3,4,5); // 7
add("Hello", " World"); // Hello World

자바스크립트로 위와 같이 코딩하면 콘솔창에 NaN, 3, 7 등이 출력이 된다.

만약 동일한 코드를 ts 파일로 저장한다면?

위의 이미지에서 보듯이 add(), add(1) 등에 빨간 밑줄이 생기는데 콘솔창에 NaN이 표시되지 않는다. 밑줄이 뜬 자리에 마우스오버를 하면

이런 식으로 에러 내용을 표시해주기 때문에 개발자가 코딩하는 시간에 에러를 바로 확인하고 수정할 수 있다. 그래서 위의 코드를 타입스크립트 형식으로 바꾸면

function add(num1: number, num2: number) :number {
 return num1 + num2;
}
let newNum: number = add(1, 2);
console.log(newNum);

이렇게 사용할 변수의 타입을 명시적으로 지정을 해주고, 만약 return할 것이 있으면 함수의 () 뒤에도 타입을 지정해준다.

이처럼 타입스크립트는 정적 타입 검사를 수행하여 개발자가 코드를 작성하는 과정에서 발생할 수 있는 오류를 사전에 탐지할 수 있다. 정적 타입 검사는 변수, 매개변수, 함수 반환 값 등의 타입을 명시적으로 선언하고, 이에 따라 타입 체크를 수행하여 잠재적인 오류를 찾아낸다.