calendar2 님의 블로그

타입스크립트에 대한 강의도 끝났고 알아야 할 대부분의 문법들을 배웠다. 역시 강의 구성이 굉장히 좋다고 느꼈는데 단순히 타입스크립트를 적용하기보다는 JS에서 TS로 마이그레이션하는 과정을 강의에 넣은 것이 꽤 놀랍게 느껴졌다.어쨌든 제 블로그를 보신 분들을 위해 저도 마이그레이션 과정을 정리하려 한다. 이미 많은 프로젝트가 TS로 구축되어 있겠지만 아직 FE 웹 개발을 배운 지 얼마 안된 분들이나 혹은 굉장히 레거시한 환경에서 업무하신 분들의 경우 JS로 구축된 프로젝트를 TS로 변환해야 하는 경우가 있을 수 있다. 또는 프로젝트 생성을 JS로 잘못 진행했다든가. 하여튼 차근차근 따라가보자.1. 구축 환경구축 환경은 CRA + JS로 프로젝트를 생성하려 한다. CRA 의 업데이트가 중단되었고 Vite의 ..

이번에는 또 다른 유틸리티 타입인 Pick, Omit, Record에 대해 알아보자.Pick객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입 초창기 게시판을 만들 때 게시판 객체를 다음과 같이 설정했다고 가정하자. 근데 서비스를 제공하다보니 게시판에 변화가 생기면서 게시판 객체가 다음과 같이 업그레이드 되었다. 그런데 게시판 객체를 업그레이드 하고보니 다음과 같이 옛날에 작성된 글에는 태그가 없는 상태가 발견됐다. 이럴 경우 옛날 게시판과 현재 게시판 객체 두 가지를 모두 만드는 것이 아니라 Pick이라는 유틸리티 타입을 적용하면 편하다. Pick 타입 역시 맵드 타입과 인덱스드 엑세스를 활용하여 쉽게 구현할 수 있다.Omit객체 타입으로부터 특정 프로퍼티를 제거하는 타입 Pick이 특정 프로퍼티를 골..

이번에는 TypeScript에 내장된 유틸리티 타입을 알아보자.오늘 볼 유틸리티 타입은 Partial, Required, Readonly 세 가지로 전부 맵드 타입 기반으로 만들어진 타입이다.Partial특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입 전체적인 예시를 게시판으로 들어보자.우선, 다음과 같은 게시글 객체를 만들었다. 그런데 우리는 이 게시판에 임시 저장이라는 기능을 만들고자 한다.그리고 임시 저장 기능을 만들자니 내용이나 태그가 없는 상태로 글을 저장해야 하는 경우가 발생한다. 어쩌면 제목이 없는 상태로 임시 저장이 필요할 수도 있다.이때, 임시 저장을 위한 타입을 새롭게 생성하지 않고 다음과 같이 유틸리티 타입을 적용해서 해결할 수 있다. Partial 타입을 맵드 타입..

타입을 추론해주는 문법이 존재한다. 아래 코드를 살펴보자. FuncA와 FuncB라는 메서드 타입 두 개가 존재한다. 그리고 infer 문법을 사용해서 반환 타입을 추출하는 ReturnType을 만들어서, 각각 타입 A, B, C에 반환 타입을 정의해주었다. C의 경우 T 위치에 메서드 타입이 아닌 원시 타입이 들어가 never 타입이 추출된 것을 볼 수 있다.infer는 extends와 같이 사용해야 한다. T가 확장될 수 있도록 슈퍼타입이 가능한 타입을 추론해주는 역할이기에 extends infer 추론할 타입(대체로 R)로 작성하여 사용을 해준다.한 가지 예시를 더 살펴보자. 보면 extends 뒤쪽으로 Promise 타입이 들어오고 해당 Promise에 들어가는 타입이 T의 슈퍼 타입이 되도록 추..

이전 조건부 타입에서 string과 number 타입을 서로 뒤바꾸는 타입을 정의한 적이 있다.그 타입에 아래와 같이 유니온 타입을 지정하니 출력되는 타입도 유니온 타입이 되었다. 이 특징이 이번에 정리할 조건부 타입의 분산성이다.StringNumberSwitch 타입은 T에 들어온 타입이 number 타입을 확장하고 있으면 string, 그렇지 않으면 number 타입으로 변환해준다.그렇다면 T가 number | string과 같이 유니온 타입으로 되어 있을 경우 number 타입에 확장되지 않기 때문에 number 타입이 도출돼야할 것 같다.하지만, 조건부 타입의 분산 특징 때문에 타입 정의가 다음과 같이 이루어진다. 과정을 살펴보면 T에 정의된 유니온 타입이 각각 분산되어 타입 스위치가 일어나고 이..

