이 시리즈에서는 타입스크립트에대해 이야기해보려고 합니다. 개인적으로 공부하는 내용으로 유튜브에 코딩앙마 님의 강의를 토대로 글을 작성해보려고합니다.
포스팅에 앞서 타입스크립트 셋팅을 알아보겠습니다.
//타입스크립트가 적용된 리액트 프로젝트
npx create-react-app appname --typescript//이미 생성된 프로젝트에 적용할 때 : 타입스크립트를 다운받고 .js 파일이름을 .tsx로 변경해준다.
npm i typescript기본적으로 브라우저는 타입스크립트를 이해하지 못합니다. 자바스크립트로 컴파일해주는 공정이 필요합니다.
타입스크립트를 사용하는 이유
타입스크립트는 자바스크립트의 단점을 보완해주고, 개발 하는 단계는 크게 3가지로 나눌 수 있다.
- Lint stage : 개발자가 코드를 작성하는 시기
- Compile stage : 작성된 코드를 js 파일로 컴파일하는 시기
- Runtime stage : 컴파일된 코드가 실제로 동작하는 시기
각 단계를 거쳐 어플리케이션이 실행됩니다.
타입스크립트는 크게 2가지 기능을 제공합니다.
- 타입체크 : TSS (typescript sever)를 이용해 실시간으로 타입체크를 해줍니다.
- 컴파일 : tsc 를 이용해 js 파일로 컴파일해준다. 타입체크 한 번 더 해줍니다.
설치된 타입스크립트 모듈입니다.
자바스크립트는 동적 타이핑 언어
자바스크립트는 기본적으로 동적타입을 가진 언어입니다. 동적타입이란, 데이터의 형 변환을 알아서 해준다는 뜻입니다. 또한 정해지지 않은 연산에 대해서는 알아서 판단해서 연산합니다.
그럼 좋은거 아닌가요?
네, 맞습니다. 좋은 기능입니다. 단, 코드의 복잡도가 낮고 인간의 두뇌로 기억되고 예측되는 선에서는요.
하지만 코드의 복잡도가 상승하고, 다양한 종류의 데이터를 다룬다면 이는 결코 장점이 되지 못합니다.
주니어 개발자 입장에서는 바닐라자바스크립트가 훨씬 편하다고 할 수 있죠. 하지만 경력이 쌓이고 코드가 방대해지면 타입스크립트를 절대 무시할 수 없을겁니다.
아직도 동적 타이핑이 좋다고 생각하시나요?
자바스크립트가 무시당하던 시절에 무시당했던 이유를 몇가지 이야기 해보자면
- 동적 타이핑 언어 ( 자동 형변환 )
- 브라우저 내부 한정 언어
- 싱글스레드 언어
이러한 단점들이 존재했고 현재는 다양한 파훼법으로 좋은 언어로 거듭나고 있습니다.
그 중 동적 타이핑을 벗어나기위해 타입스크립트가 출시되었고, 협업이 필수인 개발자 생태계에서 자리잡게 되었습니다.
function addNumber (num1, num2){
console.log(num1 + num2);
}
1. addNumber(); // NaN
2. addNumber(1); // NaN
3. addNumber(1,2); // 3
4. addNumber(1,2,3); // 3
5. addNumber('hello','world') // 'helloworld'
위 함수 사용중 에러를 발생하는 코드는?? : 없습니다.
// 1. undefined + undefined = 값이 없으니 기본셋팅
// 2. 1 + undefined = 숫자 + 언디파인드
// 3. 1 + 2 = 3
// 4. 1 + 2 = 3 3번재 인자 무시
// 5. 'hello' + 'world' = 자동 형변환어떤가요?
addNumber 는 함수명만봐도 알 수 있듯 숫자를 더해주는 함수라는걸 예측할 수 있습니다.
위 코드들에서 기대한 값을 제대로 얻었나요? 아닙니다. 기댓값과는 다르게 작동하는 것을 알 수 있습니다.
하지만 자바스크립트는 이러한 사용법에대해 경고문을 띄워주지 않습니다. 동적 타이핑 언어이기 때문이죠..
자바스크립트는 런타임에 에러 확인
자바스크립트 코드를 작성할 때 작성한 코드에 문제가 있는지 확인하기 위해서는 개발자의 예측이란 방법밖에는 없습니다. 즉, 코드가 실행되어야 문제를 파악할 수 있다는것입니다.
여러분들은 다른 개발자가 짜놓은 코드를 수정했을 때, 혹은 내 코드가 다른 개발자 코드와 합쳐질 때, 실제로 사용자들이 사용중인 웹사이트에 에러가 흩뿌려지면 어떨거라 생각하나요?
물론, 실서버에서 작업할일은 그렇게 많지 않을거라 생각하지만 끔찍하지 않나요?
타입스크립트는 런타임이 아닌 코드 작성중에 타입을 정하고 정해진 타입과 다른 타입을 리턴하거나, 파라미터로 넘겨주었을 때 코드에 에러를 표시해줍니다.
아래 예시를 보시죠.
function arrConsolePrint(arr){
arr.forEach(arrItem => console.log(arrItem));
}
1. arrConsolePrint([1,2,3]) //1,2,3
2. arrConsolePrint(1,2,3) //refer error
//1. 정상적으로 작동합니다.
//2. 콘솔에 에러가 발생합니다. 이유 : 숫자 타입에는 forEach 메서드가 없습니다.어떤가요? 코드 실행전에 에러가 있다는것을 알 수 있었나요? 네 알 수 있었죠. 개발자의 예측으로만요.
그렇다면 다른 언어들은 어떨까요? 잘 알려진 정적타입 언어인 JAVA는 작성된 코드를 컴파일할 때 에러를 내뿜습니다.
타입스크립트는 정적타입 언어입니다.
이처럼 코드의 오류를 런타임에서 확인하는것은 매우 위험한 행동입니다. 하지만 타입스크립트는 코드 작성중 오류를 알아챌 수 있습니다.
| 에러 발생 | 에러 내용 |
|---|---|
 |  |
| 코드 작성중 빨간줄로 에러표시 | 마우스 클릭시 원인과 수정방법도 제공 |
| 에러 발생 | 에러 내용 |
 | |
| 에러 발생 | 숫자타입 2개를 받는 함수에 문자열 할당 |
타입을 지정하지 않으면 자동으로 any 타입이 됩니다. ( 어떤 타입도 할당 가능 )
함수를 마우스로 클릭해보면 파라미터의 타입과 리턴하는 값의 타입을 알 수 있습니다.
void 는 리턴값이 없다는 뜻입니다.
타입스크립트 적용 방법과 왜 사용하는지를 알아봤습니다.
