TypeScript를 작성하다 보면 계속 타입을 명시해야한다.

이를 thrid-party 방식으로 모듈화한다면 ?!

😇 편안~

1. src/@types/index.d.ts 경로의 파일 만들기

   • .d.ts 는 모듈 선언 파일이라고 이해하면 좋을 듯

2. tsconfig.json 파일 수정

   "compilerOptions": {
   	// ...
   	"typeRoots": ["./node_modules/@types", "./@types"],
   }
   

3. 코드 작성

   declare module "@types" {
     type RootStackParamList = {
       Login: undefined;
       HomeScreen: undefined;
     };
   
     type HomeStackParamList = {
       Home: undefined;
       Campaign: undefined;
       GamePlay: undefined;
       Ranking: undefined;
     };
   }
   

   • @types 모듈을 export 하겠다는 의미이다.
   • 절대경로로 import 할 수 있다.
   • 진짜 thrid-party 모듈 를 만들고 싶으면 각 폴더 별로 namespace 만들어서...

4. 사용 하기

   알아서 잘 가져온다!

   import { StackNavigationProp } from '@react-navigation/stack';
   **import { RootStackParamList } from '@types';** 
   
   interface Props {
       navigation: StackNavigationProp<**RootStackParamList**, 'HomeScreen'>;
   }
   

5. index.d.ts 파일 분리하기

   

   PinPoint.d.ts 파일 만들어서 똑같이 declare하면 된다.

   **declare module "@types"** {
       type PinPoint = {
           id: string,
           name: string,
           imgs: [string],
           latitude: float,
           longitude: float,
           updateTime: dateTime,
   
           quiz: {
               text: string,
               type: int,
               choices: [string],
               answer: string,
           },
           comments: [{
               id: string,
               userId: string,
               text: string,
               imgs: [string]
           }]
       }
   }