TypeScript 입문자를 위한 완전한 기술 소개

TypeScript란 무엇인가?

TypeScript는 Microsoft가 개발한 오픈소스 프로그래밍 언어입니다. JavaScript를 기반으로 하며 정적 타입, 인터페이스, 제네릭, 향상된 개발 도구 지원 같은 기능을 추가합니다.

TypeScript는 품질 검사를 한 겹 더한 JavaScript라고 이해할 수 있습니다. 개발자는 TypeScript를 작성하고, 컴파일러는 이를 브라우저와 Node.js가 실행할 수 있는 일반 JavaScript로 변환합니다.

TypeScript가 만들어진 이유

JavaScript 애플리케이션 규모가 커지면서 개발자들은 다음과 같은 공통 문제를 겪기 시작했습니다.

TypeScript는 코드가 실행되기 전에 문제를 점검함으로써 이러한 어려움을 줄여 줍니다.

학습 전 준비 지식

TypeScript를 배우기 전에는 다음 JavaScript 기본기를 알고 있는 것이 좋습니다.

TypeScript 설치

Node.js 설치

공식 웹사이트에서 Node.js를 다운로드해 설치합니다. 설치 후 다음 명령으로 확인합니다.

node -v
npm -v

TypeScript 설치

전역 설치 명령은 다음과 같습니다.

npm install -g typescript

설치를 확인합니다.

tsc -v

예시는 다음과 같습니다.

Version 5.8.2

첫 프로젝트 만들기

프로젝트 폴더를 생성합니다.

mkdir typescript-demo
cd typescript-demo

npm을 초기화합니다.

npm init -y

TypeScript를 로컬 개발 의존성으로 설치합니다.

npm install --save-dev typescript

설정 파일을 생성합니다.

npx tsc --init

프로젝트 구조는 다음처럼 구성할 수 있습니다.

첫 TypeScript 프로그램

다음 파일을 생성합니다.

// app.ts

let message: string = "Hello TypeScript";

console.log(message);

컴파일합니다.

tsc app.ts

실행합니다.

node app.js

출력 결과는 다음과 같습니다.

Hello TypeScript

변수

문자열

let name: string = "Alice";

숫자

let age: number = 25;

불리언

let isAdmin: boolean = false;

타입 추론

TypeScript는 타입을 자동으로 판단할 수 있습니다.

let city = "Seoul";

이 코드를 보면 TypeScript는 자동으로 string 타입이라는 것을 압니다.

기본 데이터 타입

배열

let numbers: number[] = [1,2,3];

문자열 배열은 다음처럼 작성할 수 있습니다.

let colors: string[] = [
    "Red",
    "Blue",
    "Green"
];

다른 문법도 사용할 수 있습니다.

let numbers: Array<number> = [1,2,3];

객체

let user: {
    name: string;
    age: number;
};

예시는 다음과 같습니다.

let user = {
    name: "Alice",
    age: 25
};

함수

function add(a,b){
    return a+b;
}

add("10",20)

function add(
    a:number,
    b:number
):number{
    return a+b;
}

add("10",20)

선택적 매개변수

function greet(
    name:string,
    age?:number
){
    console.log(name);
}

다음 호출은 모두 유효합니다.

greet("Alice");
greet("Alice",25);

기본 매개변수

function hello(name:string="Guest"){
    console.log(name);
}

유니언 타입

변수는 여러 타입을 허용할 수 있습니다.

let id:number|string;

예시는 다음과 같습니다.

id=100;
id="ABC123";

타입 별칭

type UserID = string;

let id:UserID="USER001";

인터페이스

인터페이스는 객체의 형태를 정의합니다.

interface User{

    id:number;

    name:string;

    email:string;

}

사용 예시는 다음과 같습니다.

const user:User={

    id:1,

    name:"John",

    email:"john@test.com"

};

클래스

class Car{

    brand:string;

    constructor(brand:string){

        this.brand=brand;

    }

}

객체는 다음처럼 생성합니다.

const car=new Car("Tesla");

접근 제한자

열거형

enum Direction{

    Up,

    Down,

    Left,

    Right

}

사용 예시는 다음과 같습니다.

let move=Direction.Up;

제네릭

제네릭은 재사용 가능하면서도 타입 안전한 함수를 만들 수 있게 해줍니다.

function first<T>(items:T[]):T{

    return items[0];

}

사용 예시는 다음과 같습니다.

first<number>([1,2,3]);

first<string>(["A","B"]);

any와 unknown

let value:any;

let value:unknown;

타입 단언

let value:any="Hello";

let length=(value as string).length;

컴파일

파일 하나를 컴파일합니다.

tsc app.ts

감시 모드는 다음과 같습니다.

tsc --watch

tsconfig.json

예시는 다음과 같습니다.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

중요 옵션은 다음과 같습니다.

초보자가 자주 하는 실수

any를 모든 곳에 사용하는 것

let value:any;

이 방식은 TypeScript의 많은 장점을 비활성화합니다. 가능한 구체적인 타입을 사용하고, 필요할 때는 unknown을 선택하는 것이 좋습니다.

컴파일러 오류를 무시하는 것

컴파일러 오류는 버그를 조기에 잡아 주는 중요한 힌트입니다.

컴파일을 잊는 것

TypeScript 파일(.ts)은 컴파일하거나 ts-node 같은 런타임을 사용하지 않으면 Node.js에서 직접 실행할 수 없습니다.

JavaScript와 TypeScript를 부주의하게 섞는 것

JavaScript 코드를 점진적으로 이전하고, 프로젝트가 성숙해질수록 더 엄격한 컴파일러 옵션을 활성화하는 것이 좋습니다.

추천 학습 로드맵

모범 사례

결론

TypeScript는 강력한 타입 시스템을 통해 JavaScript를 확장하며, 더 안전하고 유지보수하기 쉽고 확장 가능한 애플리케이션을 작성하도록 도와줍니다. 학습 곡선은 조금 있지만 프로젝트가 커질수록 그 효과가 분명해집니다.

대부분의 현대 웹 개발에서 실용적인 학습 순서는 다음과 같습니다.

기초를 먼저 확실히 익히면 고급 TypeScript 기능도 자연스럽게 이해할 수 있으며, 프론트엔드, 백엔드, 풀스택 개발을 위한 탄탄한 기반을 마련할 수 있습니다.