타이프 스크립트 내보내기와 기본 내보내기

사이 타이프의 차이 무엇 export과 default export. 모든 자습서에서 사람들 export이 클래스를 사용하는 것을 보았고 default내보내기 전에 키워드를 추가하지 않으면 코드를 컴파일 할 수 없습니다 .

또한 공식 typescript documentation 에서 기본 내보내기 키워드의 흔적을 찾을 수 없습니다 .

export class MyClass {

  collection = [1,2,3];

}

컴파일하지 않습니다. 그러나:

export default class MyClass {

  collection = [1,2,3];

}

그렇습니다.

오류는 다음과 같습니다 error TS1192: Module '"src/app/MyClass"' has no default export.

기본 내보내기 ( export default)

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

주요 차이점은 파일 당 하나의 기본 내보내기 만 가능하고 다음과 같이 가져 오는 것입니다.

import MyClass from "./MyClass";

원하는 이름을 지정할 수 있습니다. 예를 들어 이것은 잘 작동합니다.

import MyClassAlias from "./MyClass";

명명 된 수출 ( export)

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

명명 된 내보내기를 사용하는 경우 파일 당 여러 내보내기를 수행 할 수 있으며 중괄호로 묶인 내보내기를 가져와야합니다.

import { MyClass } from "./MyClass";

참고 : 중괄호를 추가하면 질문에서 설명하는 오류가 수정되고 중괄호에 지정된 이름은 내보내기 이름과 일치해야합니다.

또는 파일이 여러 클래스를 내 보냈다고하면 다음과 같이 가져올 수 있습니다.

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

또는이 파일에서 다른 이름을 지정할 수 있습니다.

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

또는 다음을 사용하여 내 보낸 모든 것을 가져올 수 있습니다 * as.

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

어느 것을 사용해야합니까?

ES6에서 기본 내보내기는 사용 사례가 더 일반적 이기 때문에 간결합니다 . 그러나 TypeScript에서 프로젝트 내부의 코드를 작업 할 때 코드 리팩토링과 매우 잘 작동하므로 거의 항상 기본 내보내기 대신 명명 된 내보내기를 사용하는 것을 선호합니다. 예를 들어, 기본적으로 클래스를 내보내고 해당 클래스의 이름을 바꾸면 다른 파일의 다른 참조가 아니라 해당 파일의 클래스 이름 만 바뀝니다. 명명 된 내보내기를 사용하면 클래스 및 다른 모든 파일에서 해당 클래스에 대한 모든 참조의 이름이 바뀝니다.

또한 배럴 파일 (네임 스페이스 export *내보내기 를 사용하여 다른 파일을 내보내는 파일) 과도 매우 잘 어울립니다 . 이에 대한 예는 이 답변 의 "예제"섹션에 나와 있습니다.

하나의 내보내기 만있는 경우에도 명명 된 내보내기를 사용하는 것에 대한 나의 의견은 TypeScript 핸드북 과 반대 입니다. "Red Flags"섹션을 참조하십시오. 이 권장 사항은 다른 사람들이 사용할 API를 만들고 코드가 프로젝트 내부가 아닌 경우에만 적용됩니다. 사람들이 사용할 API를 디자인 할 때 사람들이 할 수 있도록 기본 내보내기를 사용합니다 import myLibraryDefaultExport from "my-library-name";. 당신이 이것에 대해 나에게 동의하지 않는다면, 나는 당신의 추론을 듣고 싶습니다.

즉, 원하는 것을 찾으십시오! 하나, 다른 것 또는 둘 다를 동시에 사용할 수 있습니다.

추가 포인트

기본 내보내기는 실제로 이름이 지정된 명명 된 내보내기 default이므로 파일에 기본 내보내기가있는 경우 다음을 수행하여 가져올 수도 있습니다.

import { default as MyClass } from "./MyClass";

그리고 다음과 같은 다른 가져 오기 방법 이 있습니다. 

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports

나는 같은 문제를 해결하려고 노력했지만 TypeScript Deep Dive 명성 의 Basarat Ali Syed 가 클래스에 대한 일반적인 선언을 피하고 대신 태그를 클래스 선언에 추가 해야한다는 흥미로운 조언을 찾았 습니다 . 가져온 클래스는 대신 모듈 의 명령에 나열되어야합니다 .export defaultexportimport

즉 : 대신

class Foo {
    // ...
}
export default Foo;

import Foo from './foo';가져올 모듈 의 단순함 을 사용해야합니다.

export class Foo {
    // ...
}

그리고 import {Foo} from './foo'수입한다.

그 이유는 클래스 리팩토링에 어려움이 있고 수출을위한 추가 작업이 있기 때문입니다. Basarat의 원래 게시물은 export default문제로 이어질 수 있습니다

간단한 객체 내보내기 예제가 있습니다.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

기본 파일에서 (새 인스턴스를 원하지 않거나 필요하지 않을 때 사용) 전역이 아니므로 필요한 경우에만 가져옵니다.

import MyScreen from "./module/screen";
console.log( MyScreen.width(100) );