타입스크립트란 무엇인가?

안녕하세요!

기깔나는 사람들에서 프론트엔드를 맡고 있는 황인찬 입니다.

오늘 주제는 프론트엔드 언어중 하나인 타입스크립트에 대한 간단한 소개와 배경에 대해 알아보겠습니다.

이번 블로그를 시작으로 타입스크립트란 언어를 계속해서 파헤쳐 보도록 하겠습니다.

---

타입스크립트란?

TypeScript(TS)는 JavaScript(JS)에 Type이 부여된 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다.

TS의 공식문서(https://www.typescriptlang.org/ko/)에 들어가시면 다음과 같은 화면이 처음으로 등장하게 됩니다.

"TypeScript는 타입에 대한 구문이 포함된 JavaScript 이다. 

JavaScript를 기반으로 한 강력한 프로그래밍 언어로 더 나은 툴을 제공한다."

공식문서 첫화면의 일부

 

---

TypeScript(TS)와 JavaScript(JS)

JS에도 string , number 등의 변수의 타입이 존재합니다.

하지만 변수 등을 선언할 때에 명시적으로 구분지어서 선언하지 않습니다.

변수는 let, var 로 상수는 const 로 선언하게 되는데요. 

그 변수는 할당, 초기화 될 때 마다 타입이 정해지게 됩니다.

let chan;
chan = "기깔크루원";		// string
console.log(chan);		// 기깔크루원
chan = 1; 			// number
console.log(chan);		// 1

JS에 타입이 부여된다는 것은 어떤 것을 말하는 걸까요?

JS가 있는데 TS를 사용해야 하는 이유는 무엇일까요?

타입스크립트는 아래의 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다.

 

 

---

에러의 사전방지

어떤 두 숫자를 입력 받으면 값을 더해주는 간단한 계산기 함수를 JS와 TS로 만들어보겠습니다. 

JS

function sum(a, b) {
  return a + b;
}

다음과 같이 간단하게 함수를 만들 수 있고 실행을 하면 아래와 같이 잘 작동 한다고 생각할 수 있습니다.

sum(1,2); // 3

그러나 작성자와 다른 사람이 다음과 같이 함수를 실행한다면 의도치 않은 결과값이 나오는 것을 알 수 있습니다.

sum(1,'2'); // 12

다음과 같은 오류를 방지 하기 위해선..

해당 함수에 조건문을 거는 등의 장치를 추가하여 입력을 막게 하는 로직을 추가로 만들어야 합니다.

코드의 양이 길어지고 여러 함수 등을 거치게 되면 다음과 같은 잘못된 Type으로 인해 예기치 못한 오류를 만날 수 있고, 수정하는데에 힘이 들 수 있습니다.

 

TS

function sum(a: number, b: number) {
  return a + b;
}
sum('1', '2'); // Error: '1'은 number에 할당될 수 없습니다.

함수를 작성하면서 들어오는 변수의 타입을 number로 정해 주었기 때문에 number 외에 값이 들어올 경우 컴파일 과정 중에 에러로 표출되게 됩니다.

다른 로직을 작성하지 않아도 코드 작성자의 의도대로 함수를 사용할 수 있게되어 코드의 품질과 개발 속도가 한층 나아질 수 있게 됩니다.

 

또한!

JS와 달리 변수등에 타입이 미리 정해지기 때문에 해당 타입의 API를 인지할 수 있어서 개발 툴을 더욱 활용(자동완성기능, 가이드 등) 할 수 있습니다.

---

마치며

오늘은 타입스크립트 입문할 때 도움이 될 만한 기본적인 타입스크립트의 소개와 간단한 코드들로 자바스크립트와 어떤 차이가 있는지를 소개했습니다.

다음 블로그에서는 타입스크립트의 기본적인 변수의 타입들의 대해 알아보는 시간을 갖도록 하겠습니다.

감사합니다.

 

---

💡 참고 사항
본 내용은 인프런의 타입스크립트 입문 - 기초부터 실전까지<장기효>의 강의와 공식문서를 토대로 작성되었습니다.

참고자료

🔗 - (인프런) 타입스크립트 입문 - 기초부터 실전까지<장기효>  https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8#

📖 - (타입스크립트 공식문서)

https://www.typescriptlang.org/ko/

 

 

 

 

---