[TypeScript] 타입과 기본 문법

RingKim1·2024년 6월 26일

TypeScript

목록 보기
2/2

타입스크립트(TypeScript) 타입

  • 자바스크립트의 정적 타입 체계를 추가한 언어로, 다양한 타입을 제공

1. 기본 타입(Primitive Types)

// number
let age: number = 30;
// string
let name: string = "Alice";
// boolean
let isStudent: boolean = true;
// null / undefined
let n: null = null;
let u: undefined = undefined;

2. 배열 (Arrays)

특정 타입의 요소들로 구성된 배열

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

3. 튜플 (Tuples)

고정된 수의 요소를 가지며, 각 요소는 특정 타입을 가짐

let tuple: [string, number];
tuple = ["hello", 10]; // OK

4. 열거형 (Enums)

이름이 있는 상수들의 집합

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

5. Any

모든 타입을 허용
타입 검사를 하지 않으며, 기존 자바스크립트 코드와의 호환성을 위해 사용

let notSure: any = 4;
notSure = "maybe a string instead";

6. Void

일반적으로 함수에서 반환 값이 없음을 나타낼 때 사용

function warnUser(): void {
    console.log("This is my warning message");
}

7. Never

절대 발생하지 않는 값의 타입을 나타냄
예를 들어, 함수가 항상 예외를 던지거나 영원히 끝나지 않는 경우

function error(message: string): never {
    throw new Error(message);
}

8. 객체 (Object)

let person: { name: string, age: number } = {
    name: "John",
    age: 25
};

9. 유니언 (Union)

여러 타입 중 하나를 가질 수 있음을 나타냄

let value: string | number;
value = "hello"; // OK
value = 42;      // OK

10. 교차 (Intersection)

여러 타입을 결합한 새로운 타입을 만듦

interface A {
    a: string;
}
interface B {
    b: number;
}
let ab: A & B = { a: "hello", b: 42 };

11. 타입 별칭 (Type Aliases)

타입에 별칭을 붙여 사용할 수 있음

type Point = {
    x: number;
    y: number;
};
let point: Point = { x: 10, y: 20 };


TypeScript 기본 문법

1. 변수 선언

  • 타입스크립트에서는 변수 선언 시 타입을 명시할 수 있음
let 이름: string = "홍길동";
let 나이: number = 25;
let 학생여부: boolean = true;

2. 함수

함수의 매개변수와 반환(return) 값에도 타입을 지정할 수 있음

function 더하기(a: number, b: number): number {
    return a + b;
}

let 결과 = 더하기(5, 3); // 결과: 8

3. 배열

배열의 요소 타입을 지정할 수 있음

let 숫자배열: number[] = [1, 2, 3, 4, 5];
let 문자열배열: string[] = ["사과", "바나나", "체리"];

4. 객체

객체의 프로퍼티에 타입을 지정할 수 있음

let 사람: { 이름: string; 나이: number; } = {
    이름: "홍길동",
    나이: 25
};

5. 인터페이스

  • 인터페이스는 객체의 구조를 정의하는 데 사용
  • 인터페이스를 사용하여 객체가 가져야 할 프로퍼티와 메서드를 명시할 수 있음
  • 인터페이스는 클래스와 결합하여 사용할 수도 있음
interface 사람 {
    이름: string;
    나이: number;
}

let 학생: 사람 = {
    이름: "홍길동",
    나이: 25
};

6. 유니온 타입

유니온 타입을 사용하면 변수에 여러 타입을 지정할 수 있음

let 아이디: number | string;
아이디 = 123;
아이디 = "abc123";

7. 타입 별칭(Type Alias)

타입 별칭을 사용하여 타입에 이름을 붙일 수 있음

type 문자열또는숫자 = string | number;

let: 문자열또는숫자;= "문자열";= 123;

8. 클래스

타입스크립트는 클래스 기반 객체 지향 프로그래밍 지원

class 동물 {
    이름: string;
    
    constructor(이름: string) {
        this.이름 = 이름;
    }

    울다() {
        console.log(`${this.이름}가(이) 울었습니다.`);
    }
}

let 고양이 = new 동물("고양이");
고양이.울다(); // 출력: 고양이가(이) 울었습니다.

9. 제네릭(Generics)

  • 제네릭은 함수, 클래스, 인터페이스 등에서 사용되는 타입을 매개변수화하여 다양한 타입을 처리할 수 있도록 하는 기능
  • 제네릭을 사용하면 코드의 재사용성을 높이고, 타입 안전성을 유지할 수 있음
function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("Hello");  // 타입이 string으로 지정됨
let output2 = identity<number>(100);       // 타입이 number로 지정됨

10. 타입 단언(Type assertion)

타입 단언을 사용하면 컴파일러에게 특정 변수의 타입을 확신시킬 수 있음

let 어떤값: any = "이건 문자열입니다.";
let 문자열길이: number = (어떤값 as string).length;

11. 타입 가드

타입 가드를 사용하면 런타임에 타입을 좁힐 수 있음

function 타입확인(: number | string) {
    if (typeof=== "string") {
        console.log("문자열입니다.");
    } else {
        console.log("숫자입니다.");
    }
}

타입확인("안녕하세요"); // 출력: 문자열입니다.
타입확인(123); // 출력: 숫자입니다.

유틸리티 타입 등... 추후 정리


참고
생활코딩 TypeScript

profile
커피는 콜드브루

0개의 댓글