자바스크립트 타입스크립트 차이, 타입스크립트 기초

타입스크립트 : 타입을 명세한다. 타입오류를 쉽게 찾을 수 있고 유효성 검증에 용이

 

1. 자바스크립트

function greet(name) {
    return "Hello, " + name + "!";
}

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

 

2. 타입스크립트 - 파라미터, 리턴값의 타입을 명세

function greet(name: string): string {
    return "Hello, " + name + "!";
}

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

 

---

 

[타입스크립트 기초 문법]

 

변수 선언: 변수를 선언할 때는 let 또는 const 키워드를 사용합니다

let num: number = 10;

const message: string = "Hello,World!";

함수 선언: 함수를 선언할 때는 파라미터와 반환 타입을 명시할 수 있습니다.

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

 

인터페이스(Interface): 인터페이스를 사용하여 객체의 형태를 정의할 수 있습니다.

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

let person: Person = {
    name: "John",
    age: 30
};

배열(Array): 배열을 선언할 때는 타입 뒤에 대괄호([])를 사용합니다.

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

 

제네릭(Generic): 제네릭을 사용하여 타입을 파라미터화할 수 있습니다.

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

let result = identity<string>("Hello");

---

제네릭(Generic)은 타입스크립트에서 함수, 클래스, 인터페이스 등을 다룰 때 특정한 타입을 명시하지 않고, 여러 종류의 타입을 지원하도록 하는 기능입니다. 이를 통해 코드의 재사용성을 높이고 유연성을 갖출 수 있습니다.

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("Hello, TypeScript!"); 
console.log(output); // 출력: Hello, TypeScript!

let numOutput = identity<number>(123); 
console.log(numOutput); // 출력: 123

위의 identity 함수는 제네릭을 사용하여 입력된 인자를 그대로 반환하는 함수입니다. <T>는 함수 선언에서 타입 파라미터를 나타내며, 이는 함수가 호출될 때 실제 타입으로 대체됩니다. 첫 번째 호출에서는 string 타입으로 명시되었으므로 함수는 문자열을 반환하고, 두 번째 호출에서는 number 타입으로 명시되었으므로 함수는 숫자를 반환합니다.

 

클래스에서도 활용가능하다

class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

let boxOfString = new Box<string>("Hello");
console.log(boxOfString.getValue()); // 출력: Hello

let boxOfNumber = new Box<number>(123);
console.log(boxOfNumber.getValue()); // 출력: 123

 

위의 Box 클래스는 제네릭을 사용하여 어떤 타입의 값이든 담을 수 있는 상자를 만듭니다. 이를 통해 코드의 재사용성과 유연성이 향상됩니다.

 

---

클래스(Class): 클래스를 사용하여 객체 지향 프로그래밍을 할 수 있습니다.

class Person {
    name: string;
    age: number;

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

    greet() {
        return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
    }
}

let person = new Person("John", 30);
console.log(person.greet());