Convention
TypeScript 컨벤션
올라핀테크 프론트엔드 프로젝트 내에서 지켜야하는 TypeScript 컨벤션을 서술합니다.
TypeScript 컨벤션
기본 설정 (tsconfig.json)
- Strict mode 반드시 활성화
target: ES2017 이상으로 정의
타입 vs 인터페이스
- 명시적으로 정한 바는 없음.
- 대체적으로 Zod 확장의 경우 타입(Type) 사용을 권장함.
- 컴포넌트 타입 또는 확장이 필요한 경우에만 인터페이스(Interface) 사용을 권장함.
// ✅ 타입 사용
export type SignInRequest = z.infer<typeof signInRequestSchema>
export type ContractStatus =
| '진행_없음'
| '계약_필요'
| '심사_중'
// ✅ 인터페이스 (확장이 필요한 경우)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}Type Import
- 타입 전용 import는
type키워드 사용 (Lint 설정으로 강제 필요)
// ✅ Good
import type { ReactNode } from 'react'
import type { SignInSuccessData } from '@/domain/auth/actions/sign-in/schema'
// ❌ Bad
import { ReactNode } from 'react'
import { SignInSuccessData } from '@/domain/auth/actions/sign-in/schema'Enum vs Union Type
- 금융 관련 도메인의 경우, 한글 이름의 enum 적극 사용 권장
- as const 또는 satisfies 사용을 통해 타입 안정성을 높임
// ✅ 한글 enum
export enum 계약문서_타입 {
계좌 = 'ACNT',
신분증 = 'IDNT',
사업자등록증 = 'BSSN',
법인등록증 = 'CORP',
} as const satisfies Record<string, SomeEnum>
export enum 계약상태 {
진행_없음 = 'NONE',
서명_필요 = 'NEED_SIGN',
심사_중 = 'AUDITING',
계약_완료 = 'COMPLETED',
// ...
} as const satisfies Record<string, SomeEnum>
// ✅ const object
export const 계약_유형 = {
신규계약: 'NEW_CONTRACT',
추가계약: 'ADDITIONAL_CONTRACT',
취소: 'CANCELLED',
// ...
} as constZod 스키마
- 타입 정의는 Zod 스키마에서 추론
import { z } from 'zod'
export const signInRequestSchema = z.object({
id: idSchema,
password: passwordSchema,
})
export type SignInRequest = z.infer<typeof signInRequestSchema>any 사용
@typescript-eslint/no-explicit-any: off- 필요한 경우
any사용 가능하지만 최소화