TypeScript와 조금 친해진 이야기(1)

Peter·2022년 4월 29일
0

TypeScript회고

목록 보기
1/2

타입스크립트와 친해진 과정

타입스크립트를 알게된지 어느덧 1년... 이 시점에서 타입스크립트에 대한 무언가를 남겨야겠다고 생각했다. 하지만 타입스크립트의 기능과 동작 원리를 나열하기엔 너무나도 훌륭한 선배님들의 글이 많고 또 내가 타입스크립트를 처음 사용하기 시작했을 때 지금 느끼는 감동을 느낄 수 있는 글이 많이 없었기에 타입스크립트를 사용하면서 감동한 여러 순간들을 연애의 순간에 투영해 기록해보고자 한다.
타입스크립트는 매우 훌륭한 여러가지 기능들이 있지만 쓴이는 2년차 주니어 나부랭이기 때문에 그저 훌륭한 기능들중 극히 일부를 사용하고 있음에도 타입스크립트에 감동한 얘기들이 주를 이룰 예정이다.

굳이? 싶은 느낌의 첫만남

온라인 강의에서 강사님이 여러가지 기능을 구현하는데 그동안 친숙했던 JavaScript랑 비슷하지만 조금 다른듯한 모양을 가진 언어를 보게 됐다. 일단 따라하기는 하는데 '굳이 편한길을 냅두고 손가락 아픈짓을 하지?' 가 타입스크립트에 대한 나의 첫인상이다.

요즘 써야 한대서 - 타입스크립트 공부하기

function calSumTwoNumbers(first, second){
  const result = first + second;
  return result;
}

const combinedThree = calSumTwoNumbers(1, 2)

위는 자바스크립트
아래는 타입스크립트다

function calSumTwoNumbers(first:number, second:number):number{
    const result: number = first + second
    return result
}

const combinedThree: number = calSumTwoNumbers(1,2)

그냥 자바스크립트로 작성한 코드에서 number라는 단어가 5개 콜론이 5개 무려 35자의 글자를 더 타이핑했다
이래서 타입스크립트인가 심지어 글자를 합칠때 사용하려면 자바스크립트는 잘 되는데 타입스크립트에서 작성한 함수는 타입 오류를 뱉는다

function calSumTwoNumbers(first, second) {
  const result = first + second;
  return result;
}

console.log(calSumTwoNumbers("hello"+"friend"))

// hellofriendundefined

자바스크립트로 작성된 함수는 이렇게 유도리 있게 사용할 수 있도록 해주는데 말이다...
그래도 뭐..
요즘 많이 쓴다니까 공부하자...

써야 취업이 된다길래 연습한다 - 자바스크립트를 타입스크립트로

프론트엔드온보딩 과정에 참여했었고 과제가 주어졌는데 타입스크립트를 필수로 사용해야 한다는 조건이 붙어있었다.
타입스크립트에 대해선 조금 공부한게 있었기 때문에 문제가 되지 않았지만...
솔직히 아주 불필요한 녀석이라고 생각했었기에 아래와 같은 순서로 코드 작성이 이뤄졌다

export function getImgFromPublic(lowerDirectory) {
  const imgSrc = process.env.PUBLIC_URL + lowerDirectory;
  return imgSrc;
}

리액트에서 퍼블릭 폴더에 있는 이미지를 가져오는 함수인데
일단 자바스크립트로 구현을 하고 타입스크립트를 사용하라는 조건을 준수하기 위해 타입 작업을 시작한다

export function getImgFromPublic(lowerDirectory: string): string {
  const imgSrc: string = process.env.PUBLIC_URL + lowerDirectory;
  return imgSrc;
}

이렇게 작성하니 오류가 사라지고 잘 작동하는군...

위와 같은 방법으로 구현을 해나가다보면(특히 DOM제어 상황에서) 얘기치 않은 타입 오류들이 발생하고
로직은 완성앴는데 타입오류를 통과시키지 못하고 몇시간씩 지나는 경우가 많았다

하... 너무 싫어...

profile
컴퓨터가 좋아

0개의 댓글