TypeScript로 정적 타입 코딩 효율성 높기 방법을 배워보자 - TypeScript #1

• TypeScript 배우기 첫걸음

•   TypeScript가 뭐예요?

•   JavaScript와 뭐가 다를까요?

•   TypeScript가 왜 필요할까요?

•   어떻게 시작하죠?

이번 글에서부터 TypeScript에 대해 정리해 보겠습니다. 요즘은 프로그래밍 언어에 대한 공식 자료를 비롯해서 다양한 채널에서 쉽게 학습 자료를 접할 수 있는데요, 이들 자료를 취합해서 조금 더 쉽게 설명할 수 있도록 한번 정리해 보려 합니다. 오늘은 첫 번째 시간으로 TypeScript 소개 및 설치부터 진행해 보겠습니다.

TypeScript가 뭐예요

 

반응형

 

TypeScript 배우기 첫걸음

  TypeScript가 뭐예요?

TypeScript는 한마디로 "JavaScript에 규칙을 추가한 언어"라고 할 수 있어요. 2012년 마이크로소프트에서 세상에 내놓은 이 언어는 JavaScript가 가진 모든 맛을 살리면서, 코드를 쓸 때 변수나 함수에 어떤 종류의 값을 넣을지 미리 정할 수 있게 해 줍니다. 가령, 숫자만 담으려는 변수에 실수로 글자를 넣으면, 실행하기도 전에 "야, 이건 안 돼!" 하고 알려주는 거죠. 그래서 TypeScript를 "정적 타입 언어"라고 부르는 겁니다.

 

그럼 이런 언어는 왜 만들었을까요? JavaScript는 처음엔 웹에서 간단한 버튼이나 효과를 만들려고 생겼어요. 그런데 세월이 흐르면서 대규모 웹사이트나 모바일 앱, 이를테면 React Native 같은 데까지 쓰이게 됐죠. 그러다 보니 코드가 점점 커지고 엉키면서, 실수를 잡아내기가 힘들어졌습니다. TypeScript는 이런 문제를 풀어보려고 나온 거예요.

 

 

 

  JavaScript와 뭐가 다를까요?

JavaScript를 써본 사람은 "변수에 뭐든 넣어도 된다"는 점이 좋으면서도 무섭다는 걸 알 거예요. 이걸 전문가들은 "동적 타입"이라고 하는데, 예를 들어

let age = 25; 
// 위와 같이 먼저 해놓고
// 나중에
age = "스물다섯";

위 같이 age = 25 라고 선언하고, 나중에 "스물다섯"이라고 바꿔도 JavaScript는 눈 하나 깜짝 안 합니다. 하지만 코드가 돌다가 갑자기 터지면, 어디가 문제인지 찾느라 진땀을 빼야 하죠.

 

하지만, TypeScript는 다릅니다. "정적 타입"이라는 방식을 써서 변수의 종류를 처음부터 정해놓아요.

let age: number = 25;
// 위와 같이 선언하면 age는 숫자만 담을 수 있어요. 

age = "스물다섯"; // 나중에 이렇게 문자를 넣으려 하면 경고를 합니다.

특히 React Native처럼 화면과 기능을 얽어야 하는 작업에서 이런 점은 시간을 엄청 아껴줘요.

 

 

 

  TypeScript가 왜 필요할까요?

"JavaScript로도 잘 되는데 뭐하러 TypeScript를 배워요?"라는 생각이 들지도 몰라요. 맞아요, 작은 프로젝트라면 JavaScript만으로도 충분할 때가 많죠. 하지만 여러 사람이 함께 코드를 짜거나, React Native로 복잡한 앱을 만들 때는 이야기가 달라져요.

 

TypeScript의 강점은 코드가 튼튼해지고 나중에 손보기도 편하다는 점이에요. 변수나 함수의 용도를 분명히 정해놓으면 한눈에 이해가 되니까, 코드를 고치거나 새 기능을 더할 때 실수를 덜 하게 되죠.

 

또, TypeScript는 개발 도구와도 잘 어울려요. Visual Studio Code 같은 편집기에서 자동 완성이나 실수 감지가 훨씬 똑똑해져서, 코드를 쓰는 손놀림이 빨라지고 실수도 줄어듭니다. 페이스북이나 에어비앤비 같은 큰 회사들이 React Native에 TypeScript를 쓰는 것도 이런 실용성 때문이에요.

 

 

 

  어떻게 시작하죠?

TypeScript를 직접 써보고 싶다면, 먼저 환경을 준비해야 해요.

JavaScript와 TypeScript를 돌리려면 Node.js가 있어야 하니, 공식 사이트에서 최신 버전을 받아 설치하세요. 그다음 터미널을 열고 이렇게 쳐보세요.

npm install -g typescript

 

잘 됐는지 확인하려면 tsc --version 을 쳐서 버전이 나오나 보세요.

 

이제 React Native에 TypeScript를 입혀볼 차례예요. 새 프로젝트를 시작할 땐 이 명령어를 쓰면 돼요.

npx react-native init MyApp --template react-native-template-typescript

 

그러면 TypeScript가 기본으로 깔린 React Native 프로젝트가 만들어져요. 만약 이미 있는 JavaScript 프로젝트를 바꾸고 싶다면, tsconfig.json 파일을 넣고. js 고치는 작업을 하면 됩니다. 처음엔 낯설어도 한두 번 해보면 손에 익을 거예요.