본문 바로가기
카테고리 없음

TypeScript 기본 문법

by daily_coming 2024. 9. 10.
반응형

 

 

 

 

1. 변수와 자료형

TypeScript에서는 변수에 타입을 지정할 수 있습니다. 기본적으로 `let`과 `const`를 사용하여 변수를 선언하며, 명시적으로 타입을 지정할 수 있습니다.


let x: number = 10;  // 정수형 변수
const y: number = 3.14;  // 실수형 상수
let name: string = "John";  // 문자열
let isStudent: boolean = true;  // 불리언
    

타입을 명시하지 않으면 TypeScript가 자동으로 타입을 추론합니다.

 

 

 

 

2. 배열

배열은 TypeScript에서 다양한 방법으로 선언할 수 있습니다. 배열 요소의 타입을 지정할 수 있습니다.


// 숫자 배열
let numbers: number[] = [1, 2, 3, 4, 5];

// 문자열 배열
let names: string[] = ["Alice", "Bob", "Charlie"];
    

또는 제네릭 타입으로 배열을 선언할 수도 있습니다.


let fruits: Array = ["Apple", "Banana", "Orange"];
    

 

 

 

 

3. 함수

TypeScript에서는 함수의 매개변수와 반환값에 타입을 지정할 수 있습니다. 타입을 명시하면 함수 사용 시 타입 검사를 할 수 있어 코드 안정성을 높일 수 있습니다.


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

let result = add(10, 20);  // 30 반환
    

매개변수가 선택적일 경우 `?`를 사용하여 선택적인 매개변수를 설정할 수 있습니다.


function greet(name: string, age?: number): string {
    if (age) {
        return `안녕하세요, ${name}. 나이는 ${age}살입니다.`;
    } else {
        return `안녕하세요, ${name}.`;
    }
}

console.log(greet("철수"));  // 안녕하세요, 철수.
console.log(greet("영희", 30));  // 안녕하세요, 영희. 나이는 30살입니다.
    

 

 

 

 

4. 인터페이스 (Interface)

인터페이스는 객체의 구조를 정의할 수 있는 방법입니다. 객체가 가져야 하는 속성들의 타입을 지정할 수 있습니다.


interface Person {
    name: string;
    age: number;
    isStudent?: boolean;  // 선택적 속성
}

let person1: Person = {
    name: "John",
    age: 25
};

let person2: Person = {
    name: "Jane",
    age: 22,
    isStudent: true
};
    

인터페이스는 함수의 매개변수 타입으로도 사용할 수 있습니다.


function printPerson(person: Person) {
    console.log(`이름: ${person.name}, 나이: ${person.age}`);
}

printPerson(person1);  // 이름: John, 나이: 25
printPerson(person2);  // 이름: Jane, 나이: 22
    

 

 

 

 

5. 클래스 (Class)

TypeScript는 객체지향 프로그래밍(OOP)을 지원하며, 클래스는 객체를 정의하는 기본적인 방법입니다. 클래스는 속성, 생성자, 메서드 등을 포함할 수 있습니다.


class Animal {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    makeSound(): void {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
}

let dog = new Animal("멍멍이", 3);
dog.makeSound();  // 멍멍이가 소리를 냅니다.
    

TypeScript에서는 상속을 통해 클래스 간에 기능을 공유할 수 있습니다.


class Dog extends Animal {
    breed: string;

    constructor(name: string, age: number, breed: string) {
        super(name, age);
        this.breed = breed;
    }

    bark(): void {
        console.log(`${this.name}가 짖습니다.`);
    }
}

let bulldog = new Dog("불독", 5, "불독");
bulldog.bark();  // 불독가 짖습니다.
    

 

 

 

 

6. 제네릭 (Generics)

제네릭을 사용하면 함수나 클래스를 다양한 타입에서 재사용할 수 있습니다. 제네릭은 타입을 매개변수처럼 다룰 수 있게 해 줍니다.


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

let output1 = identity("Hello");
let output2 = identity(100);

console.log(output1);  // Hello
console.log(output2);  // 100
    

 

 

 

 

7. 유니언 타입 (Union Types)

유니언 타입은 하나 이상의 타입을 가질 수 있음을 의미합니다. `|`를 사용하여 두 개 이상의 타입을 결합할 수 있습니다.


function printValue(value: string | number) {
    console.log(value);
}

printValue("Hello");  // Hello
printValue(123);  // 123
    

 

 

 

 

8. 타입 단언 (Type Assertions)

타입 단언은 개발자가 특정 값의 타입을 강제할 수 있도록 도와줍니다. 두 가지 방법으로 사용할 수 있습니다.


// angle-bracket 구문
let someValue: any = "this is a string";
let strLength: number = (someValue).length;

// as 구문
let someValue2: any = "this is a string";
let strLength2: number = (someValue2 as string).length;
    

 

 

 

 

9. 타입 별칭 (Type Aliases)

타입 별칭을 사용하면 복잡한 타입에 이름을 붙여 재사용할 수 있습니다.


type StringOrNumber = string | number;

let value1: StringOrNumber = "Hello";
let value2: StringOrNumber = 123;

console.log(value1);  // Hello
console.log(value2);  // 123
    

 

 

 

 

10. 열거형 (Enums)

열거형(Enums)은 상수 집합을 정의할 때 사용됩니다. 열거형 값을 사용하여 가독성 있는 코드를 작성할 수 있습니다.


enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;
console.log(dir);  // 1
    

 

 

 

 

11. 모듈 (Modules)

TypeScript는 모듈 시스템을 통해 코드를 분리하고 재사용성을 높입니다. 각 파일은 자체 모듈이 될 수 있으며, `export`와 `import` 키워드를 사용하여 모듈 간에 데이터를 주고받을 수 있습니다.


// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from './math';

console.log(add(10, 20));  // 30
    

 

 

 

 

12. 타입 가드 (Type Guards)

타입 가드는 특정 타입인지 여부를 검사하는 메커니즘입니다. `typeof`, `instanceof` 등을 사용하여 타입을 검사할 수 있습니다.


function isNumber(value: string | number): value is number {
    return typeof value === "number";
}

function printValue(value: string | number) {
    if (isNumber(value)) {
        console.log("숫자:", value);
    } else {
        console.log("문자열:", value);
    }
}

printValue(123);  // 숫자: 123
printValue("Hello");  // 문자열: Hello
    

 

 

 

 

 

13. 비구조화 할당 (Destructuring Assignment)

TypeScript는 배열이나 객체에서 값이나 속성을 추출하는 비구조화 할당을 지원합니다.


// 배열 비구조화
let [first, second] = [1, 2, 3];
console.log(first);  // 1
console.log(second);  // 2

// 객체 비구조화
let person = { name: "John", age: 25 };
let { name, age } = person;
console.log(name);  // John
console.log(age);  // 25
    
반응형