TypeScript

#it #typescript #javascript #프로그래밍언어 #프론트엔드 #frontend #backend #nodejs

기본 정보

이름: TypeScript
약칭: TS
분류: JavaScript 기반 프로그래밍 언어
개발사: Microsoft
최초 공개: 2012년
개발 언어: JavaScript의 상위(Superset) 언어
주요 용도: 대규모 웹 애플리케이션 개발
관련 주제: #TypeScript #JavaScript #Frontend #Backend #Nodejs

개요

TypeScript는 Microsoft에서 개발한 JavaScript의 상위 언어(Superset) 로, 정적 타입(Static Type)을 지원하는 프로그래밍 언어이다.

JavaScript 코드에 타입(Type)을 명시할 수 있어 개발 단계에서 오류를 미리 발견할 수 있으며, 대규모 프로젝트의 유지보수성과 안정성을 크게 향상시킨다.

현재 React, Next.js, Angular, Vue.js, Node.js 등 대부분의 최신 프로젝트에서 TypeScript 사용이 권장되고 있다.

TypeScript 구조

TypeScript

↓

Type Check

↓

Transpile

↓

JavaScript

↓

Browser / Node.js

TypeScript는 실행 시 JavaScript로 변환(Transpile)되어 동작한다.

주요 특징

정적 타입 지원
JavaScript 완전 호환
객체지향 프로그래밍 지원
인터페이스(Interface) 제공
제네릭(Generic) 지원
뛰어난 IDE 자동완성
컴파일 단계에서 오류 확인

설치

npm install -g typescript

버전 확인

tsc -v

컴파일

tsc app.ts

컴파일 후

app.ts

↓

app.js

JavaScript 파일이 생성된다.

변수 선언

let name: string = "구름";

let age: number = 30;

let active: boolean = true;

타입 종류

타입	설명
string	문자열
number	숫자
boolean	참/거짓
object	객체
array	배열
null	null
undefined	undefined
any	모든 타입
unknown	알 수 없는 타입
void	반환값 없음

배열

let list: number[] =

[1,2,3];

또는

let list: Array<number> =

[1,2,3];

함수

function add(

a:number,

b:number

):number{

return a+b;

}

반환 타입까지 지정할 수 있다.

객체(Object)

const user = {

name:"구름",

age:30

};

타입 지정

const user:{

name:string,

age:number

}

Interface

객체 구조를 정의한다.

interface User{

name:string;

age:number;

}

사용

const user:User={

name:"구름",

age:30

};

Type Alias

type User={

name:string;

age:number;

}

Interface와 비슷한 역할을 한다.

Enum

enum Role{

ADMIN,

USER

}

상수를 그룹으로 관리할 때 사용한다.

Generic

function print<T>(

value:T

):T{

return value;

}

다양한 타입을 재사용할 수 있다.

Union Type

let id:

string

|

number;

여러 타입을 허용한다.

Optional

interface User{

name:string;

age?:number;

}

?를 사용하면 선택 속성이 된다.

Class

class User{

name:string;

constructor(

name:string

){

this.name=name;

}

}

객체지향 프로그래밍을 지원한다.

비동기 처리

async function load(){

const res=

await fetch(

"/api"

);

}

JavaScript와 동일하게 async/await를 사용할 수 있다.

tsconfig.json

TypeScript 프로젝트 설정 파일이다.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext"
  }
}

JavaScript와 비교

JavaScript	TypeScript
동적 타입	정적 타입
런타임 오류 가능	컴파일 시 오류 확인
타입 검사 없음	타입 검사 지원
간단한 프로젝트 적합	대규모 프로젝트 적합

대표 활용 분야

React
Next.js
Angular
Vue.js
Node.js
NestJS
ERP
SaaS
관리자 시스템

장점

타입 안정성
자동완성 지원
유지보수 용이
리팩토링 편리
대규모 프로젝트에 적합
개발 생산성 향상

단점

초기 학습 비용
타입 정의 작성 필요
컴파일 과정 추가
소규모 프로젝트에서는 다소 과할 수 있음

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

strict 모드 활성화
any 타입 사용 최소화
Interface 적극 활용
Generic 활용
Type Alias와 Interface 용도 구분
ESLint와 Prettier 적용
readonly 활용
환경 변수 타입 정의
API 응답 타입 정의
공통 타입(types/) 폴더 분리

TypeScript와 함께 사용하는 기술

대표 개발 도구

Visual Studio Code
WebStorm
TypeScript Compiler (tsc)
npm
pnpm
ESLint

출처

TypeScript 공식 홈페이지
TypeScript 공식 문서
Microsoft 개발 문서