타입스크립트란(TypeScript)

 

 

 

1. 필요 개발 환경

      a. Node.js : 자바스크립트 구동기, 어디서든 자바스크립트를 실행할 수 있게 해 줌

      b. vs code

 

2. 타입스크린트는 자바스크립트의 확장판

    자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어

 

3. 타입 시스템 :

      ● 프로그램 언어를 사용할 때 타입과 관련해서 지켜야 할 규칙 체계(= 문법 체계)

■ 정적 타입(static type) 시스템

      ● 코드 실행 이전 모든 변수의 타입을 고정적으로 결정함

      ● 모든 변수의 타입이 컴파일타임에 결정

      ● 코드 수준에서 개발자가 타입을 명시해줘야 해서 타이핑 양이 매우 증가

      ● C, JAVA, 타입스크립트

String name = "홍길동";
int age = 20;
String grade = "A";

---
int age = grade + 20; //바로 컴파일 오류 발생 
	// 정적시스템은 실행전 오류 검사까지 함

 

//-- 타입 시스템 : 동적 타입 시스템 + 정적타입시스템
// 변수의 타입을 실행전에 결정,  
//  타입 오류를 실행전에 검사
let age: number = 20;
age.toUpperCase();  ->오류 발생 

let age = 20;
age.toUpperCase();   ->오류 발생
		모든 변수에 타입을 일일이 지정할 필요 없음
		(점진적 타입 시스템(Gradual Type System) )

 

▶ 점진적 타입 검사 :

     컴파일 타임에 타입을 검사하면서 필요에 따라 타입 선언 생략을 허용하는 방식, 타입을 지정한 변수와 표현식은 정적으로 타입       을 검사하지만 타입 선언이 생략되면 동적으로 검사를 수행

     타입 선언을 생략하면 암시적 타입 변환이 일어남

▶ 타입스크립트의 타입 시스템은 정적 타입의 정확성을

     100% 보장해 주지 않음

     모든 변수와 표현식의 타입을 컴파일타임에 검사하지 않아도 되기 때문에 타입이 올바르게 정해지지 않으면 런타임에서 에러가       발생할 수도 있음

■ 동적 타입(dynamic type) 시스템

    ● 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입으르 결정

    ● 변수 타입이 런타임에서 결정

    ● 개발자가 직접 타임을 정의해 줄 필요가 없음

    ● 프로그램을 실행할 때 타입 에러가 발견되기 때문에 개발 과정에서 에러 없이 마음껏 코드를 작성할 수 있지만 언제 프로그램           에 오류가 생길지 모름

    ● 파이썬,자바스크립트

let name = "홍길동";
name = 1234567;

name.toUpperCase();  // Type Error 발생, 그러나 실행은

 

▷ 정리

      ● 정적 타입 시스템 : 코드를 실행하기 전에 정적으로 변수의 타입을 결정, 단점으로는 모든 변수에 일일이 타입을 지정해주어             야 하며, 유연하지 못함

      ● 점진적 타입 시스템 : 실행 전 검사를 통한 타입 안전성 확보, 자동으로 변수의 타입을 추론함

      ● 동적 타입 시스템 : 코드를 실행하면서 유동적으로 변수의 타입을 결정, 단점으로는 코드의 타입 오류를 미리 검사할 수 없어             예기치 않은 오류가 발생할 수 있음

 

▣ 타입스크립트 공식 문서

   

typescriptlangDocumentation - TypeScript for the New Programmer​

Documentation - TypeScript for the New Programmer

https://www.typescriptlang.org/ko/docs/handbook/typescript-from-scratch.html

Documentation - TypeScript for the New Programmer

 

■ 타입스크립트 실행

1. Node.js 패키지 초기화

npm init

 

2. @types/node 설치

   Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)등에 대한 타입 정보

   만약 설치하지 않으면 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있으며, 기본적임 명령인

   console.log 같은 명령을 알아 듣지 못하게 됨

npm install @types/node
또는
npm i @types/node

//package.json  -> dependencies : @types/node - 버전
/* "dependencies": {
    "@types/node": "^24.2.0"
  }
 */

 

 

3. 타입스크립트 컴파일러 설치

    타입스크립트 컴파일러(TSC)는 npm의 TypeScript 패키지에 동봉되어 있음

    타입스크립트는 컴파일러에 의해 자바스크립트로 변환한 다음 실행하기에 자바스크립트를 실행하기 위해

    (타입스크립트를 컴파일하기 위해)서 타입스크립트 패키지를 설치

//windows 
//만약 에러가 발생하면 관리자 권한으로 설치
// -g  : 전역으로 설치, 이렇게 해야 터미널에서 패키지 이름을 호출 하여 사용할 수 있
npm install -g typescript

//mac os
sudo npm install -g typescript

 

//타입스크립트 컴파일러 설치 확인- 현재 타입스크립트의 버전 
tsc -v

//Version 5.9.2 - 현재 타입스크립트의 버전

 

