TypeScript Modules

Noam Kfir
■ SeniorArchitect at Sela
■ Front-End.IL Meetup organizer
■ Telerik Developer Expert
■ @NoamKfir
■ noam@kfir.cc

WhatAre Modules
■ Prevent name collisions
■ Group constructs logically
– Organization
– Namespacing
– Encapsulation
■ Implemented as scoped JavaScript objects

Superset of JavaScript
■ TypeScript has to work where JavaScript works
■ But module definitions differ:
CommonJS
Node.js
AMD
RequireJS
ECMAScript
6/2015
SystemJS
Custom
Modules
Different JS
Versions

Internal Modules
Represent namespaces
• The module name unrelated to file name
• Can be nested
Provide scope
• Declarations inside the module are private
• Can be exposed with the export keyword

Internal Modules - Syntax
module Internal {
export class B extends A {
a: A = new A();
}
}

Internal Modules -Type
Information
■ The compiler needs to know where to find the type info
/// <reference path="source.ts" />
– Compiler follows references, determines order
■ Or use tsconfig.json to create aTypeScript project
– Automatically sees all files in the directory

Internal Modules - Merging
■ Multiple files can define the same module
■ The compiler merges the individual modules
■ Scope is determined by original unmerged module
– Not shared

External Modules
Represent grouped constructs
• Module name defined by file name
• Don't need namespaces
Provide scope
• Declarations inside the module are private
• Can be exposed with the export keyword

Module Loaders
■ TypeScript doesn’t implement the module system itself
■ Uses module loaders instead
■ Unifies module declaration for external module loaders
■ Available loaders:
commonjs amd umd system es6

External Modules - Syntax
import m = require('mod');
export var t = m.something + 1;

Transpiled to AMD
define(['require', 'exports', 'mod'],
function(require, exports, m) {
exports.t = m.something + 1;
}
);

Transpiled to CommonJS
var m = require('mod');
exports.t = m.something + 1;

Aliases
■ Aliases are just shortcuts
■ Help shorted access to nested constructs
■ Can’t be combined with regular import
import foo = mod.foo;
class B {
a: A = foo;
}

Export = Syntax
■ External module syntax can be cumbersome
■ Export = syntax exports a single unqualified value
– Class, interface, module, function, enum
import A = require('./A');
class B {
a: A = new A();
}
export = B

ES6 Modules
■ External modules using ES6 syntax
■ More succinct than the regular external module syntax
■ More flexible than the the export = syntax

ES6 Modules – Syntax
• Exporting (from “A.ts”)
export class A {}
• Importing (to “B.ts”)
import { A } from './A';
export class B {
a: A = new A();
}

ES6 Modules – Default
Members
• Exporting (from “A.ts”)
export default class {}
• Importing (to “B.ts”)
import A from './A';
export class B {
a: A = new A();
}

Optional Module Loading
■ require() emitted only if a module is actually used at run time
■ If only type info is needed, require() isn’t emitted
■ Useful for type safety

Ambient Modules
■ Modules defined in type definition files – .d.ts
■ Provide type info for non-TypeScript files
■ Can be internal or external
■ Internal – mainly for client scripts
■ External –helps build larger definitions in one file

Ambient Internal Module –
D3.d.ts (simplified excerpt)
declare module D3 {
export interface Selectors {
select: { (selector: string): Selection; }
}
export interface Event {
x: number;
y: number;
}
}
declare var d3: D3.Base;

Ambient External Module –
node.d.ts (simplified extract)
declare module "url" {
export interface Url {
protocol?: string; hostname?: string;
}
export function parse(urlStr: string, …): Url;
}
declare module "path" {
export function join(...paths: any[]): string;
}

.ts file
• import x = require("name");
• top-level import/export declarations
.d.ts file
• like #1
• declaration file with top-level import/export
Ambient external module declaration
• find module by quoted name
LocatingType Info

Declaration Merging
■ Same kind
– module, class, interface, function, value
■ Different kinds
– module/class
– module/function
– module/enum

THANKYOU!
Noam Kfir
@NoamKfir
noam@kfir.cc

TypeScript Modules

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to TypeScript Modules (20)

More from Noam Kfir (16)

Recently uploaded (20)

TypeScript Modules