`strict: true`에서 에러가 쏟아질 때... — tsconfig 컴파일러 옵션 파헤치기

{
  "compilerOptions": {
    "strict": true
  }
}

{
  "strictNullChecks": true,
  "noImplicitAny": true,
  "strictFunctionTypes": true,
  "strictBindCallApply": true,
  "strictPropertyInitialization": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "useUnknownInCatchVariables": true
}

// strictNullChecks: false (꺼진 상태)
let name: string = null;      // 오류 없음
let age: number = undefined;  // 오류 없음

// strictNullChecks: true (켜진 상태)
let name: string = null;          // 오류
let name: string | null = null;   // 정상

function getUser(id: number): User | null {
  // ...
}
 
const user = getUser(1);
console.log(user.name); // strictNullChecks: true면 오류
                        // — user가 null일 수 있음

// noImplicitAny: false (꺼진 상태)
function process(data) { // data: any — 오류 없음
  return data.value;
}
 
// noImplicitAny: true (켜진 상태)
function process(data) { // 오류: 'data'에 암묵적으로 'any' 형식이 포함됨
  return data.value;
}

function process(data: any) { // 명시적 any — 오류 없음
  return data.value;
}

class Animal {}
class Dog extends Animal {}
 
type Producer<T> = () => T;
 
const dogProducer: Producer<Dog> = () => new Dog();
const animalProducer: Producer<Animal> = dogProducer; // OK

type Consumer<T> = (arg: T) => void;
 
const animalConsumer: Consumer<Animal> = (a: Animal) => {};
const dogConsumer: Consumer<Dog> = animalConsumer; // OK

type Handler<T> = (value: T) => void;
 
const handleString: Handler<string> = (s) => console.log(s.toUpperCase());
 
const handler: Handler<string | number> = handleString;
// strictFunctionTypes: false → 오류 없음
// strictFunctionTypes: true  → 오류

class UserService {
  private db: Database; // 오류: 생성자에서 초기화되지 않음
 
  constructor() {
    // db를 초기화하지 않음
  }
}

class UserService {
  private db: Database;
 
  constructor(db: Database) {
    this.db = db; // 정상
  }
}
 
// 또는 definite assignment assertion
class UserService {
  private db!: Database; // !로 "나중에 확실히 초기화됨"을 명시
 
  init(db: Database) {
    this.db = db;
  }
}

try {
  // ...
} catch (error) {
  // useUnknownInCatchVariables: false → error: any
  // useUnknownInCatchVariables: true  → error: unknown
  
  console.log(error.message); // true면 오류: unknown에 직접 접근 불가
}

catch (error) {
  if (error instanceof Error) {
    console.log(error.message); // 안전
  }
}

// noUncheckedIndexedAccess: false (기본값)
const arr: string[] = ["a", "b"];
const first: string = arr[0]; // 정상 — 범위 밖이어도 타입은 string
 
// noUncheckedIndexedAccess: true
const first: string | undefined = arr[0]; // undefined도 포함

const map: Record<string, number> = {};
const value = map["key"]; // string | undefined

// noImplicitReturns: true
function getLabel(status: string): string {
  if (status === "active") return "활성";
  // 오류: 일부 경로에서 반환값이 없음
}

switch (status) {
  case "loading":
    console.log("로딩 중");
    // 오류: fallthrough — break가 없음
  case "done":
    console.log("완료");
    break;
}

interface Config {
  theme?: "light" | "dark";
}
 
// exactOptionalPropertyTypes: false (기본값)
const config: Config = { theme: undefined }; // 정상
 
// exactOptionalPropertyTypes: true
const config: Config = { theme: undefined }; // 오류: undefined는 허용값이 아님

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

{
  "compilerOptions": {
    // 1단계 — 먼저 이것만
    "noImplicitAny": true,
 
    // 2단계 — 어느 정도 정리되면
    "strictNullChecks": true,
 
    // 3단계 — 마지막에
    "strict": true
  }
}

{
  "skipLibCheck": true
}