JS 문법을 다룰 때 이런 코드를 사용한 경험이 있을거다.return a > 10 ? a * 2 : a; 삼항연산자를 이용한 분기인데, 타입에서도 이를 이용해 조건부 타입을 설정할 수 있다. type A의 경우 number 타입이 string 타입을 확장하는 경우라면 string 타입, 그렇지 않다면 number 타입으로 설정해라 라는 코드이다.대충 예시를 보여준거라 코드가 많이 낯설 수 있다. 조금 더 현실적인 객체 타입에 대해서 살펴보자. 타입 B의 경우 ObjB가 ObjA를 확장하는 타입이라면 number 타입, 그렇지 않다면 string 타입으로 정의하였다. ObjB가 ObjA의 프로퍼티를 포함하고 있으므로 ObjA의 확장 타입이고 조건이 성립하여 타입 B가 number 타입으로 정의된 모습이다...

이번에 살펴볼 것은 템플릿 리터럴 타입이다. 빈도 수가 높진 않다고 생각되는데 우선, 다음과 같이 타입을 조합해야하는 경우가 있다고 가정해보자. Color 타입에 3가지 색이 있고, Animal 타입에 3마리 동물이 있다. 그래서 색깔과 동물로 조합을 하고 싶은데 3가지씩만 있어도 9개의 타입이 생성된다.코드를 보는바와 같이 9개 적기도 힘든데, 동물이 4마리로만 늘어나도 12가지 타입으로 바뀌어 타입 정의가 상당히 힘들다. 이럴 때 사용할 수 있는 좋은 방식이 템플릿 리터럴 타입이다. 문법은 아주 쉽다. 다음 코드와 같이 작성해주면 두 타입을 결합한 새로운 타입이 생성된다. 우선 문법 자체는 굉장히 쉬우니 익히는데는 어렵지 않을 것 같다. 다만, 실제로 사용할 경우가 많이 있을지는 잘 모르겠다.참고자료..

아래 사진과 같이 간단하게 유저 타입을 정의하고 유저 정보를 받아오는 함수와 유저 정보를 수정하는 함수를 만들었다고 가정하자.1. 유저 수정우선, 유저를 수정하는 함수부터 살펴보자. updateUser 함수에는 매개변수 user가 필요한데, 이때 user의 타입은 User이다. 만약, 이렇게 설정할 경우 우리는 유저 정보를 수정하기 위해 다음과 같은 매개변수를 전달해야 한다. 보면 age 값 하나를 바꾸기위해 id와 name의 값도 필요한 것을 볼 수 있다. 지금은 프로퍼티가 3개로 문제되진 않지만 User 타입이 1000개의 프로퍼티를 가진 타입이라고 상상해보자. 그러면 앞으로 로직을 작성할 때 끔찍하다고 느낄 것이다. 이런 상황을 해결하기 위해 타입을 살짝 변환해서 적용해야 하는데, 가장 좋은 방법이..

아래 사진과 같이 Person 타입과 person 객체를 매개변수 호출을 통해 return하는 메서드를 작성하겠다. 이미 알다시피 person 매개변수에는 Person 타입을 정의하면 되는데, 옆에 key 매개변수에는 어떤 타입을 정의해야할까? Person이 가진 name과 age 프로퍼티가 모두 문자열로 작성되어 있으므로 string으로 정의해보겠다.1. string으로 정의했을 때 string일 경우 에러가 발생한다. key 매개변수 위치에 프로퍼티에 해당하지 않는 문자열을 작성할 수 있기 때문이다.그러면 프로퍼티에만 한정적으로 하기위해 유니온 타입을 사용해보자.2. 유니온 타입으로 정의했을 때 에러가 사라졌고 컴파일 과정에서 문제될 부분은 없다. 하지만, 만약 Person 타입이 지금처럼 2개의 프..

다음 사진처럼 게시글에 대한 타입이 정의되어 있고, 게시글이 하나 쓰였다고 생각해보자. 그리고 아래와 같이 해당 게시글의 작성자를 출력하는 메서드를 만들고자 한다. 앞서 배운 지식들로부터 매개변수에는 타입 추론이 적용되지 않고, 우리가 직접 정의해줘야 함을 배웠다. author라는 프로퍼티에는 id와 name 프로퍼티가 추가로 필요하니 다음과 같이 정의해보겠다. 그런데 위와 같이 작성할경우 author 프로퍼티의 변화가 생길경우 printAuthorInfo 메서드도 같이 수정해야하는 불편함이 있다. 이를 해결하기 위해 인덱스드 엑세스 방식을 적용할 수 있다.어떻게 적용할까?아래 사진처럼 Post 타입에 author 프로퍼티를 명시해줄 경우 id와 name을 정의받는 타입으로 정의할 수 있다. 이런식으로 ..