TypeScript 언어 기초 가이드

2026-05-31

fundamental

1. TypeScript의 이론적 기초

1.1. TS가 좋은 이유

TS는 JS의 상위 집합으로 모든 ECMA 버전의 JS파일 사용 가능
TS는 정적타이핑을 지원하는 반면 JS는 동적타이핑만을 지원
정적타입 프로그래밍 언어는 변수 사용 전 타입을 할당해야 하며, 타입선언 후 변경시 컴파일 오류
TS는 ECMA스크립트 표준을 따르며, 웹 브라우저보다 훨씬 더 빠르게 JS의 기능을 실행가능
TS에서 최신 JS문법을 지원하며 모든 브라우저 사양을 지원하는 버전으로 컴파일 가능
TS를 컴파일한 JS코드는 사람이 작성한 것처럼 읽기 용이

1.2. TS 앱 개발과정

TS 앱의 배포 과정
TS와 JS가 함께 사용된 앱의 배포 과정

1.3. TypeScript 컴파일러

컴파일러의 설치

$ node -v  //node 설치확인
$ mpm -v  //npm 설치확인
$ npm install -g typescript  //typescript 컴파일러 전역 설치
$ tsc -v  //설치확인

폴더구조

typescript/
├── basics/          # 문법 연습 (변수, 타입, 인터페이스 등)
├── api-examples/    # API 연동 실습 (fetch, axios 등)
├── powerfx/         # Power Fx와 연계 실습
├── projects/        # 작은 프로젝트 단위 (Todo, Chatbot 등)
├── node_modules/    # (지역) 패키지 설치 시 자동 생성
├── package.json     # (지역) 프로젝트 설정 파일
└── tsconfig.json    # (지역) TypeScript 설정 파일

컴파일 테스트

####### main.ts
function getFinalPrice(price: number, discount: number) {
  return price - price / discount;
}

console.log(getFinalPrice(100, 100));
console.log(getFinalPrice(100, "100"));

$ tsc main
main.ts:6:32 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

6 console.log(getFinalPrice(100, "100"));
                                ~~~~~

Found 1 error in 1-3-main.ts:6
//컴파일 오류가 발생해도 js 컴파일 수행

tsc 옵션
- (-noEmitOnError) 오류가 수정되기 전까지 js파일 생성 유보
- (-t ES5) 특정 JS 버전
JSON파일을 통한 옵션 저장
- tsconfig.json 이 있는 상태에서 tsc 명령어 입력시 tsconfig.json 내 모든 옵션 적용
```
####### tsconfig.json
{
  "compilerOptions": {
    "noEmitOnError": true,
    "target": "es6"
  }
}
```
- tsconfig.json으로 저장할 수 있는 옵션
  - 컴파일러 옵션 (compilerOptions): target, module, strict, outDir, esModuleInterop 등
  - 파일 포함/제외 규칙 (include, exclude, files)
  - 프로젝트 참조 (references)
- tsconfig.json으로 저장할 수 없는 옵션: –watch, –help, –version

1.4. VSCode 익스텐션

(ESLint) 린터를 통합, 코드의 가독성과 보전성 확인
(Prettier) 코드 파싱 후 자체 규칙에 따라 자동 수정하여 일관된 규칙 적용
(Path Intelligence) 자동으로 파일경로 수정

2. 기본 및 커스텀 타입

2.1. 변수타입 선언

(타입의 명시적 선언) 코드에 직접 구체적으로 표현
(타입의 암시적 선언) let variable = 1; 처럼 컴파일러가 알아서 처리

2.1.1. 기본적인 타입표기

주요 타입
- (string)
- (boolean)
- (number)
- (symbol) ES6에 추가된 변경 불가능한 원시 타입으로 객체 프로퍼티 생성 가능
- (any) 모든 타입을 허용하는 타입. 타입체크의 장점 및 코드 가독성 상실
- (unknown) any와 비슷하나 먼저 타입을 지정하거나 좁히지 않으면 조작 불허
- (never) 절대 반환을 하지 않는 함수로, 절대로 실행이 종료되지 않는 함수나 오류를 발생시키기 위해서만 존재하는 함수
- (void) 값을 반환하지 않는 함수로, never와 다르게 실행은 완료

2.1.2. 함수 본문 내 타입 선언

【참고자료】

야코프 페인·안톤 모이세예프, 단숨에 배우는 타입스크립트, 영진닷컴, 2021.

1. TypeScript의 이론적 기초

1.1. TS가 좋은 이유

1.2. TS 앱 개발과정

1.3. TypeScript 컴파일러

1.4. VSCode 익스텐션

2. 기본 및 커스텀 타입

2.1. 변수타입 선언

2.1.1. 기본적인 타입표기

2.1.2. 함수 본문 내 타입 선언

【참고자료】

Related Posts