[Typescript] 타입스크립트 쓰는 이유 / 타입스크립트 설치

 

요즘 웹 개발자 채용 공고를 보면 다 대부분 타입스크립트를 어느정도 일정부분 요구하고 있습니다.

타입스크립트가 뭐냐면, 자바스크립트 대용품 같은 언어 입니다. 완전 다른 언어는 아니고,

그냥 자바스크립트 문법은 이용 가능한데, 타입 부분을 업그레이드 해서 쓸 수 있는 자바스크립트 업글버전!

이라고 생각하시면 됩니다. TypeScript = JavaScript + Type문법 = "JavaScript Superset"

 

 

그래서 크기가 좀 큰 프로젝트를 다루고 있는 곳이라면, 자바스크립트가 아니라 타입스크립트를 씁니다.

 

 

왜냐하면 자바스크립트는 이런 문제들 있어서 그렇습니다. 위처럼 5 - 3 하면 가능하죠? 2가 나오겠죠?

 

 

근데 자바스크립트는 이런 것도 가능하다. 왜냐하면 JavaScript는 Dynamic Typing을 제공하는 언어이기 때문에,

이런 식으로 원래는 숫자 - 숫자만 가능하지만 얘가 문자를 만났다고 하면, JS가 알아서 숫자로 연산을 해줘요.이게 바로 Dynamic Typing (다이나믹 타이핑) 이라고 하는건데요.

 

편리한테 프로젝트 사이즈가 커지게 되면 이것은 오히려 단점 뿐으로 적용이 될 수 있습니다.

사이즈가 크면 커질수록 이렇게 자유도가 높은 것, 유연성을 제공하는 것들은 오히려 쓰레기 적이 될 수 있습니다.

 

그래서 타입스크립트를 갖다 쓰게 되면, 이것을 에러로 잡아줍니다.'숫자 - 문자 빼면 부작용이 일어나게 될 것 같아요. 수정해주세요.' 라고요!

TypeScript는 타입 엄격히 검사해줍니다. TS error : "문자랑 숫자 빼는거 이상한데 빨리 수정해!"

 

근데 코딩 꼰대들은 이런 생각을 할 수도 있대요. 굳이 이걸 써야 하나? 나는 자바스크립트로 충분하다.내가 자신있으면 그런 생각을 하기 미련인데 그런데 코드 천줄, 만줄자가 오면 그런 생각이 사그라들 것 같아요.

 

 

위 예시 또한 코드를 보면 ESLint 상으로는 문제가 없는 코드입니다.

그런데 사실 프로그래밍적으로 NaN은 쓸 이유가 없는 타입입니다. 이러한 문제를 막아주는 것이 Typescript 입니다.

 

JavaScript의 추상적이고, 추적이 어려운 에러

 

그리고 TS를 쓰는 또 다른 이유는 타입 부분을 엄격하게 짚어주는 것 덕분에 에러 메시지 같은 것도 정확하고 퀄리티가 좋습니다.

쌩 자바스크립트는 원래 에러메시지 같은게 추상적이고, 추적 어려운 에러 같은게 되게 많습니다.

 

[Typescript] 숫자가 들어와야 하는데 문자가 들어왔다고 알려주는 모습

[Typescript] 오타 교정해주는 모습

 

그런데, 타입스크립트는 엄격하게 타입을 체크하는 것을 알아서 해주기 때문에 이런 식으로

여기 숫자가 들어와야 하는데 문자가 들어옵니다. 이런 식으로 정확히 짚어주거나 심지어 오타 교정도 가끔 해줍니다.

apend 라고 썼는데, append 라고 써야하는 것 같아요. 이렇게 알려주는 모습이 보입니다.

이것이 다 엄격한 타입 체크 덕분에 쓸 수 있는 부가기능인 것이라고 보면 될 것 같습니다.

 

그래서 타입스크립트를 언어보다는 일종의 코드 에디터 부가기능 역할로 봐도 될 것 같아요. 오타 잡아주고 그런!

