메인 μ½˜ν…μΈ λ‘œ κ±΄λ„ˆλ›°κΈ°
TypeScript의 νƒ€μž… 체크 μ˜΅μ…˜μ€ μ½”λ“œμ˜ μ•ˆμ •μ„±μ„ κ²°μ •ν•©λ‹ˆλ‹€. SonamuλŠ” strict λͺ¨λ“œλ₯Ό 기본으둜 ν™œμ„±ν™”ν•˜μ—¬ μ΅œλŒ€ν•œμ˜ νƒ€μž… μ•ˆμ •μ„±μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

Strict λͺ¨λ“œ

SonamuλŠ” λͺ¨λ“  strict μ˜΅μ…˜μ„ ν™œμ„±ν™”ν•©λ‹ˆλ‹€.
{
  "compilerOptions": {
    "strict": true,                          // λͺ¨λ“  strict μ˜΅μ…˜ ν™œμ„±ν™”
    "noImplicitAny": true,                   // any νƒ€μž… λͺ…μ‹œ ν•„μš”
    "strictNullChecks": true,                // null/undefined 엄격 체크
    "strictFunctionTypes": true,             // ν•¨μˆ˜ νƒ€μž… 엄격 체크
    "strictBindCallApply": true,             // bind/call/apply 엄격 체크
    "strictPropertyInitialization": true,    // 클래슀 ν”„λ‘œνΌν‹° μ΄ˆκΈ°ν™” ν•„μš”
    "noImplicitThis": true,                  // this νƒ€μž… λͺ…μ‹œ ν•„μš”
    "alwaysStrict": true                     // 'use strict' μžλ™ μΆ”κ°€
  }
}
strict: trueλŠ” μœ„μ˜ λͺ¨λ“  μ˜΅μ…˜μ„ ν•œ λ²ˆμ— ν™œμ„±ν™”ν•˜λŠ” 단좕 μ„€μ •μž…λ‹ˆλ‹€.

Strict μ˜΅μ…˜ 상세

any νƒ€μž… λͺ…μ‹œ ν•„μš”

κΈ°λŠ₯:
  • νƒ€μž…μ„ μΆ”λ‘ ν•  수 없을 λ•Œ anyλ₯Ό μ•”λ¬΅μ μœΌλ‘œ μ‚¬μš©ν•˜μ§€ λͺ»ν•˜λ„둝 λ°©μ§€
μ˜ˆμ‹œ:
// ❌ μ—λŸ¬ λ°œμƒ
function log(message) {
  //         ^^^^^^^ Parameter 'message' implicitly has an 'any' type
  console.log(message);
}

// βœ… μ˜¬λ°”λ₯Έ μ½”λ“œ
function log(message: string) {
  console.log(message);
}

// βœ… μ œλ„€λ¦­ μ‚¬μš©
function log<T>(message: T) {
  console.log(message);
}
νƒ€μž…μ„ λͺ…μ‹œν•˜κΈ° μ–΄λ €μš΄ 경우 unknown을 μ‚¬μš©ν•˜μ„Έμš”. any보닀 μ•ˆμ „ν•©λ‹ˆλ‹€.

μΆ”κ°€ νƒ€μž… 체크 μ˜΅μ…˜

SonamuλŠ” strict λͺ¨λ“œ 외에도 μΆ”κ°€ 체크 μ˜΅μ…˜μ„ ν™œμ„±ν™”ν•©λ‹ˆλ‹€.
{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "useUnknownInCatchVariables": true,
    "noUncheckedIndexedAccess": true
  }
}

μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μ½”λ“œ κ²½κ³ 

{
  "noUnusedLocals": true,
  "noUnusedParameters": true
}
μ˜ˆμ‹œ:
// ❌ noUnusedLocals μ—λŸ¬
function greet(name: string) {
  const message = "Hello";  // μ‚¬μš©λ˜μ§€ μ•ŠμŒ
  //    ^^^^^^^ 'message' is declared but its value is never read
  return name;
}

// ❌ noUnusedParameters μ—λŸ¬
function add(a: number, b: number) {
  //                     ^ 'b' is declared but its value is never read
  return a;
}

