Angular는 유형 안전성을 도입한 JavaScript의 상위 집합인 TypeScript를 기반으로 구축되어 개발자가 런타임이 아닌 개발 중에 잠재적인 오류를 포착할 수 있습니다. TypeScript에 익숙한 개발자에게는 이것이 친숙한 환경이겠지만, TypeScript를 처음 접한다면 정적 타이핑, 인터페이스, 클래스 속성 및 접근성 수준(예: 공개 및 비공개) 이러한 기능은 Angular 개발 과정 전반에 걸쳐 매우 중요합니다.

1. 정적 타이핑

TypeScript의 핵심 기능 중 하나는 정적 타이핑입니다. 변수가 모든 유형의 값을 보유할 수 있는 JavaScript와 달리 TypeScript를 사용하면 변수, 속성 및 매개변수의 유형을 명시적으로 지정할 수 있습니다.

일반 JavaScript에서는 다음과 같이 변수를 선언할 수 있습니다.

let name = "Whiskers";
let age = 5;

TypeScript에서는 변수 선언에 데이터 유형을 추가하여 데이터 유형을 적용할 수 있습니다.

let name: string = "Whiskers";
let age: number = 5;

이 설정을 통해 TypeScript는 이름이 항상 문자열이고 나이가 항상 숫자인지 확인합니다. age에 문자열과 같은 잘못된 값을 할당하려고 하면 TypeScript 컴파일러에서 오류가 발생하고 코드가 컴파일되지 않습니다.

이를 통해 개발 중에 오류를 포착하여 코드의 잠재적인 버그를 방지하고 코드의 정확성에 대한 확신을 더 높일 수 있습니다.

2. 인터페이스

TypeScript에서 인터페이스를 사용하면 객체의 모양을 정의할 수 있습니다. 즉, 필요한 속성과 해당 유형을 지정할 수 있으며 TypeScript는 이 인터페이스에 할당된 모든 객체가 모양을 준수하는지 확인합니다.

예를 들어 Cat 객체에 대한 인터페이스를 정의해 보겠습니다.

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

이제 고양이 개체를 만들 때 다음 인터페이스를 준수해야 합니다.

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

이 경우 이름, 나이는 필수항목이며, 품종은 ?로 인해 선택사항입니다. 인터페이스를 따르지 않는 Cat 객체를 할당하려고 하면 TypeScript는 문제에 플래그를 지정합니다:

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

?를 사용하여 속성을 선택 사항으로 만들 수도 있습니다. 필요한 경우 유연성을 허용하면서도 유형 안전성을 유지하는 기호입니다.

3. 클래스 속성

TypeScript 클래스는 JavaScript 클래스와 유사하지만 추가 유형 안전성과 기능이 있습니다. 예를 들어, 클래스 속성에 대한 유형을 명시적으로 선언할 수 있습니다:

class Cat {
    name: string;
    age: number;

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

이렇게 하면 이름은 항상 문자열이고 나이는 항상 숫자입니다. 또한 생성자에서 속성을 초기화하지 않고도 속성을 정의할 수 있습니다.

class Cat {
    name: string;
    breed?: string;
}

TypeScript는 이러한 속성이 선언한 유형과 일치하는지 확인하여 코드를 더 예측 가능하고 디버그하기 쉽게 만듭니다.

4. 공개 및 비공개 접근성

TypeScript의 또 다른 중요한 기능은 공개 및 비공개 액세스 한정자를 사용하여 클래스 멤버(속성 및 메서드)에 대한 접근성을 제어하는 ​​기능입니다. 기본적으로 모든 클래스 멤버는 JavaScript와 TypeScript 모두에서 공개되어 어디서나 액세스할 수 있습니다. 그러나 클래스 멤버를 비공개로 명시적으로 표시하여 해당 클래스 내부로 액세스를 제한할 수 있습니다.

예를 들어:

class Cat {
    public name: string;
    private age: number;

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

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

이 예에서 name 속성은 public이므로 클래스 외부에서 액세스할 수 있지만 age 속성은 private이므로 클래스 자체 내에서만 액세스할 수 있습니다.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

비공개를 사용하면 캡슐화가 보장되어 실수로 변경하거나 클래스 외부에서 중요한 클래스 데이터에 액세스하는 것을 방지할 수 있습니다.

5. 생성자 약어

TypeScript는 생성자를 통해 속성을 선언하고 초기화하기 위한 편리한 약어를 제공합니다. 속성을 수동으로 선언하고 생성자에서 할당하는 대신 생성자의 매개변수 목록에서 직접 선언할 수 있습니다.

기본적인 예는 다음과 같습니다.

class Cat {
    constructor(public name: string, private age: number) {}
}

이 코드는 기능적으로 다음과 동일합니다.

class Cat {
    public name: string;
    private age: number;

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

생성자 약어는 코드를 단순화하고 반복을 줄입니다. TypeScript는 필요한 속성 선언 및 할당을 자동으로 생성하므로 추가 코드를 작성할 필요가 없습니다.

결론

이 문서에서는 Angular 개발에서 자주 접하게 될 주요 TypeScript 기능 중 일부를 다루었습니다.

• 정적 유형은 변수, 속성 및 매개변수가 일관된 유형을 갖도록 보장합니다.
• 인터페이스를 사용하면 개체의 모양을 정의하고 코드에 구조를 추가할 수 있습니다.
• 클래스 속성은 클래스에 필드에 대해 명시적이고 유형이 안전한 선언을 제공합니다.
• 공개 및 비공개 접근성은 클래스 멤버에 대한 액세스 제어를 보장하여 코드 캡슐화를 개선합니다.
• 생성자 약어는 클래스 내에서 속성을 초기화하는 프로세스를 단순화합니다.

이러한 TypeScript 기능은 강력하고 유지 관리가 가능한 Angular 애플리케이션을 작성하는 데 기본입니다. 이를 이해하면 확장 가능하고 유형이 안전한 애플리케이션을 구축할 때 Angular의 잠재력을 최대한 활용하는 데 도움이 됩니다.

다음으로, Angular용 개발 환경 준비에 대해 알아보고 시작하는 데 필요한 도구를 설정해 보겠습니다.