TYPESCRIPT MODULES

Noam Kfir

■ Senior Architect at Sela■ Front-End.IL Meetup organizer■ Telerik Developer Expert

■ @NoamKfir■ noam@kfir.cc

What Are 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.jsAMD

RequireJSECMAScript 6/2015 SystemJS

Custom Modules

Different JS

Versions

Internal Modules

Represent namespaces• The module name unrelated to file

name• Can be nestedProvide scope• Declarations inside the module are

private• Can be exposed with the export

keyword

Internal Modules - Syntaxmodule 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 a TypeScript 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 namespacesProvide 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 - Syntaximport 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/exportAmbient external module declaration• find module by quoted name

Locating Type Info

Declaration Merging

■ Same kind– module, class, interface, function, value

■ Different kinds– module/class– module/function– module/enum

THANK YOU!Noam Kfir

@NoamKfirnoam@kfir.cc