Typescript - import ... 和 import {...} 之间的区别（带花括号）
在TypeScript中，我们可以使用import语句来引入其他模块或文件中的代码。在import语句中，我们可以使用两种不同的方式来导入代码：使用import ...和import {...}。虽然它们看起来很相似，但它们之间有一些重要的区别。import ... 语法当我们使用import ...语法时，我们可以导入整个模块或文件的默认导出。默认导出是指在模块或文件中只有一个主要的导出，它可以是一个类、函数或对象。当我们使用import ...语法时，我们可以给导入的内容起一个任意的名称。下面是一个使用import ...语法的示例代码：typescriptimport myModule from './myModule';// 使用导入的模块或文件中的默认导出myModule.someFunction();在上面的例子中，我们使用import ...语法将整个myModule模块导入，并将其命名为myModule。然后，我们可以使用myModule来访问模块或文件中的默认导出。import {...} 语法当我们使用import {...}语法时，我们可以选择性地导入模块或文件中的具体导出。具体导出是指在模块或文件中有多个导出时，我们可以选择性地导入其中的某些部分。当我们使用import {...}语法时，我们需要使用导出的名称来引用导入的内容。下面是一个使用import {...}语法的示例代码：
typescriptimport { someFunction, someVariable } from './myModule';// 使用导入的模块或文件中的具体导出someFunction();console.log(someVariable);在上面的例子中，我们使用import {...}语法选择性地导入myModule模块中的someFunction函数和someVariable变量。然后，我们可以直接使用这些导入的内容。区别现在我们来一下import ...和import {...}之间的区别。1. 使用import ...导入的是整个模块或文件的默认导出，而使用import {...}导入的是具体导出。2. 使用import ...时，我们可以为导入的内容起一个任意的名称，而使用import {...}时，我们需要使用导出的名称来引用导入的内容。3. 使用import ...时，我们只能导入模块或文件的默认导出，而使用import {...}时，我们可以选择性地导入模块或文件的具体导出。在TypeScript中，我们可以使用import ...和import {...}来导入其他模块或文件中的代码。两者之间的区别在于导入的是默认导出还是具体导出，以及我们是否可以为导入的内容起一个任意的名称。根据具体的需求，我们可以选择合适的导入方式来使用导入的代码。希望本文对你理解TypeScript中import ...和import {...}之间的区别有所帮助。参考代码
typescript// myModule.tsexport default { someFunction() { console.log("This is a default function"); }, someVariable: "This is a default variable"};export function anotherFunction() { console.log("This is another function");}export const anotherVariable = "This is another variable";typescript// main.tsimport myModule from './myModule';import { anotherFunction, anotherVariable } from './myModule';myModule.someFunction();console.log(myModule.someVariable);anotherFunction();console.log(anotherVariable);上面的代码中，myModule.ts文件导出了一个默认对象和另外两个具体的导出。在main.ts中，我们首先使用import ...将整个myModule模块导入，并给它起了一个名字myModule。然后，我们使用myModule对象来访问默认导出的内容。接下来，我们使用import {...}导入myModule模块中的anotherFunction函数和anotherVariable变量。然后，我们可以直接使用这些导入的内容。这个例子演示了使用import ...和import {...}的不同方式来导入模块中的代码。