소개

TypeScript 모듈 시스템은 손쉬운 관리 및 유지 관리를 위해 코드를 작은 덩어리로 분할하는 코드 구성 방법입니다. 현대 소프트웨어 개발에서 모듈화는 필수 개발 방법이 되었으며 모듈화의 장점은 분명합니다. 재사용성, 확장성, 유지 관리성 및 테스트 가능성이 모두 크게 향상되었습니다.

모듈 시스템이 필요한 이유는 무엇입니까?

JavaScript에서는 함수와 변수를 사용하여 코드를 구성할 수 있지만 프로젝트가 커지고 코드 양이 증가하면 이러한 방식으로 코드를 구성하기가 매우 어려울 것입니다. 이때 코드를 정리할 수 있는 더 나은 방법이 필요합니다. 바로 모듈 시스템입니다.
모듈 시스템을 사용하면 코드를 여러 개의 작은 파일로 나눌 수 있으며 각 파일에는 코드의 특정 부분만 포함되므로 코드를 더 잘 관리, 유지 및 재사용할 수 있습니다. 동시에 모듈 시스템은 JavaScript의 범위 문제를 해결하고 이름 충돌과 같은 문제를 방지하는 데 도움이 될 수 있습니다.

TypeScript 모듈 시스템의 중요성

전통적인 JavaScript 애플리케이션에서는 모든 코드를 동일한 파일에 넣는 것이 일반적입니다. 이로 인해 문서가 복잡해지고 유지 관리가 어려워집니다.
TypeScript 모듈 시스템은 코드를 더 작은 논리 단위로 분해하여 각 모듈을 더 쉽게 유지 관리하고 테스트할 수 있도록 도와줍니다. 또한 모듈은 서로 다른 응용 프로그램 및 프로젝트에서 공유할 수 있으므로 코드 재사용을 용이하게 합니다.

모듈화의 기본 아이디어

모듈화의 기본 아이디어는 코드를 각각 고유한 기능과 책임이 있는 작은 조각으로 나누는 것입니다. TypeScript에서 모듈은 하나의 类, 接口, 变量, 등이 될 수 있습니다. 모듈은 서로 다른 파일로 배포할 수 있고 및 를 통해 참조하고 내보낼 函数수 있습니다.命名空间importexport 关键字
TypeScript의 모듈 시스템은 두 가지 유형의 모듈 사양을 지원합니다: CommonJS및 ES6.
그 중 CommonJS스펙은 에서 채택하여 주로 사용하는 모듈 스펙 Node.js이고 服务器端的 JavaScript 编程, ES6스펙은 프론트엔드 개발에 사용되는 모듈 스펙으로 그 특징은 可静态分析, 可编译, 입니다 可按需加载等.

TypeScript 모듈 시스템의 유형

内部模块系统TypeScript에는 두 가지 유형의 모듈 시스템, 즉 및 가 있습니다 外部模块系统.
내부 모듈 시스템: 라고도 하며 로 정의 命名空间됩니다 namespace 关键字. 내부 모듈 시스템의 주요 역할은 이러한 문제를 将代码分组방지하는 것 입니다. . 따라서 외부 모듈 시스템을 사용해야 합니다.命名冲突虽然内部模块系统可以很好地组织代码，但是它并不能解决代码重用的问题
외부 모듈 시스템: 是指将代码分成多个独立的文件，每个文件是一个单独的模块. 외부 모듈 시스템은 모듈에 있는 export 关键字변수, 함수, 클래스 등을 내보냄으로써 다른 모듈에 있는 변수, 함수, 클래스 등을 가져올 수 있습니다. import 关键字외부 모듈 시스템은 코드를 잘 정리할 수 있으며 코드 재사용 문제도 해결할 수 있습니다.

TypeScript 모듈 시스템의 구문

TypeScript에서는 "import" 및 "export" 키워드를 사용하여 모듈을 정의하고 내보냅니다. 다음은 간단한 예입니다.

// file1.ts
export class MyClass {
      
      
    constructor() {
      
      }
}
// file2.ts
import {
      
       MyClass } from './file1';
const myClassInstance = new MyClass();

위의 예에서는 MyClass라는 클래스를 정의하고 다른 모듈에서 사용하기 위해 내보냈습니다. 그런 다음 다른 모듈에서 "import" 문을 사용하여 MyClass 클래스를 가져오고 해당 클래스의 인스턴스를 만듭니다.
TypeScript는 모듈을 가져오는 두 가지 방법인 默认导入및 를 지원합니다 命名导入. 기본 가져오기는 모듈에서 기본 내보내기를 가져오는 것을 의미합니다. 默认导出是通过 export default 语法定义的，只能有一个. 命名导入是指从模块中通过名称导入导出. 다음은 예입니다.
```
// default-export.ts
export default function myFunction() {
      
      }
// named-export.ts
export function myFunction() {
      
      }
// app.ts
import myDefaultFunction from './default-export';
import {
      
       myFunction } from './named-export';
```
위의 예에서 기본 및 명명된 내보낸 함수를 정의했습니다. app.ts 파일에서 기본 가져오기를 사용하여 myDefaultFunction 함수를 가져오고 명명된 가져오기를 사용하여 myFunction 함수를 가져옵니다.

TypeScript 모듈 시스템의 디렉토리 구조

TypeScript 모듈 시스템을 사용할 때 주의할 점은 模块应该与文件的物理位置保持一致. 예를 들어 애플리케이션에 "models"라는 폴더가 있고 해당 폴더에 여러 모델 클래스가 포함된 경우 각 모델 클래스를 별도의 파일에 넣고 "models" 모듈로 내보내야 합니다. 예제 디렉토리 구조는 다음과 같습니다.
```
app/
|--models/
    |--user.ts
    |--product.ts
|--views/
    |--home.ts
    |--cart.ts
|--app.ts
```
위의 예에서 각 모델 클래스를 별도의 파일에 넣고 "모델" 모듈로 내보냈습니다. 또한 각 보기 구성 요소를 별도의 파일에 넣고 자체 보기 모듈로 내보냅니다. 마지막으로 app.ts 파일에서 필요한 모듈을 가져옵니다.

요약하다

TypeScript 모듈 시스템은 코드를 구성하는 중요한 도구이며 개발자가 응용 프로그램을 더 잘 유지 관리하고 테스트하는 데 도움이 될 수 있습니다. 가져오기 및 내보내기 키워드를 사용하여 모듈을 정의하고 올바른 위치에 배치하여 전체 애플리케이션 구조를 유지할 수 있습니다. 기본 가져오기 및 명명된 가져오기를 사용하여 내보낸 클래스 및 함수에 쉽게 액세스할 수 있습니다. TypeScript를 사용하여 애플리케이션을 개발하는 경우 TypeScript 모듈 시스템을 이해하는 것이 중요합니다.

TypeScript 모듈 시스템: 코드를 구성하는 방법

목차

소개