TIL 231218 - TypeScript exercises

송용승·2023년 12월 18일
1

TIL

목록 보기
25/29

Today I Learned

"타입...어렵네요.." "네..." "..." "..."

지난주에 To-do list 를 TS로 리팩토링 하는 과제를 진행하며 TypeScript 가 생각보다 어렵고, 공부할 양이 많은 것 같다고 느꼈다. 오늘 과제를 제출하고 팀원들과 이야기를 나눠보니 다들 같은 걸 느꼈다고 해서 이번 한 주 동안 TS 스터디를 진행해보기로 했다.

시작이 반이다

스터디는 정말 처음에 시작하는게 어렵다.

  • 팀의 수준에 맞는 교재를 찾기가 어렵다
  • 언어의 장벽도 무시할 수 없다
  • 스터디 기간에 맞는 교재를 선택해야 한다

위와 같은 조건을 모두 고려해서 이야기 나눠보고 튜터님에게도 찾아가서 이야기 해 본 결과,

  • TypeScript 공식 문서 : 너무 내용이 많고 딥하게 다루는 것도 많아서 시간 안에 스터디하기 어렵다.
  • TypeScript 공식 문서 > Handbook : 내용은 비교적 적지만 여전히 너무 깊게 다룬다. 다른 튜터님은 시간 많으면 해보라고(…) 했다.
  • ⭕️ TypeScript Exercise : 문제 풀이 형식으로 TS를 익히는 곳이다. 문제의 난이도는 차치해두고 문제 수가 일주일동안 진행해보기에 딱 좋은 정도이고, 실제 use case 에 근접한 예제를 통해 학습하기 때문에 좋을 것 같았다.

이렇게 스터디 교재를 정하고, 오늘은 1 - 6번 문제를 풀어보기로 했다. 각 문제의 구성에 대한 예시는 아래와 같다.

  1. 시나리오 설명 : 유저를 필터링 하기 위한 함수 또는 타입이 필요하다.
  2. 문제에 대한 자세한 설명 : 이때 새로운 타입을 정의하지 않고, 기존의 코드를 고쳐야 한다.
  3. 조금 더 어렵게(아마도 엄밀하게) 풀어보기 : 필터링 criteria에서 'type' 을 제외시켜라.
  4. 문제(코드) : 대체로 이미 발생한 타입 에러를 코드 추가 또는 수정을 통해 해결하는 방식
  5. 관련 TypeScript 공식 도큐먼트 항목 : 해당 문제를 해결하는 과정에서 도움이 될 만한 공식 도큐먼트로 이어지는 링크

function signature, implementation signature

아까 말했듯 오늘은 6번까지 풀었는데 6번에서 난이도가 확 올랐다. 갑자기 function overload 가 나와서 놀랐다. 그래서 도큐먼트를 읽어봤는데, function signatureimplementation signature 라는 개념이 나와서 당황했다. 여기저기서 많이 등장하는 것 같은데, 헷갈리지 않기 위해서 정리해보려 한다.

overload signature

오버로드 시그니처는 함수의 타입을 정의하는데 사용된다. 다시 말해 함수가 어떤 매개변수를 받고 어떤 타입의 값을 반환하는지 명시적으로 선언하는 부분이다. 이 때 실제 구현 부분은 작성하지 않는다.

function isDivisor(param1: number, param2: number):boolean;

implementation signature

구현 시그니처는 함수의 선언부에 실제 구현부까지 함께 정의해둔 형태를 말한다.

function isDivisor(param1: number, param2: number):boolean {
	return param1 % param2 === 0 ? true : false; 
}

TS 를 공부하다 보니 이런저런 시그니처를 많이 보게 된다. 위의 두개 외에도 호출 시그니처, 함수 시그니처 등등 ... 모든 시그니처를 다 외우기는 어려울뿐더러 그럴 필요도 없고, 시그니처 라는게 형태에 의해서 주로 결정된다는 것만 알아두고 그 때 그때 찾아가며 사용하면 될 것 같다.

profile
웹 프론트엔드 개발을 익히고 있습니다.

0개의 댓글