TypeScript 학습 시작하는 방법 – 초보자를 위한 안내

JavaScript는 웹 개발을 위한 가장 널리 사용되는 프로그래밍 언어입니다. 하지만 현대 프로그래밍 언어의 필수 기능인 타입 체크 지원이 부족합니다.

JavaScript는 원래 간단한 스크립트 언어로 설계되었습니다. 그 느슨한 특성과 중요한 객체 지향 프로그래밍 (OOP) 기능의 부재는 개발자에게 몇 가지 도전 과제를 제기합니다:

1. 제한된 문서화 및 자동 완성 기능.

2. OOP 개념을 활용할 수 없음.

3. 타입 안전성이 부족하여 런타임 오류 발생.

4. 리팩토링 및 유지 관리의 어려움.

5. 인터페이스 및 통합 포인트의 부재.

TypeScript는 이러한 문제를 해결합니다. JavaScript를 보다 완벽한 현대 프로그래밍 언어로 만들기 위해 구축되었습니다. TypeScript는 개발자 경험을 개선하고, 유용한 많은 기능을 제공하며, 상호 운용성을 향상시킵니다.

이 기사에서는 TypeScript의 기본을 다룰 것입니다. TS를 설치하고 프로젝트를 설정하는 방법을 가르쳐 드리겠습니다. 그런 다음 몇 가지 중요한 기초를 다룰 것입니다. 또한 TypeScript가 어떻게 JavaScript로 컴파일되어 브라우저 및 Node.js 환경과 호환되는지 배울 것입니다.

우리가 다룰 내용:

• 필수 조건

• 시작하기 – TypeScript 설치 방법

• TypeScript 프로젝트 구성 방법

• TypeScript에서의 타이핑 작동 방식

  • 타이핑 기술

  • TypeScript의 정적 vs. 동적 타이핑

  • 타입 추론 및 유니언 타입

• 타입스크립트에서 객체, 배열 및 함수 타입 다루기

  • 타입스크립트의 객체 타입

  • 타입스크립트의 배열 타입

  • 타입스크립트에서 배열 사용하기

  • 타입스크립트의 함수 타입

• TypeScript에서 사용자 정의 유형 만드는 방법

  • 타입 키워드

  • TypeScript 인터페이스

  • 인터페이스 사용 시기

  • 제네릭 및 리터럴 유형

• 타입스크립트에서 타입 병합하는 방법

  • 각 접근 방식을 사용하는 시점

• 타입스크립트의 번들링 및 변환

• TypeScript로 더 나은 코드 작성하기

전제 조건

TypeScript에 뛰어들기 전에, 학습 여정을 보다 원활하게 만들기 위해 특정 개념에 대한 기본적인 이해가 필요합니다. TypeScript는 JavaScript에 정적 유형 지정 및 기타 강력한 기능을 추가하는 동시에 핵심 JavaScript 원칙을 바탕으로 구축됩니다. 다음은 알아야 할 내용입니다:

1. JavaScript 기본 개념

TypeScript는 JavaScript의 슈퍼셋이며, JavaScript의 기능을 확장합니다. TypeScript를 효과적으로 학습하려면 먼저 다음과 같은 JavaScript 기본 개념을 확실하게 이해해야 합니다:

• 구문 및 데이터 유형: 변수 선언 방법(let, const, var) 및 기본 유형(문자열, 숫자, 부울린) 작업, 배열 및 객체 관리 방법을 이해합니다.

• 제어 흐름: 루프(for, while), 조건문(if-else, switch) 및 이들이 프로그램 실행을 제어하는 방법에 익숙해집니다.

• 함수: 함수를 정의하고 호출하는 방법, 매개변수 처리, 반환 값 처리, 화살표 함수 및 클로저와 같은 개념을 이해해야 합니다.

• 객체 지향 프로그래밍 (OOP): 객체 생성 및 작업, 클래스 및 상속에 대해 학습해야 합니다. TypeScript의 클래스 기반 기능은 JavaScript의 OOP 모델에 크게 의존합니다.

• 오류 처리: 런타임 오류 처리에 try-catch 블록을 사용하는 방법을 이해해야 합니다.

2. 기본 HTML 및 CSS

TypeScript는 주로 JavaScript와 함께 사용되는 언어이지만, 특히 프론트엔드 개발자에게는 HTML 및 CSS의 기본적인 이해가 도움이 됩니다. 대부분의 TypeScript 프로젝트는 웹 애플리케이션을 생성하거나 작업하기 때문입니다

