[TypeScript] 타입스크립트 익히기 1탄
✏️TypeScript 타입스크립트를 익히기 1탄
타입스크립트, 예전에는 배워야 할까? 생각이 들었다. 고민만 하다가 타입스크립트 공부는 계속 뒤로 미루고 있었는데,
요즘들어 타입스크립트를 사용하는 곳이 많아짐을 알게되고, 왜 사용하는지를 찾아보게 되었다.
타입스크립트 관련 글들을 찾아보니, 에러를 방지하기 위한, 혹은 안정성을 위한,
협업을 위한 기타 등등의 많은 이유가 있었다.
타입스크립트를 배우기 전, 조사를 통해 느끼게 된 건 에러를 최소화 할 수 있다는 점과,
잘 사용한다면 동료간의 협업에 큰 도움이 될 것이라 느꼈다.
환경에 따라 혼자서 개발하는 분들도 계시지만, 다른 개발자들과 협업을 하는 입장에서 공통 함수나, 다른 개발자들이
만들어둔 기능을 사용할 때, 어떤 기능을 하는지, 어떤 파라미터를 받고 어떤 결과를 뱉어주는지 해당 코드를 자세히
들여다보기 전까지 한 눈에 알아보기는 어렵다. 물론 JS Doc이나 주석처리를 해둘 수도 있지만...
여튼, 타입스크립트는 이러한 점을 한방에 해결해주는 것 같았다.
우선 타입스크립트의 타입에 대해서 먼저 공부해봤다.
위의 스크린 샷을 보면, jsStr이라는 변수는 일반적인 자바스크립트의 변수고, String 값을 넣었고,
tsStr도 동일하게 String 값을 넣었지만 변수 이름 뒤에 콜론과 String을 붙여줬다.
이 변수에는 문자열 값만 허용하겠다는 것이다. 만약 tsStr: string = 1을 넣었다면?
해당 부분에 빨간줄이 그어지고, 위와 같은 에러 메시지를 볼 수 있다.
number와 boolean도 동일하게 사용할 수 있다.
Array 같은 경우 조금 다르다.
tsArr: Array<string> = ['q', 'w', 'e']
tsArr: string[] = ['q', 'w', 'e']
string 및 number 같은 경우 앞 글자를 소문자로 사용했지만, Array는 대문자로 설정해줘야 하고,
<string>, <number> 등을 통해 타입을 지정해줘야 한다.
두 번째 string [] = ['q'] 문법 또한 같은 역할을 하지만, 문법이 다를 뿐이다.
배열 같은 경우, 여러개의 타입으로 구성되어 있는 경우도 있다. 그럴 때는 위처럼 설정하면 된다.
위의 문법을 Tuple이라고 한다. 배열의 첫 번째 값은 문자열로 받고, 두 번째 값은 number로 받아야 한다.
함수 또한, 리턴 값과 파라미터에 타입을 지정해줄 수 있다.
위의 첫 번째 함수 같은 경우, 만약 sum(10,20,30) 을 하면 결과가 어떻게 나올까?
일반 자바스크립트에서는 sum(10,20,30)을 작성하더라도 별 문제가 없을거다.
하지만 타입스크립트에서는, 2개의 인자만 필요하다는 문구와 함께 빨간 줄이 그어진다.
만약 함수에 인자를 3개로 설정했는데, 2개를 넣어도 혹은 1개를 넣어도 문제가 없는 함수를 구현했다고 해보자.
다른 사람이 해당 함수를 보았을 때, 바로 그걸 알아챌 수 있을까? 코드를 조금이라도 봐야 알 수 있을 것이다.
그런 경우, 위처럼 파라미터 앞에 ?:를 붙여주면, log('q') 만 작성하더라도 에러가 없고, 다른 사람이 봤을 때
함수를 작성한 의도를 파악하기 쉬울 것이다.
오늘은 여기서 끝!