이런 걸로 보셔도 전혀 상관이 없을 것 같습니다. 왜냐하면 자바스크립트랑 문법이 거의 동일합니다.

타입 부분만 지정만 잘 해주시면, 타입스크립트 끝이에요.

 

 

그래서 프로젝트에 TypeScript 설치해서 쓰고 싶다면, html CSS JavaScript 웹 개발할 때

그 상황을 가정해서 타입스크립트를 한 번 써보도록 할게요. (여기선 그냥 static 웹페이지 개발시를 가정할 것임)

타입스크립트를 쓰기 위한 개발환경 세팅은 첫 번째 Node.js 설치 해야하구요. 최신버전 설치해주세요. 안그럼 에러남!

 

[Node.js] Node.js란? / 개발 환경 세팅 / Node.js 설치

 

<TypeScript 설치> 

 

1. Node.js 설치 (최신버전 꼭!)

2. VScode 에디터 준비

3. 터미널 오픈 후 npm install -g typescript

4. 코드 짤 폴더 만들고, 에디터로 폴더 오픈

5. 파일명.ts 파일 생성 후 코드 짜기

6. tsconfig.json 생성 후 내용 작

 

 

자, 이제 js 파일이 아니라 ts (타입스크립트) 파일을 하나 만들어요. index.ts .ts로 끝나면,

이게 전부 다 타입스크립트 파일이라고 인식을 합니다. 그 다음에 파일을 하나 더 새로 만들어줘야 해요.

tsconfic.json 이라는 파일명 정확히 맞추어 만들어줘요. 그리고 이후에 아래 코드를 복사 붙여넣기 해주고 시작해요.

 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
  }
}

 

그 다음 ts 파일로 돌아가서 여기에 타입스크립트로 코드를 작성해주면 끝이랍니다.

이렇게 짠 코드는 브라우저에서 인식을 못해요. .ts 파일은 브라우저가 못읽어요.

 

터미널 켜서 tsc-w 입력해두면 자동 변환

 

브라우저는 무조건 자바스크립트 파일만 읽을 수 있습니다. 그래서 무조건 ts 파일을 js로 변환해서 활용해야 해요.

그것은 터미널로 오픈을 해서 tsc - w 명령어 쳐서 넣으면 돼요. 그럼 타입스크립트 파일을 자바스크립트로 자동 변환해줘요.

이거 켜 놓으시고 끄지만 않으면 자동으로 저렇게 자바스크립트 파일이 생긴답니다.

 

 

여러분들이 .ts 파일에서 코드 짜고 저장할 때마다 자바스크립트 파일이 새로 갱신이 됩니다.

그래서 코딩은 .ts 파일에다 하고 나중에 html 파일을 꽂아야 한다고 하면, .js 파일을 갖다 쓰시면 됩니다.

 

 

자바스크립트 파일로 변환하는 과정을 'compile(컴파일) 한다' 라고 하는데요.

바로 이 컴파일 할 때, 그 옵션들을 tsconfig.json 여기다가 보통 기입을 합니다.

"target": "es5" 자바스크립트 버전 몇으로 지정을 할 것인가,

"module": "coomonjs" 자바스크립트 import 문법을 언제적 자바스크립트 문법으로 바꿔줄 것인지.

 

 

타입스크립트 문법 - 변수 만들 때, 변수를 그냥 만들지 않습니다. 변수에다 오른쪽에 타입 지정을 할 수 있습니다.

이름 이라는 변수를 만들겠습니다. 그런데 이 변수에는 string (문자) 만 들어올 수 있습니다. 라는 문법입니다.

이 변수는 이제 앞으로 무조건 문자만 들어올 수 있습니다. 이런 식으로 타입을 엄격하게 관리할 수 있습니다.

 

간단한 변수 타입 지정 가능

 

이름 이라는 변수에 숫자 집어넣어볼게요. 그려면 바로 에러가 나는 것이 보입니다. 바로 잡아줍니다.