• HTML: 태그, 속성 및 요소를 사용하여 웹 페이지를 구성하는 방법을 이해해야 합니다.

• CSS: 셀렉터, 속성 및 값 사용하여 요소를 스타일링하는 방법을 배웁니다. 부트스트랩과 같은 CSS 프레임워크에 익숙한 것이 보너스입니다.

3. 개발 도구에 익숙함

• 훌륭한 TypeScript 지원과 확장 기능을 갖춘 Visual Studio Code와 같은 코드 편집기

• Node.js 및 npm: 개발 환경 설정, 브라우저 외부에서 JavaScript 실행 및 종속성 설치를 위해 npm(Node Package Manager) 사용하는 방법을 이해합니다.

• 버전 관리(Git): 변경 내용을 추적하고 TypeScript 프로젝트에서 효과적으로 협업하는 기초 Git 학습

TypeScript 설치 방법 – 시작하기

TypeScript를 시작하려면 설치해야 합니다. 복잡한 과정은 아닙니다. TypeScript를 설치하면 그 강력함을 활용하여 고품질 솔루션을 만들 수 있습니다.

TS를 설치하는 방법은 두 가지가 있습니다:

1. 전역 설치: 컴파일러에 어디서나 액세스할 수 있게 합니다. TypeScript를 전역으로 설치하려면 다음 명령을 실행하세요:

npm install -g typescript

이 명령은 Node.js 패키지 관리자 npm을 활용합니다. TypeScript를 전역으로 설치하여 명령을 명령줄에서 사용할 수 있게 합니다.

2. 로컬 설치: 이 경우 TypeScript는 특정 프로젝트 내에서만 설치됩니다. 이 방법을 통해 팀 구성원 간의 버전 호환성과 일관성이 유지됩니다. TypeScript를 로컬로 설치하려면 다음 명령을 실행하세요:

npm install typescript --save-dev

전역 설치와 다르게 이 명령은 TypeScript를 개발 의존성으로 설치합니다. tsc 명령은 프로젝트별로 사용할 수 있으며 명령을 실행하는 특정 프로젝트 내에서만 사용할 수 있습니다.

지금 쉽게 TypeScript를 설치할 수 있나요? 그렇기를 바랍니다!

TypeScript 프로젝트 구성 방법

TypeScript 프로젝트 구성은 의미 있는 이름과 디렉토리로 파일을 구조화하고 관심을 분리하며 캡슐화와 재사용성을 위해 모듈을 사용하는 것을 포함합니다.

.ts 확장자는 TypeScript 파일을 나타내며 코드를 JavaScript로 변환하여 실행합니다.

TypeScript는 .d.ts 파일도 지원하며 type definition 파일로도 알려져 있습니다. 이러한 파일들은 외부 JavaScript 라이브러리나 모듈에 대한 타입 정보를 제공하여 더 나은 타입 체크 및 코드 완성을 지원하며 개발 효율성을 향상시킵니다. 아래는 좋은 TS 프로젝트 구조의 예시입니다:

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

여기에서 무엇이 진행되고 있는지 이해해 봅시다:

1. src/: 이 디렉토리는 프로젝트의 모든 소스 코드를 포함합니다.

   • components/: 재사용 가능한 UI 컴포넌트를 포함합니다 (예: Button, Input, Modal). .tsx (TypeScript JSX)를 사용하면 타입 안전성을 가지고 JSX를 작성할 수 있습니다.

   • services/: 외부 API와 상호작용하거나 애플리케이션 로직을 처리하는 서비스를 보관합니다 (예: API 호출을 위한 api.ts, 인증을 위한 authService.ts).

   • utils/: 일반적인 작업을 위한 도우미 함수 및 유틸리티 클래스를 포함합니다 (예: 날짜 형식 변환을 위한 helpers.ts, 입력 유효성 검사를 위한 validators.ts).

   • models/: 데이터 구조를 나타내기 위한 TypeScript 인터페이스나 클래스를 정의합니다 (예: User.ts, Product.ts).

   • index.tsx: 애플리케이션의 주진입점입니다.

   • styles/: CSS 또는 다른 스타일링 파일을 포함합니다.

2. public/: 이 디렉토리에는 TypeScript에 의해 처리되지 않는 정적 자산이 포함됩니다 (예: HTML, 이미지, 글꼴).

3. tsconfig.json: 컴파일러 옵션을 지정하는 TypeScript 구성 파일입니다.

