SHIN
TypeScript 실전 팁 10선
10편같은 이름의 인터페이스를 여러 번 선언하면 자동으로 합쳐집니다.
interface User {
id: number
name: string
}
interface User {
email: string
}
// 결과: { id: number; name: string; email: string }
const user: User = { id: 1, name: '홍', email: 'hong@example.com' }type 별칭은 병합이 불가능하지만, interface는 가능합니다. 라이브러리 타입 확장에 유용합니다.
외부 라이브러리 타입을 직접 수정하지 않고 확장할 수 있습니다.
// src/types/express.d.ts
import { User } from './user'
declare global {
namespace Express {
interface Request {
user?: User
requestId: string
}
}
}
// 미들웨어에서
app.use((req, res, next) => {
req.user = getCurrentUser() // ✅ 타입 오류 없음
req.requestId = generateId()
next()
})// src/types/next-auth.d.ts
import 'next-auth'
declare module 'next-auth' {
interface Session {
user: {
id: string
role: 'admin' | 'user'
name?: string | null
email?: string | null
}
}
interface User {
role: 'admin' | 'user'
}
}
declare module 'next-auth/jwt' {
interface JWT {
role: 'admin' | 'user'
}
}// src/types/global.d.ts
declare global {
interface Window {
gtag: (command: string, ...args: any[]) => void
dataLayer: any[]
}
}
// 사용
window.gtag('event', 'page_view') // ✅// src/types/env.d.ts
declare global {
namespace NodeJS {
interface ProcessEnv {
NODE_ENV: 'development' | 'production' | 'test'
DATABASE_URL: string
NEXTAUTH_SECRET: string
NEXT_PUBLIC_SITE_URL: string
// 선택적 변수
ANALYTICS_ID?: string
}
}
}
// 이제 process.env.DATABASE_URL은 string | undefined 아닌 string
const url: string = process.env.DATABASE_URL // ✅라이브러리 타입 정의에 버그가 있을 때 모듈 보강으로 임시 수정합니다.
// 잘못된 타입을 가진 라이브러리 수정
declare module 'some-library' {
interface Options {
timeout: number // 기존에는 없던 필드 추가
onError?: (err: Error) => void // 잘못된 타입 수정
}
}| 상황 | 선택 |
|---|---|
| 외부 라이브러리 확장 | interface (병합 가능) |
| 유니온 타입 | type |
| 튜플 타입 | type |
| 함수 타입 | type 또는 interface |
| 클래스 구현체 | interface |
| 단순 객체 형태 | 둘 다 가능 |
모듈 보강은 @types 패키지를 직접 수정하거나 라이브러리를 fork하지 않고도 타입 문제를 해결할 수 있는 깔끔한 방법입니다.