얘가 어떤 에러인지도 이렇게 잘 알려주고 있습니다. 타입 변경사항 때문에 생기는 버그 같은걸 빨간줄로 미연에 방지합니다.

 

 

타입 명칭에 들어갈 수 있는 코드들은 여러가지가 있는데, string number boolean null undefined ,. 등등

예를 들어, 이름이라는 변수에 array 타입 지정을 하고싶으면 :array 이런 식으로 하는게 아니라, :[] 이런식으로 하면 됩니다.

 

array 타입지정

 

그런데 이 array 안에 구성 물품이 어떤 타입인지를 앞에 정의해주어야 합니다.

:string 처럼 array 자료인데 안에 무조건 string이 들어있어야 합니다 라는 엄격한 타입이라고 보면 됩니다.

그럼 이름이라는 변수에는 무조건 그 글자가 가득찬 array만 들어올 수 있습니다. 다른거 집어넣으면 에러가 납니다.

 

 

object 자료 타입 지정은 object랑 똑같이 생긴 이런 코드를 작성해주면 됩니다.

object랑 똑같이 작성해주고, 안에 속성 이름은 이런 타입이 들어올 수 있습니다. 이렇게요!

그러면 이름에는 무조건 그렇게 생긴 object 자료만 들어올 수 있는 것 입니다.

 

 

object 자료는 ? (물음표) 써서 name 이라는 속성이 들어올 수도 있고, 안들어올 수도 있다는 뜻으로

이 속성이 들어오는게 불확실 할 때, 물음표를 쳐서 안들어와도 이렇게 에러를 내주지 말아달라고 표현 가능합니다.

일종의 옵션을 주는 것이라고 보면 되겠습니다.

 

 

kim 이라는 자료를 저장하는 이름 이라는 변수에는 문자도 들어올 수 있고, 가끔가다 숫자도 들어와야 돼요.

 

그럴 경우에 타입 지정은 :string | number 이런 식으로 or 기호를 써서 지정을 합니다.

그럼 이 변수에는 string 혹은 number가 들어올 수 있습니다 라는 그런 타입 지정도 가능합니다.

그러면 문자, 숫자가 들어와도 에러가 들어오지 않습니다. 다양한 타입이 들어올 수 있게 하는 Union type 입니다.

 

 

심지어 이런 것도 가능합니다. string이 가득 담긴 array 혹은 number가 들어올 수 있어요.

이런 것들도 가능하고, 여러가지 응용들이 많이 가능하겠지요.

 

타입은 변수에 담아쓸 수 있음 Type alias

 

타입 지정하는게 되게 길다고 하면 이런 것들을 변수에 담아서 사용할 수 있습니다.

변수 만들고 싶으면 이렇게 type 이라는 키워드 작성하시고, 변수 하나 Name 만들고, 자유롭게 작명해줘요.

그리고 타입을 이렇게 넣어주면 됩니다. 그럼 그런 타입을 'Name' 이라는 글자로 저장한겁니다.

 

그러면 내가 마음대로 앞으로 변수에 담아서 갖다 쓸 수 있답니다.

참고로, 타입명 같은거 작명할 때 영어 대문자로 보통 많이 작명을 합니다.

그래야 일반 변수 같은 것과 좀 차별화해서 관리할 수 있기 때문입니다.

 

 

우리가 함수를 만들 때 타입 지정이 가능한데, 함수의 파라미터가 있고, 함수의 리턴 값이 있잖아요.

x 에다 2를 곱해서 return 해준다고 하면 이거에 각각 타입 지정이 가능합니다.

 

 

파라미터에 타입지정을 하고 싶으시면, 똑같이 이런식으로 변수 만들듯이 타입 지정 해주시면 됩니다.

파라미터도 일종의 변수이기 때문에  return을 할 때도 이 return 값이 어떤 타입인지 미리 체크 할 수 있습니다.