4. package.json: 의존성, 스크립트 및 기타 프로젝트 메타데이터를 나열하는 프로젝트의 매니페스트 파일입니다.

여기에서 명명 규칙에 대한 간단한 메모를 남깁니다:

• 클래스 이름에는 PascalCase를 사용하세요 (예: User, Product).

• 함수 이름과 변수 이름에는 camelCase를 사용하세요 (예: getUser, firstName).

• 파일과 디렉토리에 의미 있는 이름을 사용하세요.

이러한 구조는 모듈성, 재사용성, 그리고 더 나은 조직을 촉진하여 TypeScript 프로젝트를 유지 및 확장하기 쉽게 만듭니다.

TS 프로젝트를 올바르게 구성하면 TypeScript 개발 워크플로우에서 코드의 유지 관리, 가독성, 협업이 향상됩니다.

TypeScript에서 타이핑 작동 방식

다른 타입이 있는 프로그래밍 언어와 마찬가지로 TypeScript는 일반적으로 타이핑이라고 불리는 타입 정의에 의존합니다.

타이핑은 프로그래밍에서 변수, 메소드 매개변수, 그리고 코드 내에서 반환 값의 데이터 타입을 정의하는 용어입니다.

타이핑을 사용하면 개발 초기에 빠르게 오류를 잡아내어 더 나은 코드 품질을 유지하는 데 도움이 되는 강력한 기능입니다.

TypeScript에서 타입을 지정하려면 변수 이름 뒤에 콜론(:)과 원하는 데이터 타입을 넣어주면 됩니다. 다음은 예시입니다:

let age: number = 2;

위의 변수는 number 타입으로 선언되었습니다. TypeScript에서는 숫자만 저장할 수 있음을 의미합니다.

타이핑 기법

TypeScript에서 데이터는 주로 두 가지 방법으로 타입을 지정할 수 있습니다:

1. 정적 타이핑: 정적 타이핑은 개발 중에 코드의 변수 및 기타 엔티티의 데이터 타입을 명시적으로 지정하는 것을 의미합니다. TypeScript 컴파일러는 이러한 타입 정의를 강제하며, 타입 관련 오류를 조기에 찾아주는 데 도움이 됩니다. 예시:

let age: number = 25;

여기서 변수 age는 number 타입으로 명시적으로 선언됩니다. 이는 오직 숫자 값만 할당될 수 있도록 하여 런타임 오류의 위험을 줄입니다.

2. 동적 타이핑: TypeScript에서 동적 타이핑은 변수의 타입이 런타임에 결정되는 시나리오를 의미합니다. 이것은 변수가 any 타입으로 할당될 때 발생할 수 있으며, 이는 어떤 타입의 값도 가질 수 있게 합니다. TypeScript는 any 타입의 변수를 포함한 연산에서 타입 검사를 수행하지 않습니다.

let value: any;
value = 25; // 숫자
value = "Hello"; // 문자열

TypeScript는 주로 정적 타입 언어이지만, 동적 타이핑은 특정 경우에 여전히 유용할 수 있습니다, 예를 들어:

• 타입 정의가 없는 서드파티 라이브러리와 작업할 때.

• 구조가 알려지지 않은 API의 JSON 응답과 같은 동적으로 구조화된 데이터와 인터페이스할 때.

• 빠른 프로토타이핑 또는 초기 개발 단계에서 타입 정보가 없을 때.

TypeScript에서의 정적 vs. 동적 타이핑

정적 타이핑은 TypeScript에서 현저히 더 흔하며, JavaScript와 구분되는 핵심 기능 중 하나입니다. 엄격한 타입 검사를 강제함으로써 정적 타이핑은 코드 유지보수성을 향상시키고 버그를 줄이며 개발자 생산성을 향상시킵니다.

동적 타이핑은 일반적으로 유연성이 필요한 경우나 사전에 결정할 수 없는 데이터 구조를 다룰 때 사용됩니다. 다만, 동적 타이핑에 과도하게 의존하는 것(예: any 유형 과용)은 TypeScript의 정적 타이핑 시스템의 이점을 약화시키므로 일반적으로 권장되지 않습니다.

따라서 동적 타이핑이 특정 경계 상황에 필요한 경우가 있지만, TypeScript 개발에서는 정적 타이핑이 우선되고 더 많이 사용되는 접근 방식입니다.

타입 추론 및 유니언 타입

타입 추론