// βœ… μ˜λ„μ μœΌλ‘œ λ¬΄μ‹œν•  λ•ŒλŠ” _ μ‚¬μš©
function onClick(_event: MouseEvent) {
  console.log("Clicked!");
}
μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” νŒŒλΌλ―Έν„°λŠ” _둜 μ‹œμž‘ν•˜λ©΄ κ²½κ³ κ°€ λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

더 μ—„κ²©ν•œ μ˜΅μ…˜ (선택)

ν•„μš”μ— 따라 μΆ”κ°€ν•  수 μžˆλŠ” μ˜΅μ…˜λ“€μž…λ‹ˆλ‹€.
{
  "compilerOptions": {
    "noPropertyAccessFromIndexSignature": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedSideEffectImports": true
  }
}
인덱슀 μ‹œκ·Έλ‹ˆμ²˜λŠ” λŒ€κ΄„ν˜Έλ‘œλ§Œ μ ‘κ·Ό
interface Options {
  [key: string]: string;
}

const options: Options = { color: "red" };

// ❌ μ—λŸ¬ λ°œμƒ
const color = options.color;

// βœ… λŒ€κ΄„ν˜Έ μ‚¬μš©
const color = options["color"];
μ–Έμ œ μ‚¬μš©:
  • 동적 ν”„λ‘œνΌν‹° 접근을 λͺ…μ‹œμ μœΌλ‘œ λ§Œλ“€κ³  싢을 λ•Œ
Optional ν”„λ‘œνΌν‹°λŠ” undefined만 ν—ˆμš©
interface User {
  name?: string;
}

// ❌ μ—λŸ¬ λ°œμƒ
const user: User = { name: undefined };

// βœ… ν”„λ‘œνΌν‹° μƒλž΅
const user: User = {};

// βœ… λͺ…μ‹œμ  undefined ν—ˆμš©ν•˜λ €λ©΄
interface User {
  name: string | undefined;
}
μ–Έμ œ μ‚¬μš©:
  • Optionalκ³Ό | undefinedλ₯Ό μ—„κ²©νžˆ κ΅¬λΆ„ν•˜κ³  싢을 λ•Œ
λ§Žμ€ λΌμ΄λΈŒλŸ¬λ¦¬μ™€ ν˜Έν™˜μ„± λ¬Έμ œκ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

νƒ€μž… 체크 λΉ„ν™œμ„±ν™”

νŠΉμ • μƒν™©μ—μ„œ νƒ€μž… 체크λ₯Ό μš°νšŒν•΄μ•Ό ν•  λ•Œκ°€ μžˆμŠ΅λ‹ˆλ‹€.
// @ts-nocheck
// 이 파일의 λͺ¨λ“  νƒ€μž… 체크 λ¬΄μ‹œ

const value = "hello";
value = 123;  // μ—λŸ¬ λ°œμƒ μ•ˆ 함

ꢌμž₯ μ„€μ •

{
  "compilerOptions": {
    // Sonamu κΈ°λ³Έ μ„€μ • μ‚¬μš©
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "useUnknownInCatchVariables": true,
    "noUncheckedIndexedAccess": true
  }
}
μ‹ κ·œ ν”„λ‘œμ νŠΈλŠ” λͺ¨λ“  μ˜΅μ…˜μ„ ν™œμ„±ν™”ν•˜μ„Έμš”.

μ„±λŠ₯ 고렀사항

νƒ€μž… 체크 μ˜΅μ…˜μ΄ λ§Žμ„μˆ˜λ‘ 컴파일 μ‹œκ°„μ΄ 증가할 수 μžˆμŠ΅λ‹ˆλ‹€.
{
  "compilerOptions": {
    "skipLibCheck": true,           // node_modules νƒ€μž… 체크 μƒλž΅
    "incremental": true,             // 증뢄 컴파일
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}
skipLibCheck
  • node_modules의 .d.ts νŒŒμΌμ„ μ²΄ν¬ν•˜μ§€ μ•ŠμŒ
  • 컴파일 μ‹œκ°„ 크게 단좕
  • Sonamu κΈ°λ³Έ ν™œμ„±ν™”
incremental
  • λ³€κ²½λœ 파일만 재컴파일
  • .tsbuildinfo νŒŒμΌμ— μΊμ‹œ μ €μž₯

λ‹€μŒ 단계