{"componentChunkName":"component---src-templates-blog-post-js","path":"/TypeScript/@types_typeRoots_and_types/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"9fdfe7b2-a976-59ba-91cc-08faf35e07b7","excerpt":"타입스크립트 공식문서에 compilerOptions들로 typeRoots와 types를 아래와같이 정의한다. If is specified, only packages under will be included. If is specified, only packages listed will be included. types에 선언된 패키지들을 typeRoots에 선언된 패키지 하위에서만 탐색할 것이라는 의미이다. 예를들어, node, core…","html":"

타입스크립트 공식문서에 compilerOptions들로 typeRoots와 types를 아래와같이 정의한다.

\n
\n

If typeRoots is specified, only packages under typeRoots will be included.

\n
\n
{\n   \"compilerOptions\": {\n\t   \"typeRoots\": [\n       \"../../node_modules/@types\",\n       \"../../typings\"\n     ],\n   }\n}
\n
\n
\n

If types is specified, only packages listed will be included.

\n
\n
{\n   \"compilerOptions\": {\n       \"types\" : [\"node\", \"core\"]\n   }\n}
\n

types에 선언된 패키지들을 typeRoots에 선언된 패키지 하위에서만 탐색할 것이라는 의미이다.

\n

예를들어, node, core 패키지들의 인터페이스를 node_modules/@types의 하위 폴더, 또 /typings의 하위 폴더에서만 탐색 하겠다는 것이다. @types하위 폴더에 존재하지 않으면 typings의 하위 폴더를 탐색한다. 더 구체적인 예시를 살펴보자.

\n
\n
\n

기존 방식은 project>core>types 경로에서 필요한 타입을 컴포넌트에 import하는 방식이었다.

\n
\n

index.ts

\n
\n
export interface StringKeyDict<T> {\n  [key: string]: T;\n}
\n
\n
\n

StringKeyDict 인터페이스를 사용하는 컴포넌트

\n
\n
import { StringKeyDict } from '../../../../../types/src/typings';\n\nselectedCategories: StringKeyDict = {};
\n
\n
\n

하지만 우리는 tsconfig compilerOptions의 types에 ‘core’패키지를 명시했다.

\n
\n

tsconfig.app.json

\n
\n
{\n   \"compilerOptions\": {\n\t   \"typeRoots\": [\n       \"../../node_modules/@types\",\n       \"../../typings\"\n     ],\n     \"types\": ['core']\n   }\n}
\n

즉, core에 선언된 인터페이스를 탐색하겠다는 의미이다. 그리고, 모든 폴더를 탐색하는 것이 아닌, typeRoots에 명시된 패키지들을 순차적으로(node_modules/@types => /typings)탐색 하며 타입을 찾을 것이다.

\n

project>typings>core core경로 하위에 index.d.ts파일을 선언한다.

\n
export declare global {\n  interface StringKeyDict<T> {\n    [key: string]: T;\n  }\n}
\n
\n

그렇기 때문에 특정 컴포넌트에서 StringKeyDict 타입을 명시할 때 StringDict가 선언되어있는 파일을 import할 필요가 없어졌다.

\n
//  import { StringKeyDict } from '../../../../../types/src/typings';\n//  코드 삭제\n\nselectedCategories: StringKeyDict = {};
\n
\n

이 방식을 사용함으로서 인터페이스를 매번 임포트해야하는 비용이 줄었다. 또한 직접 임포트하며 탐색하는 메모리 비용이 compilerOptions로 탐색하는 메모리 비용보다 적게 드는 것으로 알고있다(확실하지는 않다..)

\n

여러 타입을 관리하고 사용해야하는 큰 프로젝트에서는 좋은 경험이 될 것이다.

\n

\n
\n
\n
\n

참고 및 출처

\n\n
","frontmatter":{"title":"@types, typeRoots and types","date":"July 10, 2020"}}},"pageContext":{"slug":"/TypeScript/@types_typeRoots_and_types/","previous":{"fields":{"slug":"/Today I Learned/wrap_observably/"},"frontmatter":{"title":"Wrap Observably","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Algorithm/count_apples_and_oranges/"},"frontmatter":{"title":"count apples and oranges(사과와 오렌지)","category":"Algorithm","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}