타입 추론은 TypeScript의 강력한 기능으로, 컴파일러가 초기화 중에 할당된 값에 기반하여 변수의 유형을 자동으로 추론할 수 있게 합니다. 간단히 말해, TypeScript는 변수에 할당된 값을 살펴보고 명시적으로 유형을 선언하지 않아도 그것이 어떤 유형인지 결정합니다.

예를 들어:

typescriptCopyEditlet age = 25; // TypeScript는 'age'가 'number' 타입임을 추론합니다
age = "hello"; // 오류: 'string' 타입은 'number' 타입에 할당할 수 없습니다

이 예에서 age 변수는 초기 값인 25 때문에 자동으로 number로 추론됩니다. age를 문자열과 같은 다른 유형의 값으로 재할당하면 유형 오류가 발생합니다.

유형 추론은 명시적 유형 주석의 필요성을 줄여 코드를 더 깨끗하고 가독성 있게 만드는 데 특히 유용합니다. 그러나 TypeScript의 유형 확인의 안전성과 신뢰성을 제공합니다.

유형 추론을 사용하는 시기:

• 간단한 할당: 값으로부터 유형이 명확한 간단한 할당에 대해 유형 추론을 사용합니다.

• 기본값: 변수나 함수 매개변수에 기본값을 제공할 때 유형 추론을 사용하면 수동 주석 없이도 올바른 유형이 적용됩니다.

• 빠른 프로토타이핑: 개발 초기 단계에서 유형 추론을 사용하면 보일러플레이트 코드를 줄이면서도 유형 안전성을 유지할 수 있습니다.

Union Types

유니온 타입은 변수가 여러 타입의 값을 가질 수 있도록 허용합니다. 이는 타입 사이에 파이프(|)를 배치하여 정의됩니다. 이 기능은 변수가 수명 주기 동안 합법적으로 둘 이상의 타입을 가질 수 있을 때 특히 유용합니다.

예를 들어:

typescriptCopyEditlet numOrString: number | string; // 'numOrString'은 숫자 또는 문자열을 가질 수 있습니다
numOrString = 25; // 유효
numOrString = "hello"; // 유효
numOrString = true; // 오류: 타입 'boolean'은 타입 'number | string'에 할당할 수 없습니다

두 개 이상의 가능한 타입으로 유니온 타입을 정의할 수도 있습니다:

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // 유효
multiType = "TypeScript"; // 유효
multiType = false; // 유효

유니온 타입을 사용할 때:

• 유연한 함수 매개변수: 함수가 여러 유형의 입력을 수용할 수 있는 경우.

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

• 다양한 데이터 구조 다루기: 필드의 유형이 다양할 수 있는 API 또는 외부 데이터 원본과 작업할 때.

• 선택 사항 또는 다중 상태 변수: 예를 들어, 부울로 로딩 상태를 나타낼 수 있는 변수, 문자열로 오류를 나타낼 수 있는 변수, 또는 객체로 유효한 데이터를 나타낼 수 있는 변수:

    typescriptCopyEditlet status: boolean | string | { success: boolean; data: any };
  

TypeScript에서 객체, 배열 및 함수 유형 다루는 방법

TypeScript를 숙달하려면 TypeScript에서 지원하는 다양한 데이터 유형을 이해하고 사용하는 방법과 시기를 이해해야 합니다.

JavaScript 기본 유형인 문자열, 숫자, 부울 등은 TypeScript에서 데이터의 기본 구성 요소를 정의합니다. 특히 객체, 배열, 및 함수는 견고한 애플리케이션을 구축하는 데 필수적입니다. 객체, 배열 및 함수를 사용하면 데이터를 더 잘 처리하고 효율적으로 개발에 활용할 수 있습니다.

TypeScript의 객체 유형

객체 유형은 TypeScript에서 객체를 생성하기 위한 청사진을 나타냅니다. 객체의 모양을 정의하는 데 객체를 사용할 수 있으며, 이는 클래스가 객체지향 프로그래밍(OOP)에서 사용되는 방식과 유사합니다. 그러나 객체에는 클래스가 제공하는 행위 측면과 캡슐화가 부족합니다.

객체 유형을 정의하려면 콜론(:) 뒤에 객체의 청사진을 명시적으로 정의하십시오. 예:

// 객체 유형 초기화

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// 실제 데이터로 객체 할당

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

속성이 실제 객체를 끝내는 쉼표 , 대신 세미콜론;으로 끝나는 것에 주목하십시오.

