[TS] 타입스크립트 기본

 

TypeScript 가이드

 

 

 

1. TypeScript 소개

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(superset)입니다. 정적 타입을 지원하여 개발 시 발생할 수 있는 오류를 미리 잡아내고, 코드의 가독성과 유지보수성을 향상시킵니다.

 

---

 

2. TypeScript 설치 및 설정

1. Node.js 설치: https://nodejs.org/에서 다운로드 및 설치
2. TypeScript 전역 설치:
   Copy

   npm install -g typescript
3. 프로젝트에 TypeScript 설치:
   Copy

   npm init -y npm install --save-dev typescript
4. tsconfig.json 파일 생성:
   Copy

   npx tsc --init

 

---

 

3. 간단한 TypeScript 예제

예제 1: 기본 타입 사용

let message: string = "Hello, TypeScript!";
let count: number = 10;
let isActive: boolean = true;

console.log(message);
console.log(count);
console.log(isActive);

 

예제 2: 함수와 타입

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));

 

예제 3: 인터페이스

interface Person {
    name: string;
    age: number;
}

function introduce(person: Person): string {
    return `My name is ${person.name} and I'm ${person.age} years old.`;
}

const john: Person = { name: "John", age: 30 };
console.log(introduce(john));

 

---

 

4. 자주 사용되는 TypeScript 기능

1. 타입 추론

TypeScript는 초기값을 기반으로 변수의 타입을 자동으로 추론합니다.

let x = 10; // number로 추론
let y = "hello"; // string으로 추론

 

2. 유니온 타입

변수가 여러 타입 중 하나일 수 있음을 나타냅니다.

let id: number | string;
id = 100; // 유효
id = "abc"; // 유효

 

3. 타입 별칭

타입에 새로운 이름을 부여합니다.

type Point = { x: number; y: number };
let center: Point = { x: 0, y: 0 };

 

4. 열거형 (Enum)

관련된 상수들의 집합을 정의합니다.

enum Color {
    Red,
    Green,
    Blue
}
let c: Color = Color.Green;

 

5. 제네릭

재사용 가능한 컴포넌트를 만들 때 사용합니다.

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");

 

6. 클래스와 접근 제어자

 

class Animal {
    private name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    public makeSound(): void {
        console.log("Some sound");
    }
}

const cat = new Animal("Whiskers");
cat.makeSound();

 

 

---

 

 

5. TypeScript 컴파일 및 실행

1. TypeScript 파일 컴파일: 
2. tsc filename.ts
3. 컴파일된 JavaScript 파일 실행:
    

   node filename.js
4. ts-node를 사용하여 직접 실행 (개발 환경에서):
    

   npm install -g ts-node ts-node filename.ts

TypeScript를 사용하면 대규모 애플리케이션 개발 시 코드의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. 위의 예제들과 기능들을 실습해보면서 TypeScript의 강력한 기능들을 익혀보세요.