HJ's WEB Dev BLOG

🎈 TypeScript 입문 스타트

👩🏻 요즘 프론트앤드 웹기술에 많이 쓰이는 타입스크립트를 인프런 캡틴판교님의 강의로부터 입문 시작했다. 전부 다 쓰는 추세이니 나도 억지로 따라 써보자가 아닌, 도대체 어떤 장점이 있길래? 라는 궁굼증으로 접해보았다. 그리고 3주차 걸려 드디어 완강했음여 무야호👏🏻 처음 접해보는 캡틴판교님의 타입스크립트 입문기 인강 후기를 말하자면 딕션이 너무 좋으셔서 귀에 쏙쏙 박혀 재밌게 공부했다. 중요한 개념들을 이해가 잘되게끔 쉽게 설명 해주시고 중간에 간단한 프로젝트를 통해 실무 적용해보는 과정도 있어 타입스크립트를 입문하기에 알찬 강의었다.

🎈 타입스크립트란 ?

- 자바스크립트에 타입을 부여한 언어 (자바스크립트의 확장된 언어라고 볼 수 있다)

- 타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위해 파일을 변환해주어야 한다. 이 변환 과정을 컴파일이라 한다.

🎈 타입스크립트의 장점

1. 함수 타입을 직접 정의하여 에러를 최소화 시킬 수 있다.
2. 내가 지정한 타입의 api 리스트를 제공해준다.
3. 오탈자 방지

function add(a: number, b: number):number {
return a+b;
}
add(10, 20);

✔ funciton add(a: number, b: number):number = function 함수명(속성: 타입, 속성: 타입): 반환 될 타입

직접 함수 타입을 정의해줌으로써 자바스크립트처럼 PropTypes 없어도 된다. add를 호출해 줄 때는 파라미터 안에 들어있는 타입들과 일치하게 호출해줘야한다. 안그럼 에러표시가 생기는데 이를 통해 에러를 최소화 시킬 수 있다. 파라미터 안에 있는 속성의 타입들이 number이면 add(10), string이면 add('123'), boolean이면 add(true) 이런식으로 코드를 작성해 나가면 된다.

function add(a: number, b: number):number {
  return a+b;
}
var result = add(10, 20);
result.toLocaleString();

result 라는 변수를 만들고 result를 불러올 때 . 만 찍어도 number에 관한 api 리스트가 나온다. api 리스트 중에서 toloca만 치고 tab키를 누르면 자동완성으로 toLocaleString 키워드가 완벽하게 입력된다. 일반 JS를 사용할 경우 이런 속성들이 전혀 나타나지 않는데 타입스크립트라서 가능한 기능이다. 그리고 toLocaleString 이 키워드는 텍스트 중간마다 낙타법으로 대문자 표기가 되어있는데 타입스크립트는 알아서 자동완성 기능이 있기 때문에 오탈자 방지를 할 수 있다는 장점을 지니고 있다. 그래서 타입스크립트를 잘 활용하면 훨씬 더 정확한 코드를 작성해 나갈 수 있다.