위는 TypeScript에서 객체를 정의하는 기본 방법입니다. 또 다른 방법은 후에 이 기사에서 다루도록 할 인터페이스를 사용하는 것입니다.

TypeScript에서 배열 유형

TypeScript의 배열은 동일하거나 다른 데이터 유형의 여러 값을 단일 변수에 저장할 수 있도록 합니다. 배열 요소 간의 유형 일관성을 강제하여 코드의 안전성과 명확성을 향상시킵니다.

TypeScript에서 배열 유형은 두 가지 방법으로 정의할 수 있습니다:

1. Array<type> 모델 사용

이 구문은 일반적인 Array 유형을 사용하며, 여기서 type은 배열이 보유할 수 있는 요소의 유형을 나타냅니다.

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

• numbers 예: 이 배열은 숫자만 포함할 수 있습니다. 이 배열에 문자열이나 다른 유형을 추가하려고 하면 유형 오류가 발생합니다.

    typescriptCopyEditnumbers.push(6); // 유효함
    numbers.push("Hello"); // 오류: 유형 'string'은 유형 'number'에 할당할 수 없습니다.
  

• mixedArray 예: 이 배열은 유니온 타입(number | string)을 사용하여 숫자와 문자열을 모두 저장할 수 있습니다.

    typescriptCopyEditmixedArray.push(42); // 유효
    mixedArray.push("TypeScript"); // 유효
    mixedArray.push(true); // 오류: 'boolean' 형식은 'number | string' 형식에 할당할 수 없습니다
  

2. type[] 모델 사용

이 구문은 배열이 보유할 수 있는 요소 유형에 대괄호([])를 추가합니다.

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

• numbers 예: Array<number> 예제와 유사하게, 이 배열은 숫자만 보유할 수 있습니다.

    typescriptCopyEditnumbers[0] = 10; // 유효함
    numbers.push("Hi"); // 오류: 'string' 타입은 'number'에 할당할 수 없습니다
  

• mixedArray 예시: 앞서의 mixedArray와 같이, 이 배열은 숫자와 문자열을 모두 허용하여 데이터 유형이 다양할 때 유연성을 제공합니다.

    typescriptCopyEditmixedArray[1] = "World"; // 유효함
    mixedArray.push(true); // 오류: 유형 'boolean'은(는) 'string | number' 유형에 할당할 수 없습니다
  

TypeScript에서 배열 사용하는 방법

배열은 다양하고 관련 데이터 컬렉션을 저장하는 데 흔히 사용됩니다. 몇 가지 실용적인 시나리오는 다음과 같습니다:

동질 데이터 저장:
배열의 모든 요소가 같은 유형을 공유할 때, 예를 들어 사용자 ID나 제품 가격 목록 같은 경우:

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

이질 데이터 저장:
요소가 다른 유형을 가질 수 있는 경우, 텍스트와 선택적 메타데이터를 포함하는 메시지 목록과 같은 예:

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

배열 반복:
TypeScript의 배열은 완전한 유형 안전성으로 루프에서 사용할 수 있습니다:

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // 각 점수에 5를 더함

함수 매개변수와 반환 유형:
배열은 엄격한 유형으로 함수 매개변수로 전달되거나 함수에 의해 반환될 수도 있습니다:

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

TypeScript의 함수 유형

TypeScript의 함수 유형은 매개변수 유형과 반환 유형을 포함한 함수의 형태를 설명합니다. 함수 유형은 선언 시 매개변수 유형을 명시적으로 지정하여 정의됩니다. 반환 유형은 괄호 바로 뒤에 : 및 반환 유형을 추가하여 지정됩니다. 예:

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

위 함수는 두 개의 숫자를 받아 더하고 숫자를 반환합니다. 인수 중 하나라도 숫자가 아니거나 숫자 이외의 다른 값이 반환되면 함수가 작동하지 않습니다. 예:

1. 문자열을 인수로 전달하여 함수 호출:

// 이것은 작동하지 않습니다. 숫자를 예상하고 있으며 인수 중 하나가 문자열입니다

addition(1, "two");

2. 문자열을 반환하도록 함수 다시 작성:

// 반환 유형이 문자열이기 때문에 함수에서 오류가 발생할 것입니다

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

이 예제들이 어떻게 작동하는지 직접 코드를 테스트해보세요.

TypeScript에서 객체, 배열 및 함수를 이해하고 효과적으로 다루는 것은 타입 안전하고 유지보수 가능한 코드를 작성할 수 있도록 돕습니다. 응용 프로그램의 신뢰성과 확장성을 향상시킵니다.

