TypeScript

• https://radlohead.gitbook.io/typescript-deep-dive/recap/null-undefined
• 타입스크립트 코딩 가이드 : Use undefined. Do not use null.

쉽게 시작하는 타입스크립트 (https://joshua1988.github.io/ts/intro.html)

• any라는 타입은 타입 검사를 하지 않음(어떤 타입이 사용되는지 추적 불가), 사용 지양

Interface

• 옵션속성

  interface 인터페이스_이름 {
    속성?: 타입;
  }

Union Type, Enum, Intersection Type
Union Type

• 변수의 값이 여러 타입을 가지는 경우 주로 사용
• 주로 문자열 리터럴에서 사용
• 컴파일 타임에만 존재
• 모든 타입의 열거형

type Color = "Red" | "Black" | "White";
console.log(Color); // error

열거형(enum)

• 특정 값들의 집합을 의미하는 자료형
• 컴파일 타임, 런타임에 존재
• 문자열 또는 숫자의 열거형

enum Color {
  Red,
  Green,
  Blue,
}

console.log(Color); // no error

Intersection Type

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer; // { name: string; age: number; skill: string; }

제네릭(Generics)

function logText<T>(text: T): T {
  return text;
}

• 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것
• 제네릭이란 데이터의 타입을 일반화(generalize)한다.
• https://velog.io/@edie_ko/TypeScript-Generic-%EC%A0%9C%EB%84%A4%EB%A6%AD-feat.-TypeScript-%EB%91%90-%EB%8B%AC%EC%B0%A8-%ED%9B%84%EA%B8%B0

타입추론

• 타입 스크립트가 코드를 해석해 나가는 동작

타입호환

• 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미

타입별칭

• 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수
• 확장이 불가해 가능하면 type보다는 interface로 선언하여 사용하는 것 권장

타입단언

• 개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식
• 타입스크립트 컴파일러보다 개발자가 더 해당 타입을 잘 알고 있을 때나 자바스크립트 기반 코드에 점진적으로 타입스크립트를 적용할 때 사용
• as 키워드 사용

Usage
https://joshua1988.github.io/ts/usage/modules.html => ING

---

https://www.typescriptlang.org/docs/handbook/intro.html

tsconfig

tsconfig

tsconfig 파일 분리

• Vue.js 프로젝트의 경우 애플리케이션 코드와 노드 서버 코드가 분리되어 있어서
  이 두가지 환경에서 서로 다른 TypeScript 설정이 필요할 수 있음
• 빌드 시간 최적화

compilerOptions

compilerOptions.moduleResolution

• TypeScript 컴파일러가 모듈을 해석하는 방법을 설정하는 옵션

• 이 옵션은 주로 모듈을 찾는 방식과 관련하여 사용됨

• tsconfig.json

{
  "compilerOptions": {
    // 기본 설정
    "target": "ES2020", // 타입스크립트가 최종적으로 변환하는 JavaScript 버전.
    "useDefineForClassFields": true, // 클래스 필드를 define 방식(Object.defineProperty)으로 정의. 클래스 필드 초기화가 표준 JS 동작과 일치하게 됨.
    "lib": ["ES2020", "DOM", "DOM.Iterable"], // 타입스크립트가 빌드할 때 참고할 JS 표준 API 목록.
    "types": [], // 기본 타입 선언 파일(ex: @types/node)을 비활성화.
    
    // 모듈 설정 (Bundler용)
    "module": "ESNext", // import/export를 변환하지 않고 그대로 남김. 번들러(예: Vite, Webpack)가 나중에 처리하게 함.
    "moduleResolution": "bundler", // Bundler 스타일로 모듈 경로를 해석. vite, rollup, webpack에 최적화된 경로 처리.
    "allowImportingTsExtensions": true, // .ts, .tsx 확장자를 가진 파일을 import할 때 확장자까지 명시할 수 있도록 허용.
    "resolveJsonModule": true, // JSON 파일을 import할 수 있게 해줌.
    "isolatedModules": true, // 각 파일을 독립된 모듈처럼 검사. 단일 파일만 빌드할 수 있도록 강제 (Babel 같은 툴과 호환성 높임).
    "jsx": "react-jsx", // **React 17+**의 새로운 JSX 변환 방식을 사용 (import React from 'react' 안 해도 됨).

    /* Linting */
    "strict": true,
    "noUnusedLocals": true, // 사용하지 않는 지역 변수 있으면 에러.
    "noUnusedParameters": true, // 사용하지 않는 함수 매개변수 있으면 에러.
    "noFallthroughCasesInSwitch": true // switch문에서 case마다 break 안 하면 에러.
    
    "skipLibCheck": true, // 빌드 속도 빨라짐, 외부 라이브러리 오류로 인한 빌드 실패 방지
  },
}

• tsconfig.types.json 예시
  • 빌드시 타입만 따로 빌드 : tsc -p tsconfig.types.json

{
  "extends": "./tsconfig.json", // 기본 설정 가져옴
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "lib",
    "skipLibCheck": true,
    "stripInternal": true,
    "composite": true,
    "declarationMap": true,
    "preserveSymlinks": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "src/**/*.test.ts",
    "src/**/*.test.tsx",
    "src/**/*.spec.ts",
    "src/**/*.spec.tsx",
    "src/**/__tests__/**",
    "node_modules",
    "dist",
    "lib"
  ]
}