4. 타입스크립트 파일 만들기

    패키지 루트 아래에 src 폴더를 생성한 다음

    index.ts파일을 생성

// 타입 스크립트의 확장자는 'ts'

console.log("Hello TypeScript");
const num: number = 10;

 

 

 

● 컴파일하고 실행

tsc src/index.ts

//컴파일이 완료되면 index.js 파일이 생성됨

 

 

 

● 컴파일된 자바스크립트 코드 node를 이용해 실행

node src/index.js

// Hello Typescript

 

 

▤ 정리 )

      ● 타입스크립트 코드를 실행하기 위해 tsc 를 이용해 타입스크립트 코드를 자바스크립트로 변환한 다음 변환된 자바스크립트             코드를 Node.js 로 실행 시킴

      ● index.js 파일 삭제

 

 

▣ TSX(TypeScript Execute)로 실행하기

    타입스크립트 컴파일러와 node.js가 함께 있는 것

    한번에 타입스크립트 파일을 실행할 수 있음

npm install -g tsx

또는 npm i -g tsx

//설치 확인
tsx -v

 

● 설치 확인 후 타입스크립트 파일 실행

      ◎ 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일 실행

tsx -v

tsx src/index.ts

 

 

♬ 정리)

      ● tsx는 단 한번의 명령어로 타입스크립트 코드를 실행 시킴

      ● 즉 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일을 실

 

▣ 타입스크립트 컴파일러 옵션

    타입스크립트의 컴파일은 우리가 작성한 코드에 타입 오류가 없는지 검사하고 오류가 없다면 자바스크립트 코드로 변화

    이러한 컴파일 과정에서 아주 세부적인 사항들(얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 코드의 버전은 어떻게 할        지....)을 컴파일러 옵션이라고 함

    타입 스크립트는 다른 언어에 비해서 컴파일러 옵션을 아주 자유롭게 쉽게 설정 가능

 

5-1. 컴파일러 옵션 자동 생성

       패키지 루트 폴더 아래에 tsconfig.json이라는 파일에 설정할 수 있으며 Node.js 패키지 단위로 설정

 

  ● 컴파일러 옵션 자동 생성 도구 생성

tsc --init

 

 

5-2. 컴파일러 옵션 설정

//tsconfig.json 파일의 내용을 완전히 제거 한 후 아래와 같이 코딩

{
// 컴파일할 타입스크립트 파일의 범위와 위치
  "include": ["src"]  /* src 폴더를 포함해서 컴파일하기 */
}

//터미널에  tsc 만 입력하면 src 폴더 아래의 모든 .ts 파일이 컴파일

>tsc

 

 

 

 

● *.js 파일을 삭제하기 - 다음 실습 위해

 

{
  "compilerOptions": {
    "skipLibCheck": true, //타입 정의 파일의 타입 검사 생략, 20 버전 이상은 설정 바
    "target": "ESNext", // 자바스크립트 코드 버전
										    //이전 버전을 원하면 "ES5"
			                 // 구형브라우저나 서버 사용시 
			                 // 예전 버전 사용이 필요할 수 있음
    "module" :"ESNext",//모듈 시스템 설정
										 //ES 모듈 시스템, CommonJS 모듈 시스템
    "outDir": "dist", //자바스크립트(js)파일이 놓일 위치
									    //dist 디렉토리에 js파일이 놓임
    "moduleDetection": "force", // 모든 타입스크립트 파일이 로컬로 취급
    "strict": true,  //엄격한 타입 검사 실행, true/false 
   /* 타입스크립트에서는 특별히 매개변수의 타입은 
      프로그래머가 직접 지정하도록 권장      
      타입스크립트는 함수 매개변수의 타입을 자동 추론할 수 없기 때문에 
      타입을 프로그래머가 직접 지정하지 않을 경우 
      엄격한 타입 검사 모드에서는 오류가 발생
   */
  }, 
 
   // 컴파일할 타입스크립트 파일의 범위와 위치
  "include": ["src"] 
}

 

♥ CommonJS 모듈 시스템 참고 자료

   Modules: CommonJS modules | Node.js v24.4.1 Documentation​

Modules: CommonJS modules | Node.js v24.5.0 Documentation

▶ ES 모듈 시스템 참고 자료

        ● ECMAScript 모듈 시스템의 약자로, 줄여서 ESM이라고 함

       

Modules: ECMAScript modules | Node.js v24.4.1 Documentation​

Modules: ECMAScript modules | Node.js v24.5.0 Documentation

 

▶ 위 설정이 제대로 동작되지 않으면 재시작 필요

     Ctrl + Shift + P => restart => TypeScript:TS 서버 다시 시작

 

▶ package.json

     "type" : "module", //설정

{
  "name": "test_2",
   "version": "1.0.0",
  "main": "index.js",
  
  "type":"module",  //ES 모듈 시스템 사용하기 위
  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@types/node": "^24.2.0"
  }
}