TypeScript에서 사용자 정의 타입 만들기

자주 내가 디자인한 패턴이 TypeScript의 내장 데이터 형식을 따르지 않습니다. 예를 들어, 동적 프로그래밍을 사용하는 패턴이 있을 수 있습니다. 이는 코드베이스에서 문제를 일으킬 수 있습니다. TypeScript는 이 문제를 해결하기 위해 사용자 정의 타입을 만들 수 있는 솔루션을 제공합니다.

사용자 정의 타입을 사용하면 데이터 구조와 모양을 필요에 맞게 정의할 수 있습니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.

타입 키워드

type 키워드를 사용하면 타입 별칭을 만들 수 있어 사용자 정의 타입을 만드는 방법을 제공합니다. 만든 타입은 코드베이스 전반에 재사용할 수 있습니다. 타입 별칭은 유니언 타입을 정의하거나 여러 타입을 단일 별칭으로 결합하는 데 도움이 됩니다. 사용자 정의 타입을 만드는 구문은 다음과 같습니다:

// 구문

type TypeAlias = type;

그리고 여기 예제가 있습니다:

위 코드는 숫자와 문자열의 유니언인 사용자 정의 타입 UserName을 만듭니다. 이를 사용하여 작성한 타입이 작동하는지 확인하기 위해 두 변수를 정의합니다.

타입 별칭을 대문자로 시작하는 것이 권장됩니다.

일반적으로 타입 키워드는 기본형에 사용됩니다 – 그렇다면 사용자 정의 객체 타입을 만드는 방법은 어떻게 할까요?

여기서 인터페이스가 필요합니다.

TypeScript 인터페이스

TypeScript에서는 인터페이스를 사용하여 객체의 구조를 정의합니다. 이들은 청사진으로 작용하여 객체가 가져야 하는 속성과 그에 해당하는 유형을 지정합니다. 이는 객체가 일관된 형태를 따르도록 보장하여 유형 안전성과 더 명확한 코드를 제공합니다.

인터페이스 정의하기

인터페이스는 interface 키워드를 사용하여 정의됩니다. 구문은 다음과 같습니다:

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

예제:

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

이 예제에서 무슨 일이 벌어지고 있는지 살펴봅시다:

1. 인터페이스 선언 (interface User):

   • 여기서 User 객체의 청사진을 정의합니다. User 유형의 모든 객체는 다음 속성을 가져야 한다는 것을 지정합니다:

     • number 유형의 id

     • string 유형의 name

     • string 유형의 email

2. 인터페이스 사용 (const user: User):

   • 우리는 유형 User의 객체 user를 선언합니다.

   • 객체는 지정된 유형의 값을 가진 User 인터페이스에 정의된 모든 속성을 가져야 합니다. 속성이 누락되었거나 유형이 일치하지 않으면 TypeScript가 컴파일 시간 오류를 throw합니다.

예를 들어:

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // 오류: '이메일' 속성이 누락됨
    };

그래서 인터페이스를 사용해야 하는 이유는 무엇일까요?

• Type safety: 예상된 구조에 대해 객체가 준수함을 보장하여 런타임 오류를 방지합니다.

• Reusability: 동일한 인터페이스를 응용 프로그램의 다른 부분에서 재사용할 수 있어 중복을 줄입니다.

• Code clarity: 객체의 모양을 명시적으로 설명함으로써 코드를 읽고 이해하기 쉽게 만듭니다.

인터페이스의 고급 기능

1. 선택적 속성: 속성을 선택적으로 만들려면 물음표(?)를 추가하면 됩니다.

    typescriptCopyEdit인터페이스 Product {
      id: number;
      name: string;
      description?: string; // 선택적 속성
    }
   
    const product: Product = {
      id: 101,
      name: "Laptop",
    }; // 유효, 'description'이 선택적이므로
   

2. 읽기 전용 속성: readonly를 사용하여 속성이 초기화된 후 수정되는 것을 방지합니다.

    typescriptCopyEditinterface Point {
      readonly x: number;
      readonly y: number;
    }
   
    const point: Point = { x: 10, y: 20 };
    point.x = 15; // Error: 'x'에 할당할 수 없습니다. 읽기 전용 속성이기 때문입니다.
   

