인터뷰 질문-TS(5): TypeScript에서 모듈이란 무엇입니까? 모듈을 가져오고 내보내는 방법은 무엇입니까?

인터뷰 질문-TS(5): TypeScript에서 모듈이란 무엇입니까? 모듈을 가져오고 내보내는 방법은 무엇입니까?

TypeScript에서 모듈은 코드를 구성하고 관리하기 위한 개념입니다. 모듈은 코드를 캡슐화하는 방법을 제공하므로 관련 기능과 데이터를 함께 구성하여 재사용 및 유지 관리 가능한 코드를 얻을 수 있습니다.

1. 모듈의 개념과 기능

모듈은 관련 변수, 함수, 클래스 및 기타 코드를 포함하는 독립적인 코드 단위이며 다른 모듈에서 가져와서 사용할 수 있습니다. 모듈의 주요 기능은 다음과 같습니다.

1. 구현 세부 사항을 캡슐화하고 숨깁니다.

모듈은 내부 구현 세부 정보를 숨기고 외부에서 볼 수 있는 인터페이스만 노출할 수 있습니다. 이렇게 하면 코드 보안 및 유지 관리 용이성이 향상됩니다.

2. 코드 재사용 및 구성:

모듈은 관련 기능과 데이터를 함께 구성하는 방법을 제공하므로 다른 프로젝트에서 모듈을 재사용할 수 있으므로 코드 재사용성과 가독성이 향상됩니다.

3. 전역 이름 충돌을 피하십시오.

모듈의 변수, 함수, 클래스 및 기타 코드는 모두 모듈 범위 내에 있으므로 전역 이름 충돌 문제를 피하고 코드의 신뢰성을 향상시킵니다.

4. 로딩 및 종속성 관리:

모듈 시스템은 종속성을 로드하고 관리하는 메커니즘을 제공하므로 필요할 때 동적으로 모듈을 로드하고 모듈 간의 종속성을 해결할 수 있습니다.

모듈을 사용하면 코드를 더 잘 구성 및 관리하고 코드 유지 관리 및 확장성을 개선할 수 있습니다.

2. 모듈 가져오기 및 내보내기

TypeScript에서는 import및 export키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다. 다음은 모듈을 가져오고 내보내는 몇 가지 일반적인 방법입니다.

내보내기 방법:

1. 기본 내보내기: 모듈은 기본적으로 함수, 클래스 또는 개체와 같은 기본값을 내보낼 수 있습니다. export default구문을 사용하여 기본 내보내기를 만들 수 있습니다 . 예를 들어:

   // mathUtils.ts
   export default function add(a: number, b: number): number {
         
         
     return a + b;
   }
   

2. 명명된 내보내기: 모듈은 함수, 클래스 또는 개체와 같은 여러 명명된 값을 내보낼 수 있습니다. 내보내기 이름을 지정하는 데 키워드를 사용할 수 있습니다 export. 예를 들어:

   // mathUtils.ts
   export function add(a: number, b: number): number {
         
         
     return a + b;
   }
   
   export function subtract(a: number, b: number): number {
         
         
     return a - b;
   }
   

3. 결합된 내보내기(재내보내기): 모듈은 통합된 외부 인터페이스를 달성하기 위해 다른 모듈의 내보내기 항목을 내보낼 수 있습니다. export결합 내보내기는 키워드 플러스 *또는 키워드를 사용하여 수행할 수 있습니다 as. 예를 들어:

   // utils.ts
   export * from './mathUtils';
   export {
         
          someFunction as aliasFunction } from './otherModule';
   

가져오기 방법:

import모듈을 사용할 때 키워드를 사용하여 다른 모듈의 내보내기를 가져올 수 있습니다 . 다음은 몇 가지 일반적인 가져오기 방법입니다.

1. import기본 내보내기 가져오기: 키워드 뒤에 내보낸 모듈의 이름을 사용하여 기본 내보내기를 가져올 수 있습니다 . 예를 들어:

   // main.ts
   import add from './mathUtils';
   

2. import명명된 내보내기 가져오기: 키워드 뒤에 중괄호를 사용하여 명명된 내보내기를 {}가져올 수 있습니다 . 예를 들어:

   // main.ts
   import {
         
          add, subtract } from './mathUtils';
   

3. 결합된 내보내기 가져오기: import플러스 키워드를 사용하여 *결합된 내보낸 모듈을 가져올 수 있습니다. 예를 들어:

   // main.ts
   import * as utils from './utils';
   

모듈 가져오기 및 내보내기를 통해 서로 다른 파일 간에 코드를 공유하고 필요할 때 관련 기능을 가져올 수 있습니다.

3. 모듈 로더

브라우저 환경에서 모듈을 로드하고 관리하기 위해서는 모듈 로더(Module Loader)를 사용해야 합니다. 일반적으로 사용되는 일부 모듈 로더는 다음과 같습니다.

• Webpack : 여러 모듈을 하나 이상의 정적 리소스 파일로 패키징할 수 있는 강력한 패키징 도구입니다.
• Parcel : 모듈 로드 및 종속성을 자동으로 처리하는 빠르고 구성이 필요 없는 패키징 도구입니다.
• SystemJS : 브라우저에서 모듈을 동적으로 로드하고 모듈 간의 종속성을 해결할 수 있는 범용 모듈 로더입니다.

이러한 모듈 로더는 구성 파일 또는 규칙에 따라 모듈을 로드, 구문 분석 및 실행할 수 있습니다.

4. 타사 모듈 사용

TypeScript에서는 다른 사람이 작성하고 우리가 사용할 수 있도록 제공되는 타사 모듈(외부 모듈)을 사용할 수 있습니다. 타사 모듈을 사용하려면 먼저 설치한 다음 import문을 사용하여 모듈을 가져와야 합니다.

예를 들어 npm 패키지 관리자를 사용하여 타사 모듈을 설치하고 가져올 수 있습니다.

// 安装第三方模块
npm install lodash

// 导入第三方模块
import * as _ from 'lodash';

타사 모듈을 사용하면 다른 사람의 코드를 사용하여 개발 속도를 높이고 코드 품질을 향상시킬 수 있습니다.

요약하다

모듈은 TypeScript에서 매우 중요한 기능으로 코드 구성 및 모듈화를 위한 강력한 도구로, 코드를 더 잘 구성, 관리 및 공유할 수 있습니다. 모듈 방식으로 개발함으로써 보다 강력하고 유지 관리가 가능하며 확장 가능한 애플리케이션을 구축할 수 있습니다.