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

Viewers also liked

Similar to TypeScript Modules

More from Noam Kfir

Recently uploaded

TypeScript Modules