2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

타입스크립트에서 모듈을 내보내는 방법은 무엇인가요?

_____
타입스크립트에서 모듈을 내보내는 방법 FAQ

Q1. 타입스크립트에서 모듈을 내보내는 기본적인 방법은 무엇인가요?
A1. 타입스크립트는 ES6 모듈 방식을 사용합니다. 값을 다른 파일에서 사용할 수 있게 하려면 `export` 키워드를 사용합니다. 예를 들어:

```typescript
export const foo = 42;
export function bar() { }
```

이렇게 정의하면 다른 파일에서 `import { foo, bar } from './module';`로 불러올 수 있습니다.

---

Q2. 여러 가지를 한꺼번에 내보낼 수도 있나요?
A2. 네, 가능합니다. 여러 변수, 함수, 클래스 등을 한 파일에서 각각 `export` 하거나, 아래처럼 한 번에 내보낼 수도 있습니다.

```typescript
const foo = 42;
function bar() { }
class Baz { }

export { foo, bar, Baz };
```

---

Q3. 기본 내보내기(default export)는 어떻게 하나요?
A3. `export default`를 사용하면 모듈당 하나의 기본 내보내기를 설정할 수 있습니다.

```typescript
export default function() { console.log('default func'); }

// 또는
const foo = 123;
export default foo;
```

가져올 때는 임의 이름으로 불러올 수 있습니다.

```typescript
import anything from './module';
```

---

Q4. 이름 변경하여 내보내거나 가져올 수도 있나요?
A4. 예, 가능합니다.

- 내보낼 때 이름 변경:

```typescript
const secret = 999;
export { secret as code };
```
- 가져올 때 이름 변경:

```typescript
import { code as secretCode } from './module';
```

---

Q5. 타입도 함께 내보낼 수 있나요?
A5. 네, 타입과 인터페이스도 동일하게 `export` 합니다.

```typescript
export interface User {
id: number;
name: string;
}

export type Age = number;
```

---

Q6. 모듈을 모두 한꺼번에 다시 내보낼 수 있나요?
A6. 예, 재내보내기(re-export)도 가능합니다.

```typescript
export * from './otherModule';
export { foo, bar } from './anotherModule';
```

---

Q7. 모듈을 CommonJS 스타일로 내보낼 수도 있나요?
A7. 타입스크립트 컴파일러 설정에 따라 가능합니다.
`module.exports`를 직접 설정하는 대신, `export` 구문을 쓰는 것을 권장합니다. 만약 CommonJS를 써야 할 경우:

```typescript
const foo = 1;
module.exports = { foo };
```

이 경우, 컴파일러 설정에서 `esModuleInterop: true`를 권장합니다.

---

Q8. 요약: 타입스크립트 모듈 내보내기 기본 문법은?
A8.
- 여러 내보내기: `export const foo = ...;`
- 여러 아이템 한꺼번에 내보내기: `export { foo, bar };`
- 기본 내보내기: `export default function() {}`
- 타입 내보내기: `export interface X {}`
- 재내보내기: `export * from './mod';`

---

이상으로 타입스크립트에서 모듈을 내보내는 방법에 대한 FAQ를 정리했습니다.
타입스크립트(TypeScript)에서 모듈을 내보내는 방법은 여러 가지가 있으며, 이를 통해 코드의 재사용성과 유지 보수성을 높일 수 있습니다.

모듈은 코드의 구조를 명확히 하고, 서로 다른 파일 간의 의존성을 관리하는 데 도움을 줍니다.

여기서는 타입스크립트에서 모듈을 내보내는 다양한 방법에 대해 자세히 설명하겠습니다.

1. 기본 내보내기 (Default Export) 기본 내보내기는 모듈에서 하나의 값이나 객체를 내보낼 때 사용됩니다.

기본 내보내기는 `export default` 키워드를 사용하여 구현됩니다.

```typescript // myModule.ts class MyClass { sayHello() { console.log("Hello, World!"); } } export default MyClass; ``` 이 모듈을 다른 파일에서 사용할 때는 다음과 같이 기본 내보내기를 가져올 수 있습니다.

```typescript // main.ts import MyClass from './myModule'; const myInstance = new MyClass(); myInstance.sayHello(); // "Hello, World!" ```

2. 명명된 내보내기 (Named Export) 명명된 내보내기는 여러 개의 값이나 객체를 내보낼 때 사용됩니다.

이 경우 `export` 키워드를 사용하여 각 요소를 내보낼 수 있습니다.

```typescript // myModule.ts export const myVariable = 42; export function myFunction() { console.log("This is my function."); } export class MyClass { sayHello() { console.log("Hello from MyClass!"); } } ``` 이 모듈을 다른 파일에서 사용할 때는 다음과 같이 명명된 내보내기를 가져올 수 있습니다.

```typescript // main.ts import { myVariable, myFunction, MyClass } from './myModule'; console.log(myVariable); // 42 myFunction(); // "This is my function." const myInstance = new MyClass(); myInstance.sayHello(); // "Hello from MyClass!" ```

3. 재정의 내보내기 (Re-export) 타입스크립트에서는 다른 모듈에서 내보낸 요소를 재정의할 수 있습니다.

이를 통해 모듈 간의 의존성을 관리하고, API를 통합할 수 있습니다.

```typescript // myModule.ts export class MyClass { sayHello() { console.log("Hello from MyClass!"); } } // reExportModule.ts export { MyClass } from './myModule'; ``` 이제 `reExportModule.ts`에서 `MyClass`를 가져올 수 있습니다.

```typescript // main.ts import { MyClass } from './reExportModule'; const myInstance = new MyClass(); myInstance.sayHello(); // "Hello from MyClass!" ```

4. 타입 내보내기 (Type Export) 타입스크립트에서는 타입이나 인터페이스도 내보낼 수 있습니다.

이를 통해 코드의 타입 안전성을 높일 수 있습니다.

```typescript // myTypes.ts export interface User { name: string; age: number; } export type ID = string | number; ``` 이 타입을 다른 파일에서 사용할 수 있습니다.

```typescript // main.ts import { User, ID } from './myTypes'; const user: User = { name: "Alice", age: 30 }; let userId: ID = "12345"; ```

5. 모듈의 모든 내보내기 가져오기 (Namespace Import) 모듈에서 내보낸 모든 요소를 하나의 객체로 가져올 수도 있습니다.

이 경우 `* as` 구문을 사용합니다.

```typescript // myModule.ts export const myVariable = 42; export function myFunction() { console.log("This is my function."); } ``` 이 모듈을 가져올 때는 다음과 같이 사용할 수 있습니다.

```typescript // main.ts import * as MyModule from './myModule'; console.log(MyModule.myVariable); // 42 MyModule.myFunction(); // "This is my function." ``` 결론 타입스크립트에서 모듈을 내보내는 방법은 다양하며, 각각의 방법은 특정한 상황에서 유용하게 사용될 수 있습니다.

기본 내보내기와 명명된 내보내기를 적절히 활용하면 코드의 구조를 명확히 하고, 재사용성을 높일 수 있습니다.

또한, 재정의 내보내기와 타입 내보내기를 통해 모듈 간의 의존성을 관리하고, 타입 안전성을 강화할 수 있습니다.

이러한 기능들을 잘 활용하여 효율적이고 유지 보수하기 쉬운 코드를 작성할 수 있습니다.

작성자: 정지호 [비회원] | 작성일자: 1년 전 2024-09-10 05:32:15
조회수: 137 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.