어떤 타입이 return 될지 타입 지정하는 것은 return 옆에 아니라, 저 위치에 지정해주면 됩니다.

 

함수에 타입지정 가능

 

그래서 이 함수는요. 무조건 number가 들어와야 하고, 그리고 무조건 number를 return 해줘야 한다는 뜻입니다.

엄격한 함수가 완성이 된 것 입니다. 그게 아니면, 함수에다 문자를 입력하니 유사한거 넣지 말라고 에러가 납니다. 

 

 

array 자료를 만들 때 무조건 이 자리에는 숫자가 들어와야 한다 라는 타입 지정도 가능합니다.

이번에는 대괄호 안쪽에다 타입명을 진행해볼게요. 그러면 이제 어떤 변수에 활용을 할 수 있답니다.

john 이라는 변수는 무조건 number, boolean 타입이 들어가야 된다는 뜻입니다.

 

array에 쓸 수 있는 tuple 타입

 

이 타입을 tuple (튜플) 타입이라고 하는데, 무조건 이 array 첫 번째 자료는 number, 둘째는 boolean 값이

들어와야 한다는 뜻 입니다. 그렇기 때문에 무조건 저렇게 array를 만들어서 관리할 수 있게 됩니다.

 

 

만약에 여기 숫자가 아니라 문자가 들어왔다고 하면, 에러를 바로 내주게 됩니다.

 

 

object 자료 만들 때, 타입 지정해야 할 속성이 너무 많으면 이렇게 할 수 있습니다.

변수를 만들 때 타입 지정을 해버리면 john 이라는 변수는 무조건 name : string 이런 자료만 들어올 수 있습니다.

name : 'kim' 이렇게 문자가 들어오니, 에러가 안나는 것을 볼 수 있습니다.

 

 

이렇게 이상한 숫자를 집어 넣으면 바로 에러가 나옵니다.

직접 만든 Member 타입이라는 것 덕분에 그렇습니다.

 

 

그런데, 여기에 들어갈 자료들이 너무 많다면 name도 들어가야 하고, age도 들어가야 하고, 여러가지 뭔가

속성들을 100개 넘게 많이 집어넣어야 한다고 하면 다 지정하는게 귀찮잖아요. 그면 한 번에 싸잡아서 등록할 수도 있는데

이런 식으로 작명해주시면 됩니다. [key : string] 이 '모든 object 속성' 이라는 뜻인데요. 

 

 

무조건 문자로 이렇게 들어온 속성들이 전부 다 string을 가져야 한다는 뜻으로 이런식으로 코드를 짤 수 있습니다.그러면 이제 속성들을 자유롭게 많이 써도 [key : string]에 걸리기 때문에 귀찮게 하나하나 지정할 필요가 없어지는 겁니다.

 

 

Class 문법도 타입 지정이 가능합니다. 여기 딱 봐도 함수스럽게 생겼지요.그러면, 함수 타입 지정 문법 쓰면 되는거구요.

 

class 타입지정 가능

 

근데 Class는 약간 달라서 미리 변수를 만들어놔야 변수를 갖다 쓰고, 그다음에 this.name = name 이런식으로갖다 쓸 수가 있습니다. 여기다가 변수를 만들어서 미리 타입 지정을 해야 한다는 이런 것들이 살짝 다릅니다.construtor(name :string) 여기에도 :string을 쳐주는게 안전합니다.

 

아무튼 전체적인 문법은 자바스크립트와 똑같습니다. 그런데 타입스크립트 지정하는 문법만 다를 뿐입니다. 실제로 코드 짜다 보면 타입스크립트에서나 지켜야되는 이상한 코딩 오류같은 것도 있고, 타입 문법 이외의 것들도 많습니다. 편의성을 위한 이런 특이한 문법이라든지, 아니면 기능 같은 것들도 막 나타나는데 이런 것들은 실제로 코드 짜보면서 배우는게 좋을 것 같습니다.

 

 

ref. https://youtu.be/xkpcNolC270