docs(object-type): 구체적인 타입 예제 추가

Author: 1ilsang

_posts/js/object-type/docs.mdx

@@ -4,6 +4,7 @@ description: '객체 타입의 이해와 문자열 리터럴 확장하기'
 tags: ['typescript', 'object', 'type']
 coverImage: 'cover.webp'
 date: '2025-01-19T10:45:40.928Z'
+updatedAt: '2025-02-07T16:51:42.899Z'
 ---
 
 ![cover](cover.webp 'cover')
@@ -49,69 +50,103 @@ type StringHint = 'foo' | 'bar' | (string & {}) // foo, bar 힌트가 보이면
 
 ## string & \{}
 
-`string & {}`는 `string`과 `{}`의 교집합이다. <u>`{}`는 객체의 최상위 타입이므로(후술)</u>, `string`과 교집합을 구하면 결국 `string` 타입과 동일하게 된다.
+```ts
+type Test = 'foo' | 'bar' | string extends string ? true : false; // true
+type Test = 'foo' | 'bar' | (string & {}) extends string ? true : false; // true
+```
+
+`string & {}`는 `string`과 `{}`의 교집합이다.
+
+<u>`{}`는 대부분의 타입을 포함하는 타입이므로(후술)</u>, `string`과 교집합을 구하면 결국 `string` 타입과 동일하게 동작하게 된다.
 
-그런데 문자열 리터럴(`"foo", "bar"`)은 `string`의 서브셋이지 `string & {}`의 서브셋이 아니다(!!).
+그런데 문자열 리터럴(`"foo", "bar"`)은 `string`의 서브셋이지 `string & {}`의 서브셋이 아니다(!).
 
