📅 2025-11-25

➡️ TypeScript에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 타입스크립트

• 자바스크립트에 정적 타입 시스템을 추가한 프로그래밍 언어
• 브라우저는 타입스크립트를 이해하지 못하므로 컴파일 과정을 거쳐 자바스크립트로 변환해야 함

💡 타입 시스템

• 프로그래밍 언어가 값과 표현식이 어떤 타입을 갖는지 이해하고 확인하는 규칙
  • null
  • undefined
  • boolean
  • string
  • number 등

💡 정적 타입 시스템

• 프로그램 실행 전(컴파일 타임)에 모든 타입을 검사하는 방식
• 오류를 미리 발견 → 안전한 코드 작성 가능

💡 자바스크립트 vs. 타입스크립트

특징	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
컴파일	필요 없음	JavaScript로 컴파일 필요(프로젝트가 대형화 되면 컴파일 시간이 길어짐)
개발 경험	유연하고 빠르게 시작 가능	코드 완성, 타입 검사 등으로 향상된 개발 경험
프로젝트 규모	작은 프로젝트에 적합	대규모 프로젝트에 적합
런타임 오류	런타임에 타입 오류 발견 가능	컴파일 타임에 타입 오류 발견 가능
학습 곡선	낮음	높음
도구 지원	광범위한 도구와 라이브러리 지원	JavaScript 생태계의 모든 도구와 라이브러리 지원
브라우저 지원	모든 브라우저에서 기본적으로 지원	트랜스파일된 JavaScript가 모든 브라우저에서 지원

💡 타입스크립트 동작 원리

• 타입스크립트는 컴파일이라는 과정 안에 문법, 타입 체크..등을 수행함
• 컴파일이란?
  • A라는 언어를 B라는 언어로 변환하는 과정을 뜻함
  • 타입스크립트 → 자바스크립트로 변환하는 과정
• 런타임이란?
  • 프로그램이 실제로 실행되는 시점을 의미
  • 코드가 브라우저나 node.js 위에서 동작하며, 변수 값이 바뀌고 함수가 호출되고 화면에 업데이트되는 모든 순간이 런타임

1. 컴파일 시작

   • tsc 실행 → tsconfig.json 설정 기반으로 컴파일 시작

2. 파일 로드

   • 컴파일러가 모든 입력 파일과 import된 파일 로드

3. 코드 분석

   • 코드를 읽어 들여 프로그램 구조를 나타내는 AST(구문 트리) 생성

4. 심볼 테이블 생성

   • 코드를 분석하여 변수와 함수 등 모든 요소의 관계를 정리한 심볼 테이블 생성

5. 자바스크립트 코드로 변환

   • AST를 바탕으로 타입스크립트 코드를 자바스크립트 코드로 변환

6. 타입 검사

   • 심볼 정보를 바탕으로 타입 오류 검사
   • 오류가 없다면 최종 자바스크립트 파일 생성

중요한 건,

• 타입 스크립트 컴파일러가 코드를 분석
• 분석 이후 오류 없다면 JS코드로 전부 변경됨

---

📌 타입스크립트를 쓰는 이유

💡 사전 에러 방지

• 에러를 사전에 미리 예방할 수 있음

  function sum(a + b){
  	return a + b; 
  }
  
  sum('10', '20'); // "1020"

  • 의도치 않은 결과 값을 받을 수 있음

    function sum(a: number, b: number) {
      return a + b;
    }
    sum('10', '20'); // Error: '10'은 number에 할당될 수 없음

---

📌 타입스크립트 설치

npm install -g typescript
# 또는
yarn global add typescript

💡 Vite로 시작

npm create vite

• 프로젝트 생성 단계에서 React + TypeScript 템플릿을 선택하면 자동으로 .tsx 파일 구조와 tsconfig.json이 설정됨

💡 주요 파일 설명

• src/main.tsx,src/App.tsx
  • 주요 React 컴포넌트 파일
  • JSX → TSX
• tsconfig.json
  • TypeScript 컴파일러 옵션을 설정하는 파일
  • 어떤 버전으로 변환할지, 어떤 폴더를 컴파일할지 등 정의

💡 tsconfig.json 주요 옵션

• target: 변환할 ECMAScript 버전 지정

  "target": "es6"

• module: 모듈 시스템 지정

  "module": "esnext"

• strict: 모든 엄격한 타입 검사 활성화

  "strict": true

• outDir: 컴파일된 파일의 출력 디렉터리를 지정

  "outDir": "./dist"

