타입스크립트 인덱스

index.ts를 통해 얻고 싶은 장점

//BAD
import User from './models/User';
import Stock from './models/Stock';

//GOOD
import { User, Stock } from './models/';

index.ts로 같은 디렉토리의 내용들을 인덱싱해서 호출하기 편하고 타입추론도 당연히 가능해야 한다.

어제 겪은 문제 상황

//index.ts
export * as User from './User';
export * as Stock from './Stock';

import { User, Stock } from './models/';
console.log(instanceof User) // expected User, but got Object
//console.log(User)
User {
    default: User
}

1번 케이스 (export default만 있는 경우)

//User.ts
export default class User;

//Stock.ts
export default class Stock;

//index.ts
export { default as User } from './User';
export { default as Stock } from './Stock';

//another file
import {User, Stock, StockEnum} from './models/index'

명시적으로 default를 import 한다.

2번 케이스 (export default와 export가 섞인 경우)

//User.ts
export default class User;

//Stock.ts
export default class Stock;
export enum StockEnum;

//index.ts
export { default as User } from './User';
export * from './Stock';
export { default as Stock } from './Stock';

//another file
import {User, Stock, StockEnum} from './models/index'

index.ts에서 export default와 export를 둘다 제어한다.

export가 분명히 드러나게 해보면

export를 여러개 작성하기보단 하나로 묶으면?

//index.ts
import User from './User';
import Stock, { StockEnum } from './Stock';

export { User, Stock, StockEnum };

//another file
import {User, Stock, StockEnum} from './models/index'

그럼 이건 어떨까?

import User from './User';
import Stock, { StockEnum } from './Stock';

export default { User, Stock, StockEnum };

//another file
import models from './models/index'
const user = new models.User();

default 하나에 모든게 묶여있기 때문에 User만 가져다 쓰는 것들이 제한되어서 index.ts에 걸맞는 용도는 아닌 듯 하다.

+2023-05-02

index.ts 로 묶는 경우가 흔하지 않고 그럴 필요도 많지 않은 듯하다.

default export 는 크게 필요한 경우가 없는 것 같다.