-즉, 타입스크립트 컴파일러는 `string & {}`를 <u>더 구체적인 타입으로 간주</u>하여 문자열 리터럴(`"foo", "bar"`)과 `string & {}`를 `string`으로 합치지 않고 구분하여 유니온 타입으로 표현하게 된다.
+`string & {}`이 <u>구체적인 타입</u>인 `string`으로 좁혀지지 않았기 때문에 타입스크립트 컴파일러는 해당 타입을 문자열 리터럴과 다른 타입으로 간주하게 된다.
 
 이러한 특성 때문에 우리는 문자열 리터럴을 사용하면서 문자열을 확장할 수 있게 된다.
 
 > 관련 내용은 타입스크립트 이슈([Literal String Union Autocomplete #29729](https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939))에서 확인할 수 있다.
 
-
 ### 구체적인 타입
 
-타입스크립트에서는 타입을 "구체적으로 나타내는" 방식이 있다. 이는 타입스크립트의 타입 시스템이 [구조적 서브 타이핑](/posts/typescript-subtyping#%EA%B5%AC%EC%A1%B0%EC%A0%81-%EC%84%9C%EB%B8%8C-%ED%83%80%EC%9D%B4%ED%95%91%EC%9D%B4%EB%9E%80)을 따르기 때문이다.
+타입스크립트의 타입 시스템은 [구조적 서브 타이핑](/posts/typescript-subtyping#%EA%B5%AC%EC%A1%B0%EC%A0%81-%EC%84%9C%EB%B8%8C-%ED%83%80%EC%9D%B4%ED%95%91%EC%9D%B4%EB%9E%80)을 따른다. 그렇기에 각 타입을 구조적으로 비교한다.
 
-타입스크립트는 타입을 구조적으로 비교한다. 이때 교집합(`&`)을 사용하면 더 구체적인 타입으로 간주하게 된다.
+이때 교집합(`&`)을 사용하면 더 구체적인 타입으로 나타낼 수 있다.
 
 ```ts
 type A = { a: string };
 type B = { a: 'A' | 'B'; b: number };
-type C = A & B; // { a: 'A' | 'B', b: number };
+type ANB = A & B; // { a: 'A' | 'B', b: number };
+```
+
+구조적 서브 타이핑에 익숙하지 않으면 위의 예에서 "중첩"만 생각해 중첩되는 `'a'` 프로퍼티만 가져와 `A & B = { a: 'A' | 'B' }`로 생각할 수 있다. 하지만 <u>`A & B`의 의미는 `A`와 `B` 타입 모두를 만족하는 타입</u><ExternalAnchor href="https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types" />을 의미한다.
+
+집합적 관점에서 생각해보자. `x ∈ A ∩ B`일 필요충분조건은 `x ∈ A` 혹은 `x ∈ B` 이다<ExternalAnchor href="https://ko.wikipedia.org/wiki/%EA%B5%90%EC%A7%91%ED%95%A9" />.
+
+> \{★, ●}, \{★, ●, ◆}의 교집합은 \{★, ●}이다. 교집합은 부모와 같아질 수 있다.
+
+```ts
+type Test1 = ANB extends A ? true : false; // true
+type Test2 = ANB extends B ? true : false; // true
 ```
 
-구조적 서브 타이핑에 익숙하지 않으면 위의 예에서 "교집합"만 생각해 중첩되는 `'a'` 프로퍼티만 가져와 `A & B = { a: 'A' | 'B' }`로 생각할 수 있다. 하지만 <u>`A & B`의 의미는 `A`와 `B`의 모든 프로퍼티를 만족하는 타입</u>을 의미한다.
+그렇다면 위의 논리로 `ANB`를 살펴보자. `ANB`는 `A`와 `B`의 구체적인 타입(교집합)이므로 `ANB`는 `A` 혹은 `B`로 간주될 수 있어야 한다.
 
-모든 타입, 프로퍼티를 만족한다는 것은 결국 가장 구체적인(작은) 타입을 만족한다는 것이다.
+`A & B` 타입이 `A` 타입이 되려면 `{ a: string }`을 만족해야 하며 `B` 타입이 되기 위해선 `{ a: 'A' | 'B', b: number }`를 만족해야 한다.
 
-따라서 `A`타입의 `'a'` 프로퍼티(`string`)와 `B`타입의 `'a'` 프로퍼티(`'A' | 'B'`)를 만족하는 구체적인 타입인 문자열 리터럴 타입(`'A' | 'B'`)과 `B` 타입의 `'b'` 프로퍼티(`number`)를 가져오는 것이다.
+이를 구조적으로 표현하기 위해서 `A & B`는 `A`와 `B`의 모든 속성을 가져오고 속성이 겹친다면 가장 좁은 타입을 적용하게 된다.
 
-아래 예제를 보면 명확해진다.
+> \{ a: string, b: number } 타입은 A는 만족하지만 B는 만족하지 않기 때문.
+
+아래 예제를 보면 더 명확해진다.
 
 ```ts
-const a = { a: 'A' };
-const aa = { a: 'A', b: 1 };
+type A = { a: string };
+type B = { a: 'A' | 'B'; b: number };
+type ANB = A & B; // { a: 'A' | 'B', b: number };
+
+const a = { a: 'Astring' };
+const aa = { a: 'Astring', b: 1 };
 // 타입 B의 a 프로퍼티가 'A' | 'B' 타입이므로 더 좁은 타입으로 강제 지정해줘야 함.
 const b = { a: 'B' as 'A' | 'B', b: 2 };
 const bb = { a: 'B' as 'A' | 'B', b: 2, c: 'ddd' };
 
 const goA = (param: A) => console.log(param);
 const goB = (param: B) => console.log(param);
-const goC = (param: C) => console.log(param);
+const goANB = (param: ANB) => console.log(param);
 
 goA(a); // OK
 goA(aa); // OK. 타입에 없는 b 프로퍼티가 추가되어도 a가 있으므로 "구조적으로" 상관없음.
 
 goB(b); // OK
 goB(bb); // OK
 
-goC(a); // Error. b 프로퍼티가 없음.
-goC(aa); // Error. a 프로퍼티의 타입이 구조적으로 맞지 않음(넓음).
-goC(b); // OK
-goC(bb); // OK. c 프로퍼티가 추가되어도 a, b가 있으므로 "구조적으로" 상관없음.
+goANB(a); // Error. b 프로퍼티가 없음.
+goANB(aa); // Error. a 프로퍼티의 타입이 구조적으로 맞지 않음(넓음).
+goANB(b); // OK
+goANB(bb); // OK. c 프로퍼티가 추가되어도 a, b가 있으므로 "구조적으로" 상관없음.
 ```
 
-구조적 서브 타이핑의 논리에 따라 `string & {}`는 `string`을 의미하여도 `string`보다 더 구체적인 "타입"으로 정의된다.
+요구하는 타입의 구조만 만족한다면 그 외의 속성이 있어도 타입 에러가 발생하지 않는 것을 확인할 수 있다.
 
-이는 `string`과는 다른 타입이므로 문자열 리터럴과 유니온 타입을 지정할 때 `string`으로 잡아먹히지 않게 된다.
+따라서 `ANB`는  `A`의 모든 속성과 `B`의 모든 속성을 가져온 타입이 된다.
+
+```ts
+type Test1 = 'foo' extends string ? true : false; // true
+type Test2 = 'foo' & string extends string ? true : false; // true
+type Test3 = 'foo' & {} extends string ? true : false; // true
+type Test4 = string & {} extends string ? true : false; // true
+```
+
+위에서 다뤘던 문자열 리터럴 `'foo'`는 `string`의 구체적인 타입이다. 그렇기 때문에 문자열 리터럴 `'foo'`가 `string`으로 간주되어도 문제가 없다(더 넓은 타입).
+
+이러한 구조적 서브 타이핑의 논리에 따라 `string & {}`는 실질적으로 `string`과 동일한 의미여도 `string`보다 더 구체적인 "타입"으로 정의된다.
 
-관련 내용이 더 궁금하다면 [Type Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)을 참고.
+이는 `string`과는 다른 타입이므로 문자열 리터럴과 유니온 타입을 지정할 때 `string`으로 잡아먹히지 않게 된다.
 
 ## Object vs object vs \{}
 
-앞에서 "`{}`는 객체의 최상위 타입"이라고 했다. 그렇다면 객체의 최상위 타입인 `Object`, `object`, `{}`는 어떤 차이가 있을까?
+앞에서 "`{}`는 대부분의 타입을 포함하는 타입"이라고 했다. 그렇다면 객체의 최상위 타입인 `Object`, `object`, `{}`는 어떤 차이가 있을까?
 
 이를 자세히 알기 위해선 자바스크립트의 타입을 이해해야 한다.
 
@@ -205,6 +240,8 @@ const obj7: object = []; // OK.
 
 `object` 타입은 [원시 타입이 아닌 모든 값을 나타낸다](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#object-type).
 
+> object 타입은 타입스크립트 2.2 버전에서 추가되었다.
+
 위에서 살펴본 자바스크립트의 타입을 기준으로 보면 원시 타입이 아닌 모든 값은 곧 객체 타입이다. 따라서 `object` 타입은 원시 타입을 제외한 모든 객체 타입을 나타낸다.
 
 ### \{\} 타입
@@ -225,7 +262,7 @@ const obj7: {} = []; // OK.
 
 > 타입스크립트 공식 FAQ - [#Primitives are \{}, and \{} Doesn't Mean object](https://github.com/microsoft/TypeScript/wiki/FAQ#primitives-are---and---doesnt-mean-object).
 >
-> 해당 FAQ를 보면 [원시 타입](/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90)은 `{}`이며 `{}`는 객체 타입만을 의미하지 않는다고 한다.
+> 해당 FAQ를 보면 [원시 타입](/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90)은 `{}`이며 `{}`는 object 타입을 의미하지 않는다고 한다.
 
 ```ts
 const obj1: {} = { a: 1 };
@@ -274,11 +311,19 @@ type AAA = 'A' | 'B' | (string & object);
 
 각 타입을 비교하면서 객체에 대한 이해도가 높아질 수 있었다.
 
+```ts
+type EmptyObject = Record<string, never>; // {} 대신 사용.
+```
+
+실제로 객체 타입을 정의할 때에는 `Record` 타입과 같은 유틸리티 타입을 사용하는 것이 좋다. 이는 타입스크립트의 타입 추론을 돕고, 코드의 가독성을 높여준다.
+
 이 글이 흥미로웠다면 [Object.keys()는 왜 string[] 타입일까?](/posts/typescript-subtyping)도 읽어보길 추천한다. 이 글은 타입스크립트의 구조적 서브 타이핑에 대한 이해를 돕는다.
 
 ## 참고
 
 - https://stackoverflow.com/questions/18961203/any-vs-object
 - https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
 - [알랑말랑 암묵적 형변환 말랑말랑 이해하기](/posts/implicit-coercion)
-
+- https://www.reddit.com/r/typescript/comments/1e61bla/demystifying_intersection_and_union_types_in/
+- https://ivov.dev/notes/typescript-and-set-theory
+- https://blog.hwahae.co.kr/all/tech/9954

src/features/post/information/InformationContainer.tsx

@@ -1,8 +1,7 @@
 import type { FunctionComponent } from 'react';
 import type { PostType } from '~/posts/models';
-import { ProfileSection } from './ProfileSection';
 import HashTag from '~/shared/components/HashTag';
-import { UpdatedDate } from './UpdatedDate';
+import { ProfileSection } from './ProfileSection';
 import { PublishedDate } from './PublishedDate';
 
 type Props = {
@@ -28,8 +27,7 @@ export const InformationContainer: FunctionComponent<Props> = ({
         ))}
       </section>
       <section>
-        <PublishedDate date={date} />
-        {updatedAt && <UpdatedDate date={updatedAt} />}
+        <PublishedDate date={date} updatedDate={updatedAt} />
       </section>
     </>
   );

src/features/post/information/PublishedDate.tsx

@@ -1,17 +1,25 @@
-import type { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import DateFormatter from '../../shared/components/DateFormatter';
 
 interface PublishedDateProps {
   date: string;
+  updatedDate?: string;
 }
 
 export const PublishedDate: FunctionComponent<PublishedDateProps> = ({
   date,
+  updatedDate,
 }) => {
   return (
     <div className="inline text-date-gray">
-      Published <DateFormatter type="iso" date={date} />
+      <DateFormatter type="iso" date={date} before="Published" />
+      {updatedDate && (
+        <>
+          <span className="mx-1">·</span>
+          <DateFormatter type="iso" date={updatedDate} before="Updated" />
+        </>
+      )}
     </div>
   );
 };

src/features/post/information/UpdatedDate.tsx

@@ -7,20 +7,28 @@ type DateType = 'iso' | 'default';
 
 interface DateFormatterProps {
   date: Date | number | string;
+  before?: string;
   type?: DateType;
   format?: string;
   className?: string;
 }
 
 const DateFormatter: FunctionComponent<DateFormatterProps> = memo(
-  ({ date, type = 'default', format, className }) => {
+  ({ date, type = 'default', format, className, before }) => {
     const dateTime =
       type === 'iso' ? parseISO(String(date)) : formatDate(date, format);
 
     return (
-      <time className={className} dateTime={dateTime} suppressHydrationWarning>
-        {dateTime}
-      </time>
+      <>
+        {before && <span className="mr-1">{before}</span>}
+        <time
+          className={className}
+          dateTime={dateTime}
+          suppressHydrationWarning
+        >
+          {dateTime}
+        </time>
+      </>
     );
   },
 );

src/features/shared/components/DateFormatter.tsx

@@ -17,7 +17,22 @@ const ImageHorizonWrap: FunctionComponent<{
   );
 };
 
+const ExternalAnchor: FunctionComponent<{ href: string }> = ({ href }) => {
+  return (
+    <a
+      className="underline-highlight-fade relative top-[0.1rem] px-0.25"
+      title={href}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      ⎋
+    </a>
+  );
+};
+
 /** MDX 내에서 바로 사용하는 컴포넌트 */
 export const MDXSharedComponents = {
   ImageHorizonWrap,
+  ExternalAnchor,
 };