Reputation: 4224
In angular - the models (model interfaces) are declared like so:
export interface PersonInterface {
id: number;
name: string;
}
and then in some other component,service etc. your import this interface and use it like so:
...
import { PersonInterface } from './blabla';
...
export class SomeService {
person: PersonInterface;
}
So my question is - what is the purpose of using export
in the declaration of the interface?
interface PersonInterface {
id: number;
name: string;
}
If I don't use export - I can still use it in the service and I even do not need to import it:
export class SomeService {
person: PersonInterface;
}
Everything works fine, no errors and from the IDE I can go to the declaration if the interface (Ctrl+Click over the interface name). Am I missing something?
Cheers
Upvotes: 0
Views: 512
Reputation: 1103
This goes to a long story of javascript history. In early ages you had to manually specify your javascript files using <script src="name.js">
tag with the exact order - top to bottom. After the script is attached all it's declarations like var a = 5
or function util(){}
will be available for all the scripts below it and globally. It was very hard to hide this declarations from the global scope to achieve encapsulation, so there became a need to create something new.
Later on the es modules
arrived. In order to use some function from other script, you had to export
it at the very end of that script. That means that all the other, non-exported declarations (functions and variables), were encapsulated (hidden) from other scripts. This led to more resilient scripts with some defense from accident modifications (imagine someone uses a bunch of scripts for the first time, it would be a nightmare to analyze 10+ scripts without any docs). The script with export
declaration looked like:
var a = 5;
function b(){};
module.exports = {
a: a,
b: b
}
In 2012s the Typescript was created. Besides all it's beautiful capabilities like static types, proper type-checking and syntax sugar, it also provided a better way to export/import
functions, variables and classes. The syntax became:
import Something from '../other.script'
for default exports// other.script.ts contents
export default const A = '5'; // this will be imported in other file
import {exactOne, exactTwo} from '../other.script'
for non-default exports// other.script.ts contents
export const exactOne = 1;
export const exactTwo = 2;
export const exactThree = 3; // this is NOT imported above, but it's possible to import this const.
const exactFour = 4; // this const cannot be imported at all
import * as AllTogether from '../other.script'
for bulk import.// other.script.ts contents
export const a = 'a';
export const b = 'b';
// the AllTogether variable above will be imported like {a: 'a', b: 'b'}
Hope this helped!
Upvotes: 1