• rootDir: 입력 파일의 루트 디렉터리를 지정

  "rootDir": "./src"

---

📌 기본 타입

• 변수나 함수를 정의할 때 사용하는 기본 타입
  • string
  • number
  • boolean
  • object
  • array
  • tuple
  • enum
  • null
  • nundefined
  • any
  • void
  • never

💡 타입 지정

• 일반 변수, 매개 변수(Parameter), 객체 속성(Property) 등 : 타입과 같은 형태로 타입 지정

문자열(string)

• 자바스크립트의 변수의 타입이 문자열인 경우

  let str: string;
  let red: string = 'Red';
  let green: string = 'Green';
  let myColor: string = `My color is ${red}`;
  let yourColor: string = 'Your color is ' + green;

숫자(number)

• 타입이 숫자일 경우

  let num: number;
  let integer: number = 6;
  let float: number = 3.14;
  let hex: number = 0xf00d; // 61453
  let binary: number = 0b1010; // 10
  let octal: number = 0o744; // 484
  let infinity: number = Infinity;
  let nan: number = NaN;

진위(boolean)

• 타입이 true/false 값인 경우

  let isBoolean: boolean;
  let isLoggedIn: boolean = false;

객체(object)

• 객체 타입인 경우

  let user: object = {
  	name:"홍길동",
  	age:20
  };

배열(array)

• 타입이 배열인 경우

  let arr: number[] = [1,2,3];
  
  let arr1: Array<number> = [1,2,3] //제네릭

튜플(tuple)

• 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열

  let arr: [string, number] = ["hi", 10];

이넘(enum)

• 숫자 혹은 문자열 값 집합에 이름(Member)을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용

  • 기본적으로 0부터 시작하며 값은 1씩 증가

    enum Week {
      Sun,
      Mon,
      Tue,
      Wed,
      Thu,
      Fri,
      Sat
    }
    
    enum Color {
      Red = 'red',
      Green = 'green',
      Blue = 'blue'
    }

any

• 타입을 알 수 없거나 임시로 타입을 무시하고 싶을 때 사용

  let str: any = 'hi';
  let num: any = 10;
  let arr: any = ['a', 2, true];

  • 너무 any를 사용하게 되면 타입스크립트의 장점이 사라짐. 꼭 필요할 때만 사용!

void

• 반환 값이 없는 함수의 반환 타입. return이 없거나 return이 있더라도 반환하는 값이 없다면 함수의 반환 타입을 void로 지정

  function printA(): void{
  	console.log("aaa");
  }
  
  function returnEmpty(): void{
  	return;
  }

never

• 절대 발생하지 않는 값을 의미하는 타입

  function error(message: string): never {
    throw new Error(message)
  }

  • 예외를 던지거나 무한 루프 등

---

📌 함수

타입스크립트에서의 함수는 3가지 타입을 정의할 수 있음

• 함수의 파라미터(매개 변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입 (함수 시그니처)

💡 기본 함수 타입 선언

• 기본적인 JS 함수 선언

  function sum(a, b) {
  	return a + b; 
  }

• TS선언

  function sum(a: number, b: number): number {
    return a + b;
  }

• 화살표 함수 타입 정의

  const sum = (a: number, b: number): number => a + b;

💡 함수 인자

• 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주함

  • 함수의 매개 변수를 설정하면 undefined나 null이라도 인자로 넘겨야 함

    function sum(a: number, b: number): number {
      return a + b;
    }
    sum(10, 20); // 30
    sum(10, 20, 30); // error, too many parameters
    sum(10); // error, too few parameters

• 기본값을 가진 매개변수는 사실상 선택적 매개변수처럼 동작

  function sum(a: number, b="100"): number {
    return a + b;
  }
  sum(10, undefined); // 110
  sum(10, 20, 30); // error, too many parameters
  sum(10);

  • undefined를 넘기면 기본값 사용
  • null을 넘기면 그대로 null

💡 선택적 매개변수

• 함수의 매개변수의 이름 뒤에 물음표(?)를 붙이면 선택적 매개변수가 되어 생략이 가능해짐

  function sum(a: number, b?: number): number {
    return a + b;
  }
  sum(10, 20); // 30
  sum(10, 20, 30); // error, too many parameters
  sum(10); // 타입 에러 없음

💡 REST 매개변수

• 기존 JS 문법 rest 파라미터

  function sum(a: number, ...nums: number[]): number {
    const totalOfNums = 0;
    for (let key in nums) {
      totalOfNums += nums[key];
    }
    return a + totalOfNums;
  }

---