39. 타입스크립트 개념 정리 1

Mission: 타입 스크립트 개념 정리

JavaScript의 약점과 TypeScript의 등장

JavaScript과 Node.js

• JavaScript는 웹 페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어로, 웹 페이지의 상호작용을 위해 HTML과 CSS와 함께 사용된다.
• V8 엔진 등의 성능 향상으로 JavaScript의 발전이 이루어지고, Node.js 등장으로 JavaScript로 백엔드를 개발할 수 있게 되었다.
  
  Node.js의 잠재적 위험성
• 프론트엔드 에러는 뷰의 일관성에 영향을 주지만 전반적인 동작에 큰 피해를 주지는 않는다.
• 그러나 백엔드 에러는 서버가 다운될 수 있으며, 예외 처리를 제대로 하지 않은 경우 웹 페이지에 접속할 수 없는 상태가 될 수 있다.
  
  JavaScript의 약점
• 실행 시간에 결정되는 변수 타입으로 인해 예상치 못한 오류 발생 가능하다.
• 약한 타입 체크로 인해 변수 타입 관리가 어려울 수 있다.
• 객체의 유연성으로 인해 의도치 않은 동작이 발생할 수 있다.
  
  TypeScript의 등장 배경
• TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 단점을 보완하고 개발자 취업 시장에서 필수적인 기술 스택으로 인기가 증가하고 있다.
  
  TypeScript를 배우면 할 수 있는 것

1. 취업 시장에서 필수 기술 스택 보유
   TypeScript 개발자에 대한 수요가 증가하고, 기존 JavaScript 프로젝트가 TypeScript로 전환되는 추세가 있다.
   
2. 더 높아지는 생산성 & 안정성 경험
   TypeScript 코드는 안정성과 가독성이 높아져 개발 및 유지 보수에 용이하다.
3. 자연스러운 고급 프로그래밍 개념 학습
   정적 타입 시스템, 객체 지향 프로그래밍, 디자인 패턴 등 다양한 고급 프로그래밍 개념을 학습할 수 있다.
4. 줄어드는 테스트 코드
   TypeScript는 언어의 안정성으로 인해 테스트 코드가 줄어들 수 있다.
   
   TypeScript 개발환경 구축

• Node.js 설치를 위해 nvm을 사용하여 Node.js 버전을 관리한다.
• TypeScript는 npm을 통해 설치하여 사용할 수 있다.

컴파일러와 tsc

• 컴파일러는 특정 프로그래밍 언어가 정적 언어로서의 정체성을 유지하게 하는 도구이다.
• 컴파일러의 근본적인 역할은 타입 검사와 코드 변환을 수행한다.
• 컴파일러는 코드에서 발생하는 문제를 예측하고 해결할 수 있도록 도와주며, 코드 최적화를 통해 실행 시간을 단축시켜준다.
  
  컴파일러란?
• 컴파일러는 프로그래밍 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구이다.
• 변환 과정에서 소스 코드의 구문과 구조를 검사하여 오류를 미리 발견하고 해결할 수 있다.
  
  컴파일러의 등장
• 컴퓨터는 기본적으로 기계어로 작성된 프로그램만 이해할 수 있으며, 기계어는 사람이 이해하기 어렵다.
• 고수준 프로그래밍 언어가 등장한 이유는 기계어로 작성된 코드를 이해하기 어렵기 때문이다.
• C언어로 작성된 코드를 기계어로 변환하기 위해 컴파일러가 필요하게 되었다.
  
  tsc = TypeScript 컴파일러
• JavaScript는 동적 언어(=인터프리터 언어)이기 때문에 기계어로 변환될 필요가 없다.
• tsc 명령어를 사용하여 TypeScript 파일을 JavaScript로 컴파일할 수 있다.
  
  tsconfig.json
• tsconfig.json은 TypeScript 프로젝트의 설정 파일로, 컴파일 옵션과 입력 파일들을 정의한다.
  
  
• 주요 옵션

1. target: TypeScript 프로젝트 내 코드를 어떤 JavaScript 버전으로 변환할지 정하는 옵션. 최신 브라우저 지원을 위해 es2016을 추천한다.
2. module: TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정한다.
3. outDir: 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정한다.
4. strict: 엄격한 타입 검사를 활성화하는 옵션으로, 타입 관련 오류를 미리 찾아내는데 도움을 준다.
5. sourceMap: 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션으로, 코드 디버깅에 유용하다.
6. include, exclude: 컴파일을 할 때 포함하거나 제외할 파일과 디렉터리를 지정한다.
   
   .d.ts 파일 알아보기

• d.ts 파일은 JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 하는 보물이다.
• TypeScript가 나오기 전에는 JavaScript로만 코드를 작성했다.
• TypeScript 코드의 양이 더 적기 때문에, 기존의 JavaScript 라이브러리와 호환성을 유지해야 한다.
• @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공한다.
• .d.ts 파일은 TypeScript 타입 정의 파일로, JavaScript 라이브러리에 대한 타입 정보를 제공한다.
• TypeScript 컴파일러는 이를 사용하여 외부 라이브러리의 함수, 클래스, 객체의 타입 정보를 이해하고 타입 추론도 할 수 있다.
• TypeScript 프로젝트에서 JavaScript 라이브러리를 사용하려면 해당 라이브러리에 대한 .d.ts 파일만 제공하면 되므로, JavaScript 라이브러리를 TypeScript 프로젝트에서 수정하지 않고 그대로 사용할 수 있다.

첫 번째 TypeScript 프로그램 실습

프로그램 기능

• 학생 정보 및 시험 점수 입력 기능
• 평균 점수 및 학점 계산 기능
  
  학습 목표
• TypeScript의 기본 문법 체험하기
  
  성적표 프로그램 코딩
• TypeScript로 성적표 프로그램을 작성한다.
• interface를 사용하여 학생 정보를 정의한다.
• 평균 점수와 학점을 계산하는 함수를 작성한다.
• 학생 객체를 생성하는 함수를 작성한다.
• 성적을 출력하는 함수를 작성한다.
• 메인 함수를 만들고 실행한다.

// 프로그램 실행 코드
// src/index.ts
interface Student {
  name: string;
  age: number;
  scores: {
    korean: number;
    math: number;
    society: number;
    science: number;
    english: number;
  };
}
function createStudent(
  name: string,
  age: number,
  korean: number,
  math: number,
  society: number,
  science: number,
  english: number
): Student {
  return {
    name,
    age,
    scores: {
      korean,
      math,
      society,
      science,
      english,
    },
  };
}
function calculateAverage(student: Student): number {
  const sum =
    student.scores.korean +
    student.scores.math +
    student.scores.society +
    student.scores.science +
    student.scores.english;
  const average = sum / 5;
  return average;
}
function assignGrade(average: number): string {
  if (average >= 90) {
    return "A";
  } else if (average >= 80) {
    return "B";
  } else if (average >= 70) {
    return "C";
  } else if (average >= 60) {
    return "D";
  } else {
    return "F";
  }
}
function printResult(student: Student): void {
  const average = calculateAverage(student);
  const grade = assignGrade(average);
  console.log(`${student.name} (${student.age}세) - 평균: ${average.toFixed(2)}, 학점: ${grade}`);
}
function main(): void {
  const spartan = createStudent("Spartan", 30, 95, 89, 76, 90, 97);
  printResult(spartan);
}
main();

// 실행 결과
Spartan (30세) - 평균: 89.40, 학점: A