Today I Learned

TypeScript: 프로젝트 설정, 데이터타입

솔솔이소리솔 2023. 12. 12. 21:10

1. 자바스크립트의 한계:
   - 자바스크립트에서는 코드를 실행하기 전까지 잘못된 부분을 파악하기 어렵다. 

2. TypeScript의 장점:
   - TypeScript에서 위와 같은 코드는 미리 코드 편집기에서 에러를 표시하여 개발자에게 경고를 준다. 즉, 코드를 실행하기 전에 미리 에러를 확인할 수 있다.
   - 이는 TypeScript가 컴파일 환경에서 코드를 입력하는 동안 에러를 체크할 수 있다는 것을 의미한다.

3. 컴파일 환경의 역할:
   - 컴파일 환경은 코드를 컴퓨터가 이해할 수 있는 언어로 변환하는 과정을 담당한다. 이는 주로 JavaScript 코드를 실행 가능한 형태로 변환하는 역할을 한다.
   - TypeScript를 사용할 때, 컴파일러가 코드를 분석하고 타입을 검사하여 미리 에러를 발견하며, 이는 코드 실행 이전에 개발자에게 경고로 제공된다.

 

4.TypeScript 설정 및 실행 명령어
1) 프로젝트 디렉토리 구조 설정:
   (1) 프로젝트 디렉토리 생성

npm init -y


   (2) TypeScript 글로벌 설치

yarn global add typescript


   (3) TypeScript 설정 파일 생성 (tsconfig.json)

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


여기서 ./src는 소스 코드 디렉토리, ./dist는 컴파일된 코드의 출력 디렉토리이다.

추가적으로 tsconfig.json에서 TypeScript 컴파일러 설정을 지정되었다.

2) 스크립트 설정과 실행 명령어:

package.json 파일에 TypeScript를 빌드하고 실행하는 스크립트를 추가한다.

// json
"scripts": {
  "start": "tsc && node ./dist/index.js",
  "build": "tsc --build",
  "clean": "tsc --build --clean"
}


- "start" 스크립트:TypeScript를 빌드하고 결과물을 실행한다. tsc 명령어는 TypeScript 컴파일러를 나타내며, node ./dist/index.js는 컴파일된 JavaScript 코드를 실행한다.
- "build" 스크립트: TypeScript를 전체 프로젝트에 대해 빌드한다.
- "clean" 스크립트:** 빌드된 결과물을 정리한다.

3) 실행 명령어 사용 예시:
TypeScript 프로젝트를 빌드하고 실행하는 예시

 // TypeScript 프로젝트 빌드
npm run build

 

// TypeScript 프로젝트 실행
npm start

 


5. 데이터의 타입:
   - TypeScript에서 데이터의 타입은 기본 타입, Tuple, Enum 등을 활용하여 명시적으로 지정할 수 있다. 
     - 기본 타입: boolean, number, string, [], tuple, enum 등
     - Tuple: 여러 타입의 요소로 이루어진 배열로, 요소의 타입과 순서가 정확하게 지정된다.
     - Enum: 연관된 값들을 묶어서 이름을 부여하는 데이터 타입으로, 각 값에는 숫자 또는 문자열이 할당된다.

6. const와 readonly:
   - const는 변수를 상수로 만들어 재할당을 방지하며, 주로 대문자로 표기하여 상수임을 나타낸다.

     const PI = 3.14;


   - readonly는 클래스의 속성에 사용되어 해당 속성을 읽기 전용으로 만든다.

     class Car {
       readonly model: string;

       constructor(model: string) {
         this.model = model;
       }

       updateModel(newModel: string) {
         // this.model = newModel; // 오류: readonly 속성은 변경할 수 없음
       }
     }F


7. any, unknown, union:
   - any는 모든 타입을 허용하며, 타입 검사를 무시하므로 사용을 피해야 한다.
   - unknown는 타입을 모르는 상태를 나타내면서, 타입 안전성을 유지한다. 사용 전에 타입 확인이 필요하다.
   - union은 여러 타입 중 하나일 수 있는 값을 나타내며, 공통된 속성만 사용 가능하다.