Javascript 类型脚本导出与默认导出
Javascript 类型脚本导出与默认导出,javascript,typescript,ecmascript-6,Javascript,Typescript,Ecmascript 6,导出和默认导出之间的类型脚本有什么区别。在所有教程中,我看到人们导出他们的类,如果在导出之前不添加default关键字,我就无法编译代码 var MyScreen = { /* ... */ width : function (percent){ return window.innerWidth / 100 * percent } height : function (percent){ return window.in
导出
和默认导出
之间的类型脚本有什么区别。在所有教程中,我看到人们导出他们的类,如果在导出之前不添加default
关键字,我就无法编译代码
var MyScreen = {
/* ... */
width : function (percent){
return window.innerWidth / 100 * percent
}
height : function (percent){
return window.innerHeight / 100 * percent
}
};
export default MyScreen
另外,我在官方网站上找不到默认导出关键字的任何痕迹
不编译。但是:
export default class MyClass {
collection = [1,2,3];
}
是的
错误是:错误TS1192:模块“src/app/MyClass”没有默认导出。
默认导出(导出默认值)
主要区别在于,每个文件只能有一个默认导出,并且可以按如下方式导入:
import MyClass from "./MyClass";
你可以给它取任何你喜欢的名字。例如,这很好:
import MyClassAlias from "./MyClass";
命名导出(导出
)
使用命名导出时,每个文件可以有多个导出,并且需要导入大括号中的导出:
import { MyClass } from "./MyClass";
注意:添加大括号将修复您在问题中描述的错误,大括号中指定的名称需要与导出的名称匹配
或者说您的文件导出了多个类,然后您可以这样导入这两个类:
import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass
或者,您可以在此文件中为其中任何一个指定不同的名称:
import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias
或者,您可以使用*作为导入导出的所有内容:
import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here
使用哪个?
在ES6中,默认导出是简洁的,因为;然而,当我在TypeScript中处理项目内部的代码时,我几乎总是喜欢使用命名导出而不是默认导出,因为它可以很好地进行代码重构。例如,如果默认导出一个类并重命名该类,则该类将仅重命名该文件中的类,而不会重命名其他文件中的任何其他引用。使用命名导出,它将重命名该类以及所有其他文件中对该类的所有引用
它还可以很好地处理(使用名称空间导出的文件-export*
-导出其他文件)。本手册的“示例”部分中给出了一个示例
请注意,即使只有一个导出,我对使用命名导出的看法也与-请参阅“红旗”部分相反。我相信这条建议只适用于您创建供其他人使用的API,并且代码不是您项目的内部代码。当我设计一个供人们使用的API时,我会使用一个默认的导出,这样人们就可以从“我的库名”导入myLibraryDefaultExport代码>。如果你不同意我这样做,我想听听你的理由
也就是说,找到你喜欢的!您可以使用一个、另一个或同时使用两个
附加点
默认导出实际上是名为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
下面是简单对象导出的示例
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) );
我试图解决同样的问题,但发现了一个有趣的建议,TypeScript Deep-Divefame,我们应该避免类的泛型export-default
声明,而是将export
标记附加到类声明中。导入的类应列在模块的import
命令中
那就是:而不是
class Foo {
// ...
}
export default Foo;
和简单的从'/Foo'导入Foo
在将导入的模块中,应使用
export class Foo {
// ...
}
和导入程序中的“/Foo”
导入{Foo}
其原因是类重构中的困难,以及为导出增加的工作。巴萨拉特的原始帖子名为export
在TS中,您可以使用export
关键字进行导出。然后可以通过import{name}从“/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'
默认导出
我们还可以使用默认导出。每个文件只能有一个默认导出。在导入默认导出时,我们省略了import语句中的方括号。我们也可以为我们的进口选择自己的名称
// foo.js file
export default class foo{}
// main.js file in same directory
import abc from "./foo";
它只是JavaScript
模块及其相关关键字(如import
、export
、和export default
)是JavaScript构造,而不是typescript。但是,typescript添加了接口和类型别名的导出和导入功能。这可能会有所帮助:一些人对此主题感兴趣。如果您演示如何导入此类,可能会有所帮助,我相信这就是错误发生的地方(您可能需要更改导入语法以修复错误场景)。“导出”和“导出默认值”根本不是TypeScript-它们是ES6。import myAlias=require(./PathToFile)发生了什么
并且文件中有export=IInterfaceOrClass
?是的,这就是为什么不举一个“命名导出”的例子呢?aws sdk/clients/sns没有默认导出,当从“/sns”使用导入sns访问sns时,我没有得到导出,但是导入myAlias=require(“./PathToFile”)起作用。我可以做些什么来更改它吗?从“/sns”导入sns而不进行源代码更改?如果您没有明确地输入关键字default
,该文件中还会有默认导出吗?如果是,规则是什么。
// foo.js file
function foo() {};
function bar() {};
export {foo, bar};
// main.js file in same dir
import {foo, bar} from './foo'
// foo.js file
export default class foo{}
// main.js file in same directory
import abc from "./foo";