3. 인터페이스 확장: 인터페이스는 다른 인터페이스로부터 속성을 상속받아 조합할 수 있습니다.

    typescriptCopyEditinterface Person {
      name: string;
      age: number;
    }
   
    interface Employee extends Person {
      employeeId: number;
    }
   
    const employee: Employee = {
      name: "John",
      age: 30,
      employeeId: 1234,
    };
   

인터페이스 사용 시기

인터페이스를 사용하는 것이 좋은 시나리오는 다양합니다. 코드 내에서 전달되는 객체의 구조를 정의하고 강제하려는 경우에 사용할 수 있습니다.

또한 API 응답에서 유용하며, API로부터 수신된 객체를 유형 검사하여 데이터가 예상과 일치하는지 확인할 수 있습니다.

인터페이스는 재사용 가능한 유형을 다룰 때도 편리합니다. 응용 프로그램의 여러 부분이 동일한 구조의 객체를 사용할 때, 인터페이스는 중복을 방지합니다.

인터페이스를 활용하여 견고하고 유지보수 가능하며 유형 안전한 응용 프로그램을 만들 수 있습니다. TypeScript의 필수 기능으로서, 깨끗하고 예측 가능한 코드를 촉진합니다.

일반화와 리터럴 유형

일반화는 TypeScript에서 다양한 데이터 유형과 함께 작동할 수 있는 재사용 가능한 구성 요소를 생성할 수 있도록 합니다. 정확한 유형을 미리 지정하지 않고 함수, 클래스 및 인터페이스를 작성할 수 있어 코드를 더 유연하고 유지보수 가능하게 만듭니다.

다음은 TypeScript에서 일반화 함수와 일반화 인터페이스의 예시입니다:

// 임의의 값을 보유할 수 있는 상자를 위한 일반화 인터페이스 

interface  Box<T> { 
    value: T; 
}

// 사용 예시

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // 결과: 10  
console.log(stringBox.value); // 결과: TypeScript

데이터 유형을 확신할 수 없는 경우 일반화를 사용할 수 있습니다.

제네릭과는 달리, 리터럴 타입은 변수가 가질 수 있는 정확한 값을 지정할 수 있게 해줍니다. 이는 코드에 더 높은 구체성과 타입 안전성을 추가하여 원치 않는 값이 할당되는 것을 방지합니다. 다음은 예시입니다:

type Direction = 'up' | 'down' | 'left' | 'right';

위 타입으로 생성된 변수는 ‘up’, ‘down’, ‘left’, ‘right’ 문자열만 할당될 수 있습니다.

전반적으로 TypeScript에서 사용자 정의 타입을 활용하면 표현력이 풍부하고 재사용 가능하며 타입 안전한 데이터 구조를 생성할 수 있어 더 견고하고 유지보수가 용이한 애플리케이션 개발에 도움이 됩니다.

TypeScript에서 타입 병합하는 방법

TypeScript에서 타입 병합은 여러 타입 선언을 단일 통합 타입으로 결합하는 것입니다. 이 기능은 개발자가 더 작고 재사용 가능한 조각들로 복잡한 타입을 구축할 수 있게 하여 코드의 명확성, 재사용성 및 유지보수성을 향상시킵니다.

1. 인터페이스의 선언 병합

TypeScript는 선언 병합을 지원하며, 동일한 이름의 여러 인터페이스 선언이 자동으로 단일 인터페이스로 결합됩니다. 이를 통해 추가 속성이나 메서드를 정의하여 기존 인터페이스를 확장할 수 있습니다.

예시:

typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

작동 방식:

• User 인터페이스가 각각 다른 속성을 가진 채로 두 번 선언됩니다.

• TypeScript는 이러한 선언들을 자동으로 단일 인터페이스로 병합합니다:

    typescriptCopyEditinterface User {
      id: number;
      name: string;
      email: string;
    }
  

• user 객체를 생성할 때, 병합된 인터페이스의 모든 속성이 있어아합니다. 속성이 누락된 경우 TypeScript에서 오류를 발생시킵니다.

선언 병합은 제3자 라이브러리를 사용할 때 특히 유용합니다. 기존 인터페이스에 새로운 속성을 추가하거나 확장할 수 있어 라이브러리의 소스 코드를 수정하지 않고.

extends 키워드를 사용한 인터페이스 병합

extends 키워드를 사용하면 한 인터페이스가 다른 인터페이스로부터 속성과 메소드를 상속받아 두 인터페이스의 속성을 결합한 새로운 인터페이스를 만듭니다.

예시:

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

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};

작동 방식:

