Typescript에서 내보내기와 기본값 내보내기의 차이점은 무엇입니까?

Typescript를 사용하는 경우 export 와 export default 의 차이점이 무엇인지 궁금할 수 있습니다. 이 문서에서는 export 및 export default를 사용하여 코드를 더 읽기 쉽게 만드는 방법과 이들 간의 차이점을 보여줍니다.

이 글을 읽기 전에 Typescript와 Javascript에 대한 기본적인 이해가 필요합니다. 그렇지 않은 경우 Typescript documentation 및 Javascript documentation 을 읽을 수 있습니다.

내보내기 및 내보내기 기본값은 무엇입니까?

export 및 export default는 변수, 클래스 또는 함수를 내보내는 두 가지 방법입니다. 등. 모든 것이 명확하고 이해하기 쉽도록 코드를 다른 파일로 분리하는 데 자주 사용됩니다. 내보낸 변수, 클래스 또는 함수를 가져올 수 있습니다. 키워드 import가 있는 다른 파일에서 등.

내보내다

//Add two numbers together
export function add(a: number, b: number): number {
  return a + b;
}

// Subtract two numbers
export function subtract(a: number, b: number): number {
  return a - b;
}

함수add 및 subtract는 math.ts 파일로 내보내집니다.

내보낸 함수 가져오기

이제 add에서 함수 subtract 및 math.ts를 가져와 파일 index.ts에서 사용할 수 있습니다.

import { add, subtract } from './math';

console.log(add(1, 2)); // 3
console.log(subtract(1, 2)); // -1

함수를 가져오려면 중괄호를 사용해야 합니다. 중괄호는 여러 함수, 변수 및 클래스를 가져오는 데 사용됩니다. 등.
export를 사용하여 변수, 클래스 및 함수와 같은 다른 항목을 내보낼 수도 있습니다. 등.

기본 내보내기

export default는 내보내기 전용 개체, 함수 또는 변수를 내보내는 데 사용됩니다. 등.
export , export default 와 달리 단일 변수, 클래스 또는 함수를 내보내는 데 사용됩니다. 한 번에 하나의 함수, 변수, 클래스 등만 내보낼 수 있습니다. 일반적으로 파일의 끝에 export default를 사용하지만 파일의 모든 위치에서 사용할 수 있습니다.

//Add two numbers together
function AddNumbers(a: number, b: number): number {
  return a + b;
}

export default AddNumbers;

기본 내보내기 가져오기

기본 내보내기를 가져오려면 키워드import와 파일 이름을 사용해야 합니다.

import AddNumbers from './math';

console.log(AddNumbers(1, 2)); // 3

기본 내보내기를 가져오기 위해 중괄호를 사용할 필요가 없습니다.

결론

이제 export 및 export default를 사용하여 코드를 더 읽기 쉽게 만드는 방법과 이들 간의 차이점을 알았습니다. Typescript 모듈에 대해 자세히 알아보려면 Typescript Modules 페이지를 방문하십시오. 이 기사가 export와 export default의 차이점을 이해하는 데 도움이 되었기를 바랍니다.