CODEWITHSUNDEEP
javascriptangulartypescript
Combine
Combine

Reputation: 4224

Why angular model interfaces are exported?

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

Answers (1)

Yevhenii Dovhaniuk
Yevhenii Dovhaniuk

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

Related Questions