calendar2 님의 블로그

이전 조건부 타입에서 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을 정의받는 타입으로 정의할 수 있다. 이런식으로 ..

Promise - resolveJS를 사용하면 비동기 통신 작업을 위해 promise 객체를 사용하는 경우가 많다. 아래 간단한 promise 코드를 보자. 3초 뒤 숫자 20을 응답해주는 간단한 코드이다. 응답 값이 숫자 20이니까 이 값을 변경시켜보면 어떨까? 안타깝게도 응답 값은 숫자 20이지만 타입 정의를 하지 않아 response의 타입은 unknown으로 추론된다. 따라서, TS에서는 응답 값의 가공을 위해서는 타입 정의를 해줘야 한다. 위 코드처럼 Promise 객체에 number 타입을 지정해줌으로써 응답 값의 가공이 가능해졌다.Promise - reject그럼 이번에는 에러를 담당하는 reject를 살펴보자. reject에 경우에는 unknown 타입이 아닌 any 타입이다. 따라서, 따..

한 가지 클래스를 작성해보겠다. 각 요소가 숫자인 리스트 클래스를 정의했고 요소를 추가하는 push 메서드, 요소를 제거하는 pop 메서드, 현재 리스트를 출력하는 print 메서드를 정의했다.근데 여기서 각 요소가 숫자가 아닌 문자열인 리스트를 사용하고 싶다면 어떻게 될까?가장 대표적인 방법은 새롭게 StringList 클래스를 만들어 관리하는 방법이다. 하지만 이럴 경우 코드가 길어지고 중복되는 메서드가 발생하여 이후 관리가 더 어려워진다. 그래서 여기서도 제네릭 시스템을 이용하면 더 쉽게 클래스를 정의할 수 있다. NumberList라는 이름 자체를 List로 변경하고 제네릭 타입을 붙여 생성자와 메서드에서도 제네릭 타입으로 요소의 관리를 해주었다.이렇게 관리하니 따로 StringList 클래스 없..

타입 설정에서 제네릭 타입으로 더 유연하게 타입을 정의할 수 있었다. 타입을 정의할 때 인터페이스를 사용하기도 하는데 이때에도 제네릭 타입을 사용할 수 있다. 인터페이스 명 뒤에도 꺽쇠로 제네릭을 지정하고 사용할 때는 꺽쇠 위치에 원하는 타입을 넣어서 조합이 가능하다. 이를 잘 활용하면 하나의 인터페이스로도 유연하게 여러 타입을 사용할 수 있다.또한, 아래처럼 인덱스 시그니처 문법에도 적용하여 유연성을 높힐 수 있다.제네릭 인터페이스를 이용한 예시내용 자체는 간단하지만 잘 활용한다면 객체를 설계할 때 굉장히 유연하게 관리할 수 있다. 간단하게 유저 객체를 관리하는 예시를 보자. 유저는 학생과 개발자로 이뤄졌다고 가정하겠다. 1. 학생과 개발자 객체 정의하기 2. 두 객체를 관리할 유저 객체 정의하기 3...

앞서 정리한 제네릭 타입의 몇 가지 응용법을 살펴보자.다수의 타입 정의하기다음 코드를 보자. 입력받은 두 매개변수를 서로 스왑해주는 함수이다. 이때 두 매개변수의 타입이 다르면 어떻게 될까? 위 코드처럼 에러가 발생한다. 제네릭 타입 T의 경우 두 매개변수가 동일해야 하기 때문이다. 따라서, 이 경우에는 다음과 같이 다수의 제네릭 타입을 사용해 해결할 수 있다.배열의 인덱스 값을 반환하는 경우또 아래 사진을 보자. 이번 함수는 입력받은 매개변수의 0번 인덱스 값을 반환하는 함수이다. 이를 역시 제네릭 타입으로 작성해주면 다음과 같은 에러가 발생한다. 입력받을 매개변수가 배열이라고 명확히 설정되어 있지 않기 때문에 data의 0번 인덱스로 접근하는 것이 불가능하다. 해결방법은 상당히 간단하다. 매개변수의 ..