• 인터페이스 Person은 name과 age 두 가지 속성을 정의합니다.

• 인터페이스 Employee은 extends 키워드를 사용하여 Person의 속성을 상속합니다.

• 인터페이스 Employee은 또한 새로운 속성 employeeId를 추가합니다.

• employee 객체는 Person과 Employee의 모든 속성을 포함해야 합니다.

이 접근 방식은 계층적 관계에 이상적입니다. 예를 들어, 공유 속성을 위한 기본 인터페이스를 정의하고 특수화된 유형에 대해 확장할 수 있습니다.

3. & 연산자를 사용한 유형 병합

& 연산자는 교차 유형으로 알려져 있으며, 여러 유형을 단일 유형으로 결합할 수 있습니다. 결과 유형에는 각 유형의 모든 속성과 메서드가 포함됩니다.

예시:

typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "[email protected]",
  phone: "123-456-7890",
};

동작 방식:

• Address와 ContactInfo는 두 개의 별도 유형입니다.

• 직원상세정보는 주소 & 연락처정보를 사용하여 생성된 교차 유형입니다.

• 직원 객체는 주소와 연락처정보의 모든 속성을 포함해야 합니다. 누락되거나 잘못된 유형의 속성은 TypeScript 오류를 발생시킵니다.

교차 유형은 관련이 없는 유형을 결합하거나 API 응답과 같이 다른 데이터 구조를 병합해야 하는 특정 사용 사례를 만들 때 유용합니다.

각 접근 방식을 사용해야 하는 시기

1. 선언 병합: 기존 인터페이스를 확장하거나 보강하려는 경우에 사용하며, 특히 타사 라이브러리나 공유 코드베이스에서 사용합니다.

2. extends 키워드: 기본 인터페이스가 더 구체적인 유형으로 특수화될 수 있는 계층적 관계에 사용합니다.

3. Intersection types (&): 여러 관련 없는 타입을 특정한 사용 사례를 위해 단일 타입으로 결합해야 할 때 사용합니다.

이러한 병합 기술과 그 영향을 이해함으로써 TypeScript 코드를 효과적으로 구조화하여 재사용성과 유지보수성을 향상시킬 수 있으며 타입 안전성을 유지합니다.

TypeScript에서 번들링 및 변환

모든 브라우저가 TypeScript에서 사용하는 최신 JavaScript를 지원하는 것은 아닙니다. 따라서 TypeScript 코드(.ts 파일)를 모든 브라우저와 호환되는 전통적인 JavaScript(.js 파일)로 변환하기 위해 TypeScript 컴파일러 또는 tsc를 사용할 수 있습니다. tsc는 타입이나 클래스와 같은 TypeScript 특정 요소를 브라우저가 해석할 수 있는 JavaScript 코드로 번역합니다.

TypeScript 파일을 실행하려면 tsc를 사용해야 합니다. npm을 사용하여 tsc를 설치한 다음 .ts 파일을 .js 파일로 변환할 수 있습니다. tsc를 사용하려면 tsc 명령어 앞에 TypeScript 파일의 이름을 지정하면 됩니다. 예를 들어, app.ts라는 파일이 있다면 다음과 같이 입력하여 실행할 수 있습니다:

tsc app.ts

Webpack 또는 Parcel은 브라우저에 TypeScript 코드를 배포하는 데 자주 사용됩니다. 이러한 도구는 TypeScript를 포함한 모든 JavaScript 파일을 번들링하여 성능을 향상시키고 웹사이트 구현을 쉽게 만듭니다. 또한 코드의 크기를 줄이고 브라우저 속도를 향상시킴으로써 코드 로딩을 최적화합니다.

TypeScript를 활용하여 더 나은 코드 작성하기

JavaScript 개발자로서 TypeScript를 받아들이면 더 견고하고 유지보수가 쉬운 코드를 작성할 수 있는 가능성이 열립니다. 이 안내서에서 소개된 기본 개념을 이해하고 TypeScript의 정적 유형 시스템을 활용하여 개발 초기에 오류를 빨리 잡아내어 더 적은 버그와 원활한 코드 유지보수를 이끌어낼 수 있습니다.

TypeScript를 사용함으로써 JavaScript 개발자는 코드 품질과 생산성을 향상시킬 수 있습니다. TypeScript를 탐구하고 연습할수록 더 강력한 기능과 기능을 발견할 것입니다.

계속해서 한계를 뛰어넘고 TypeScript 세계로 더 깊이 파고드세요. 😉