타이프스크립트 내보내기 vs. 기본 내보내기

타이프스크립트 내보내기 vs. 기본 내보내기

Typescript의 차이점은 무엇입니까?export그리고.default export모든 튜토리얼에서 사람들이 보입니다.export그들의 클래스를 입력해, 내가 코드를 컴파일 할 수 없는 경우는,default키워드를 지정합니다.

또한 공식 타이프스크립트 문서에서 기본 내보내기 키워드의 트레이스를 찾을 수 없었습니다.

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 { /* ... */ }

주요 차이점은 파일당 기본 내보내기는 1개뿐이며 다음과 같이 Import할 수 있다는 것입니다.

import MyClass from "./MyClass";

원하는 이름을 붙일 수 있습니다.예를 들어, 이것은 정상적으로 동작합니다.

import MyClassAlias from "./MyClass";

이름 있는 내보내기(export)

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

이름 있는 내보내기를 사용하는 경우 파일당 여러 내보내기를 수행할 수 있으며 내보내기를 중괄호로 묶어서 Import해야 합니다.

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 *(다른 파일을 내보냅니다).이 예시는 이 답변의 "예" 섹션에 나와 있습니다.

내보내기가 1개뿐인 경우에도 명명된 내보내기를 사용하는 것은 TypeScript Handbook에 반하는 것입니다.「 Red Flags 」섹션을 참조해 주세요.이 권장사항은 다른 사람이 사용할 수 있는 API를 만들고 있고 코드가 프로젝트 내부에 없는 경우에만 해당된다고 생각합니다.사용자가 사용할 API를 설계할 때 기본 내보내기를 사용하여 사용자가 다음을 수행할 수 있도록 합니다.import myLibraryDefaultExport from "my-library-name";만약 당신이 이 일에 동의하지 않는다면, 나는 당신의 논리를 듣고 싶습니다.

원하는 것을 찾으세요!둘 중 하나를 동시에 사용할 수 있습니다.

추가 사항

는 이름 은 「 」입니다.default파일에 디폴트 내보내기가 설정되어 있는 경우는, 다음의 방법으로 Import 할 수도 있습니다.

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

그 외의 Import 방법에는 다음과 같은 것이 있습니다.

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 default.export클래스 선언에 태그를 붙입니다.는 [Import]에 .import명령어를 지정합니다.

즉,

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

간단한 ★★★★★★★★import Foo from './foo';에서는 Import를 사용해야 합니다.

export class Foo {
    // ...
}

★★★★★★★★★★★★★★★★★」import {Foo} from './foo'입업업수

그 이유는 클래스 리팩터링의 어려움과 수출의 추가 작업입니다.Basarat의 원래 게시물은 기본값 내보내기 회피에 있습니다.

이름 있는 내보내기

에서는, TS 의 export 를 할 수 .export키워드를 지정합니다. 다음 Import를 수 있습니다.import {name} from "./mydir";이를 이름 있는 내보내기라고 합니다.하나의 파일로 여러 개의 이름 있는 내보내기를 내보낼 수 있습니다.또한 수입품의 이름은 수출품과 일치해야 합니다.예를 들어 다음과 같습니다.

// foo.js file
export class foo{}
export class bar{}

// main.js file in same dir
import {foo, bar} from "./foo";

다음 대체 구문도 사용할 수 있습니다.

// foo.js file
function foo() {};
function bar() {};
export {foo, bar};

// main.js file in same dir
import {foo, bar} from './foo'

디폴트 내보내기

기본 내보내기를 사용할 수도 있습니다.파일당 기본 내보내기는 1개뿐입니다.디폴트 내보내기를 Import 할 때는 Import 스테이트먼트에서 각 괄호를 생략합니다.수입할 이름도 직접 선택할 수 있습니다.

// foo.js file
export default class foo{}

// main.js file in same directory
import abc from "./foo";

이건 그냥 자바스크립트야

및 (예: " " )import,export , , , , 입니다.export defaultscript JavaScript 구구체스크크립 。, 및 가 추가되었습니다.typescript에는 Import가 추가되어 있습니다.

다음은 단순 개체 내보내기의 예입니다.

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) );

언급URL : https://stackoverflow.com/questions/33305954/typescript-export-vs-default-export