<div id="readability-page-1" class="page"><div><h3 id="1-excess-properties-in-function">1. excess properties in function</h3>
<code>users</code>를 맵핑한다고 가정하자. 아래와같이 <code>age</code>라는 새로운 키값을 추가했지만 타입스크립트는 에러를 뱉지 않는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c7b9b7c2-71b7-41cb-9d9c-88254d6704b3/image.png">
타입스크립트는 객체 타입에 대하여 excess property checking을 수행한다. 하지만 map의 경우 콜백으로 새로운 객체를 생성한다. 그렇기 때문에 런타임에 문제가 없다면 excess property checking 수행하지 않는다. 
추가적인 검증을 위해 return 타입을 추가해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/348e0300-1dc4-4e24-8f6d-c3fb23bc6e7b/image.png">
return 타입을 <code>User</code>로 지정하면 excess property checking을 수행하게 된다. 
혹은 <code>satisfies</code>를 추가해주면 된다. 
<h3 id="2-objectkeys">2. Object.keys</h3>
그렇다면 이런 경우는 어떨까
<img src="https://velog.velcdn.com/images/dongha1992/post/f1ebfb35-a60d-49e6-98eb-90ac4faf9da3/image.png">
<code>user</code>를 <code>Object.keys</code>한 값인 <code>keys</code>가 <code>["id", "name"]</code> 이길 예상하지만 타입스크립트는 <code>keys</code>를 <code>string[]</code> 으로 추론하고 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/17d20003-d067-4ee4-aaa0-ac61a76f8152/image.png">
즉, 아래처럼 키값으로 객체에 접근하는 것이 불가능한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c7afb52f-fe85-44be-a74d-531c01ba9c98/image.png">
그 이유는 새로 반환될 객체가 런타임 환경에서 달라질 수도 있기 때문에 타입스크립트가 "키"를 보장하지 못하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/918bc715-f597-4db3-a71c-2f0ea82bbbc3/image.png">
<h3 id="3-iterating-over-object">3. iterating over object</h3>
위 상항에서 순회를 한다고 가정하자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/f8062055-0ec0-470e-91a9-5d88a7e089d7/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/2a7cec26-319b-48f9-be6d-c82181dc7724/image.png">
인덱스 시그니처를 찾을 수 없다는 에러가 나온다. <code>keyof</code>로 간단하게 해결 할 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e3e7b740-2445-4b68-b8e5-b2f00008b6f6/image.png">
아니면 <code>Record&lt;string, any&gt;</code>로 타입 체크를 루즈하게 할 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c513771a-2734-4f6b-b2c4-ea5aaf4f504e/image.png">
<h3 id="4-function-parameters">4. function parameters</h3>
아래와 같은 이벤트 함수가 있다고 가정하자
<img src="https://velog.velcdn.com/images/dongha1992/post/05aa64b3-8a29-4511-acf2-4bf650ec0a91/image.png">
<code>listenToEvent</code> 함수는 callback 인자를 받는데 인자는 다음과 같이 존재한다. 
빈값이거나 
<img src="https://velog.velcdn.com/images/dongha1992/post/c626318f-5c01-4920-991f-72d2b06fc721/image.png">
event만 있거나
<img src="https://velog.velcdn.com/images/dongha1992/post/42ab4e69-c3ab-4422-85cf-0dc4e24dc630/image.png">
event과 x,y 값도 있거나
<img src="https://velog.velcdn.com/images/dongha1992/post/8f0c8233-c8a2-451f-9919-41d30b860bf8/image.png">
거기에 id 까지 올 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ee293459-e386-40e1-acc4-0ba34aa96c2b/image.png">
위와 같은 상황에서 <code>CallbackType</code>을 어떻게 지정해야 모든 경우의 타입을 검증할 수 있을까
가장 먼저 생각나는 것은 아래처럼 모든 경우를 유니언 타입으로 만드는 것이다
<img src="https://velog.velcdn.com/images/dongha1992/post/3c9700ee-bed9-47ee-9163-debe9a5eaa10/image.png">
하지만 유니언 타입으로 하게 되면 콜백이 (event)와 (event, x, y) 인 경우에서 타입 에러가 나온다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/df3c68b0-bed8-4886-b9d0-1ea587f179f2/image.png">
<code>CallbackType</code>이 유니언 타입으로 정의되어 있을 때, 타입스크립트는 이 타입을 하나의 함수 타입으로 취급하지 않고 여러 개의 함수 타입 중 하나로 취급한다. 
<code>CallbackType</code>을 아래와 같이 하나의 타입으로만 정의하자. 그럼 모든 테스트가 통과되는 것을 알 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/48590607-0826-4fd6-8d18-3915c45c691d/image.png">
이는 타입스크립트의 타입 체크가 선언 시점에서 이루어지기 때문에 가능하다. 그렇기 때문에 타입스크립트는 실행시점에 어떤 인자를 사용할 것인지는 관심이 없다
더 쉬운 예제를 살펴보자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/4db3fa9f-998a-414f-9642-8aa1752878e3/image.png">
위와 같이 <code>map</code>함수를 사용한다고 했을때, <code>map</code> 은 <code>value</code>와 <code>index</code>, <code>array</code> 를 인자로 갖는다.
<img src="https://velog.velcdn.com/images/dongha1992/post/f6225139-9a36-403e-b9bd-2ad67e4ccf4c/image.png">
하지만 실제로 <code>map</code>을 사용할 때는 모든 인자를 사용하지 않는다. 즉, 함수가 어떤 인자를 받을 수 있다는 것은 그 인자를 가지고 있어야 한다는 뜻이 아니다.
<h3 id="5-union-of-functions-with-object-parameters">5. union of functions with object parameters</h3>
각각 다른 obj 를 인자를 받는 두 함수 <code>logId</code>와 <code>logName</code>이 있다. 이를 하나의 배열 <code>loggers</code>에 담았다.
<img src="https://velog.velcdn.com/images/dongha1992/post/4945ab57-eb85-4c65-b9d6-8a3415364cbf/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/bf49b634-4df3-4f35-88e2-cb2777a9186e/image.png">
그리고 이를 <code>logAll</code> 이라는 <code>loggers</code>를 순회하는 함수에서 사용한다고 했을 때, <code>logAll</code>의 인자의 타입은 어떻게 해야할까
<img src="https://velog.velcdn.com/images/dongha1992/post/e666494f-0b04-4179-863d-198b4b64ada8/image.png">
<code>loggers</code>의 콜백인 <code>func</code>는 <code>logId</code>와<code>logName</code>의 유니언 타입으로 추론된다. 
그래서 <code>obj</code> 인자를 유니언 타입으로 넣게 되면
<img src="https://velog.velcdn.com/images/dongha1992/post/7320ac00-8c18-418a-97b8-165d2971ef1d/image.png">
<code>func</code>의 타입은 아래와 같이 합쳐진다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/48ded97d-221c-45ba-ae38-a1929e46532f/image.png">
이유는 <code>logAll</code>이 순회하며 함수을 실행할 때, 함수의 인자엔 인자가 될 모든 가능성이 있는 인자가 다 있어야 하기 때문이다. 
쉽게 생각하여 유니언으로 인자를 받는 경우 아래처럼 타입 좁히기를 해야 하는 경우다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2ed534d9-6c3e-4c6d-a615-3772654050a8/image.png">
반대로 모든 함수를 호출하는 것이므로 <code>&amp;</code>로 인자를 합쳐서 받아야 한다. (집합의 개념으로)
<img src="https://velog.velcdn.com/images/dongha1992/post/71dcffdc-317e-4eef-a9ac-7c268eae3d1e/image.png">
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. excess properties in function
users를 맵핑한다고 가정하자. 아래와같이 age라는 새로운 키값을 추가했지만 타입스크립트는 에러를 뱉지 않는다. 
타입스크립트는 객체 타입에 대하여 excess property checking을 수행한다. 하지만 map의 경우 콜백으로 새로운 객체를 생성한다. 그렇기 때문에 런타임에 문제가 없다면 excess property checking 수행하지 않는다. 
추가적인 검증을 위해 return 타입을 추가해야 한다. 
return 타입을 User로 지정하면 excess property checking을 수행하게 된다. 
혹은 satisfies를 추가해주면 된다. 
2. Object.keys
그렇다면 이런 경우는 어떨까
user를 Object.keys한 값인 keys가 ["id", "name"] 이길 예상하지만 타입스크립트는 keys를 string[] 으로 추론하고 있다. 
즉, 아래처럼 키값으로 객체에 접근하는 것이 불가능한다.
그 이유는 새로 반환될 객체가 런타임 환경에서 달라질 수도 있기 때문에 타입스크립트가 "키"를 보장하지 못하는 것이다. 
3. iterating over object
위 상항에서 순회를 한다고 가정하자. 
인덱스 시그니처를 찾을 수 없다는 에러가 나온다. keyof로 간단하게 해결 할 수 있다. 
아니면 Record<string, any>로 타입 체크를 루즈하게 할 수 있다. 
4. function parameters
아래와 같은 이벤트 함수가 있다고 가정하자
listenToEvent 함수는 callback 인자를 받는데 인자는 다음과 같이 존재한다. 
빈값이거나 
event만 있거나
event과 x,y 값도 있거나
거기에 id 까지 올 수 있다. 
위와 같은 상황에서 CallbackType을 어떻게 지정해야 모든 경우의 타입을 검증할 수 있을까
가장 먼저 생각나는 것은 아래처럼 모든 경우를 유니언 타입으로 만드는 것이다
하지만 유니언 타입으로 하게 되면 콜백이 (event)와 (event, x, y) 인 경우에서 타입 에러가 나온다. 
CallbackType이 유니언 타입으로 정의되어 있을 때, 타입스크립트는 이 타입을 하나의 함수 타입으로 취급하지 않고 여러 개의 함수 타입 중 하나로 취급한다. 
CallbackType을 아래와 같이 하나의 타입으로만 정의하자. 그럼 모든 테스트가 통과되는 것을 알 수 있다. 
이는 타입스크립트의 타입 체크가 선언 시점에서 이루어지기 때문에 가능하다. 그렇기 때문에 타입스크립트는 실행시점에 어떤 인자를 사용할 것인지는 관심이 없다
더 쉬운 예제를 살펴보자. 
위와 같이 map함수를 사용한다고 했을때, map 은 value와 index, array 를 인자로 갖는다.
하지만 실제로 map을 사용할 때는 모든 인자를 사용하지 않는다. 즉, 함수가 어떤 인자를 받을 수 있다는 것은 그 인자를 가지고 있어야 한다는 뜻이 아니다.
5. union of functions with object parameters
각각 다른 obj 를 인자를 받는 두 함수 logId와 logName이 있다. 이를 하나의 배열 loggers에 담았다.
그리고 이를 logAll 이라는 loggers를 순회하는 함수에서 사용한다고 했을 때, logAll의 인자의 타입은 어떻게 해야할까
loggers의 콜백인 func는 logId와logName의 유니언 타입으로 추론된다. 
그래서 obj 인자를 유니언 타입으로 넣게 되면
func의 타입은 아래와 같이 합쳐진다. 
이유는 logAll이 순회하며 함수을 실행할 때, 함수의 인자엔 인자가 될 모든 가능성이 있는 인자가 다 있어야 하기 때문이다. 
쉽게 생각하여 유니언으로 인자를 받는 경우 아래처럼 타입 좁히기를 해야 하는 경우다. 
반대로 모든 함수를 호출하는 것이므로 &로 인자를 합쳐서 받아야 한다. (집합의 개념으로)
참고 : total typescript

Total Typescript - callback

댓글