TypeScript 기초 다지기

1. 노드를 설치한다.

2. cmd에서 타입스크립트를 글로벌로 설치해준 뒤 확인한다.

npm install typescript -g

노드의 버전을 확인한뒤 typeScript설치

tsc명령어를 입력하여 설치 되었는지 확인

이러한 내용이 나오면 잘 설치 된것.

tsc명령어	설명
tsc --init	- tsconfig.json이 생성되는 명령어
tsc index.ts	- index.ts를 컴파일함.  - .ts는 TypeScript파일의 확장자
tsc src/*.ts	- src 디렉토리 안에 있는 모든 TypeScript파일을 컴파일함.
tsc index.js --declaration --emitDeclarationOnly	- @types 패키지를 위한 .d.ts파일을 생성하는 명령어  - TypeScript로 작성된 모듈이 아닌 Js로 작성된 모듈에     타입선언을 제공할 때 유용

더 많은 명령어

 

3. node.js프로젝트 생성

npm init -y

 

4. TypeScript프로젝트의 설정파일 생성 (tsconfig.json) 

   • 컴파일 옵션 및 입력 파일들을 정의 하는데에 사용

tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

  ° --rootDir ./src

    ▶ 프로그램의 소스 파일이 들어가는 src 디렉토리

  ° --outDir ./dist  

    ▶ 컴파일 된 파일들이 들어가는 dist 디렉토리

  ° --esModuleInterop

    ▶ CommonJS방식의 모듈을 ES모듈 방식의 import구문으로 가져옴    

 

 

tsc --init

tsconfig.json을 생성하여 TypeScript프로젝트로 변환

 

주요 옵션

■ compilerOptions - target

   • TypeScript프로젝트 내 코드들이 어떤 Js버전으로 변환을 할지 정하는 옵션

   • es5로 설정하면 CommonJS버전으로 컴파일 됨.

   • es2016(=es7)로 설정하면 ES2016버전으로 컴파일 됨

      → 최신 브라우저는 보통 ES2016을 지원하므로 설정권장.

      → BUT 내가 만든 프로젝트가 생각보다 레거시한 환경에서 동작해야한다면 es5 설정을 해야함.

      → 즉, 내가 개발하는 환경에 따라서 유동적으로 설정..!!

 

■ compilerOptions - module

   • TypeScript파일을 컴파일한 후 생성되는 Js모듈의 형식을 지정함

   • 모듈을 가져오고 내보내는 방식을 결정하는 옵션

   • target옵션과는 서로 독립적인 관계이므로 프로젝트의 요구사항에 따라 옵션을 설정.

 

■ compilerOptions - outDir

   • 컴파일된 Js파일이 저장될 출력 디렉터리를 지정

   • "outDir":"dist"로 설정하게 된다면 컴파일된 파일들이 dist폴더에 저장됨

 

■ compilerOptions - strict ★ true 설정 권장

   • 엄격한 타입 검사 옵션을 모두 활성화하는 옵션

   • TypeScript컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아 냄.

   • 해당 옵션을 true로 설정하게 되면 아래의 옵션들이 자동으로 true로 설정됨

      ° strictNullChecks - 잠재적으로 null(undefined)이 될수 있는 값들에 대해서 엄격하게 확인하는 옵션

      ° strictFunctionTypes

      ° strictBindCallApply

      ° strictPropertyInitialization

      ° noImplicitAny

          - 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 any타입을 부여하지 않도록함

          - 활성화시 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할수 있음.

      ° noImplicitThis

      ° alwaysStrict

 

■ compilerOptions - sourceMap ★ true 설정 권장

   • 컴파일된 Js파일에 대한 소스 맵을 생성하는 옵션

   • 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인 할 수 있음.

   • 코드 디버깅에는 매우 큰도움을 주기 때문에 개발환경에서는 true를 설정

      → 프로덕션 환경에서는 용량이나 성증상의 이유로 sourceMap을 사용하지 않는것이 나음.

 

■ include, exclude 

   • tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션

   • "include":["src/*/*"]

       → src 디렉토리 밑으로 컴파일 하겠다는 의미

   • "exclude":["node_modules","dist"]

      → node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미

 

더 많은 옵션 메뉴얼

 

5. pakage.json의 script항목 변환

"scripts": {
    "start": "tsc && node ./dist/index.js", // 먼저 TypeScript 파일을 컴파일하고 (tsc 명령어로), 그런 다음 컴파일된 JavaScript 파일을 실행, 즉 TypeScript 파일을 컴파일하고 프로젝트를 실행
    "build": "tsc --build", // TypeScript 컴파일러에게 프로젝트를 빌드하라는 것을 명령
    "clean": "tsc --build --clean" //  TypeScript 컴파일러에게 빌드된 파일을 정리하라는 것을 명령
},

 

6. 구조 만들기

 

7. 성적표 프로그램 만들기

// interface는 객체의 구조를 정의하는 방법
// 객체가 특정 인터페이스를 구현하려면 인터페이스에 정의된 모든 속성을 가져야함.
// 학생이 가져야 될 속성들을 정의
interface Student {
  name: string;
  age: number;
  scores: {
    korean: number;
    math: number;
    society: number;
    science: number;
    english: number;
  };
}

// Student를 생성
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,
    },
  };
}

// 평균을 계산하는 calculateAverage
function calculateAverage(student: Student): number {
  let tot =
    student.scores.korean +
    student.scores.math +
    student.scores.society +
    student.scores.science +
    student.scores.english;

  let result = tot / Object.keys(student.scores).length;
  // Object.keys() 함수 - 특정 속성을 이루는 키 값들을 배열로 반환

  return result;
}

// 평균 점수에 따라서 학점을 부여하는 함수
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}`);
  // toFixed(2) - 소수점 두자리까지 반올림하여 표현함.
}

// 메인 함수
function main(): void {
  const spartan = createStudent("StartCoriny", 30, 95, 89, 76, 90, 97);
  printResult(spartan);
}

main(); // 메인함수 실행

 

8. 프로젝트 빌드

npm run build

• 위 명령어로 프로젝트를 빌드하는데 이 과정에서 에러가 있으면 에러 발생.

 

9. 프로젝트 시작

npm run start

 

결과