TypeScript의 기초 이해: 기본 타입과 활용 방법

TypeScript란 무엇인가?

모던 웹 개발에 있어 TypeScript는 점점 더 중요한 위치를 차지하고 있습니다. 자바스크립트를 기반으로 한 이 언어는 정적 타입 시스템을 추가해, 개발자가 작성한 코드의 품질과 가독성을 높이는 데 도움을 줍니다. 특히, 대규모 애플리케이션 개발 시 발생할 수 있는 오류를 미리 방지할 수 있도록 돕는 것이 TypeScript의 큰 장점입니다. 하지만, 많은 초보자들은 TypeScript의 기본적인 개념을 이해하는 데 어려움이 있습니다. 이번 포스팅에서는 TypeScript의 기본 타입들에 대해 자세히 알아보도록 하겠습니다.

Primitivos, arrays e any

Primitivos

TypeScript에서 가장 기본이 되는 것은 프리미티브 타입입니다. 프리미티브란 객체가 아닌 원시 데이터 타입으로, JavaScript에서도 자주 사용됩니다. 이들을 이해하고 활용하는 것은 TypeScript의 첫걸음이라 할 수 있습니다.

• string: 문자열 데이터를 나타냅니다. 예를 들어, "안녕하세요!"와 같은 텍스트입니다.

• number: 숫자 데이터를 나타냅니다. 예를 들어, 123과 같은 값입니다.

• boolean: 참(true) 또는 거짓(false)의 값을 가집니다. 예를 들어, true와 같은 값입니다.

이 외에도 null, undefined, 심지어 심볼(Symbol)과 같은 타입도 존재하니, 차근차근 익혀보시기 바랍니다.

Arrays

TypeScript의 배열 타입은 매우 직관적입니다. 배열을 선언할 때는 타입 이름 뒤에 []를 붙이면 됩니다. 예를 들어, 문자열 배열은 string[], 숫자 배열은 number[], 불리언 배열은 boolean[]로 선언할 수 있습니다.

let fruitNames: string[] = ["사과", "바나나", "오렌지"];
let scores: number[] = [100, 50, 75];
let flags: boolean[] = [true, false, true];

이 외에도 Array<string> 형태로도 표현 가능하므로 개발자 편의에 따라 선택할 수 있습니다.

Any

any 타입은 모든 타입을 허용하는 타입입니다. 어떤 형태의 데이터라도 수용할 수 있다는 특징이 있습니다. 예를 들어, 다음과 같이 선언할 수 있습니다.

let value: any;
value = 42;
value = "문자열";
value = true;

any 타입을 사용할 때는 주의가 필요합니다. 이 타입을 남용하게 되면 TypeScript의 타입 체크 기능을 잃게 되어, 타입 오류가 발생할 수 있습니다. 따라서 가능한 한 다른 명시적인 타입을 사용하는 것이 좋습니다.

tipos nas variáveis

TypeScript 변수의 타입은 선언 시에 지정할 수 있습니다. 다음과 같이 간단한 문법으로 타입을 정의할 수 있습니다.

let age: number = 25; // 숫자 타입
let name: string = "홍길동"; // 문자열 타입
let isActive: boolean = true; // 불리언 타입

만약 타입 선언을 잊었다면, TypeScript가 자동으로 타입을 추론해 줄 것입니다.

let city = "서울"; // 타입이 string으로 자동 지정됨
let isOpen = false; // 타입이 boolean으로 자동 지정됨

이런 자동 추론 기능을 통해 개발자는 더욱 편리하게 코드를 작성할 수 있습니다.

Funções

피연산자에 따라 타입을 정의할 수 있는 또 다른 주요 기능은 함수입니다. 함수의 매개변수와 반환값에 타입을 지정할 수 있기 때문입니다. 다음은 그 예시입니다.

function add(num1: number, num2: number): number {
    return num1 + num2;
}

function greet(): string {
    return "안녕하세요!";
}

위와 같이 매개변수와 반환 타입을 명시하면, 함수 사용 시 타입 오류를 사전에 방지할 수 있습니다.

Tipos de objeto

TypeScript는 객체 타입을 정의하기도 매우 수월합니다. 객체의 속성과 그 타입을 정의하면 됩니다. 예를 들어, 사용자 정보를 저장하는 객체는 다음과 같이 정의할 수 있습니다.

function showUser(user: { name: string; age: number }) {
    console.log(`이름: ${user.name}`);
    console.log(`나이: ${user.age}`);
}

showUser({ name: "이순신", age: 40 });

옵셔널 속성을 지정하고 싶다면, 속성 이름 앞에 ?를 붙이면 됩니다.

function showUser(user: { name: string; age?: number }) {
    console.log(`이름: ${user.name}`);
    if (user.age) {
        console.log(`나이: ${user.age}`);
    }
}

이렇게 유연한 객체 타입 정의는 코드의 가독성과 유지보수성을 높이는 데 도움을 줍니다.

Union Types

마지막으로 소개할 개념은 유니온 타입(Union Types)입니다. 이는 여러 타입 중 하나를 선택할 수 있는 기능입니다.

function displayPrice(price: string | number) {
    console.log(`가격: ${price}`);
}

위와 같이 함수를 정의하면, 숫자 또는 문자열 타입을 전달할 수 있습니다. 하지만, 해당 변수에 따라 사용해야 하는 메소드나 연산자가 달라질 수 있으므로, 그에 맞게 코드를 작성해야 합니다.

function displayPrice(price: string | number) {
    if (typeof price === "string") {
        console.log(`가격: ${price.toUpperCase()}`);
    } else {
        console.log(`가격: ${price.toFixed(2)}`);
    }
}

이렇게 타입을 분기하기 위해 typeof 연산자를 사용하면, 안전하게 코드 실행이 가능합니다.

결론

TypeScript는 자바스크립트의 단점을 보완하면서, 강력한 타입 시스템을 제공합니다. 이로 인해 개발자는 안정적이고 유지보수가 용이한 코드를 작성할 수 있습니다. 이번 포스팅을 통해 TypeScript의 주요 개념과 기본 타입을 이해하는 데에 도움이 되었길 바랍니다. 앞으로의 TypeScript 학습에도 으로 적용하시길 추천드립니다.

---

참고 자료

• TypeScript 공식 문서
• TypeScript-Info
• TypeScript Deep Dive

이 외에도 다양한 자료를 통해 TypeScript에 대한 지식을 쌓아보시길 바랍니다!