typescript modules
TRANSCRIPT
TYPESCRIPT MODULES
Noam Kfir
■ Senior Architect at Sela■ Front-End.IL Meetup organizer■ Telerik Developer Expert
■ @NoamKfir■ [email protected]
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
