Coder Social home page Coder Social logo

isabella232 / demo-typescript-node-minimal Goto Github PK

View Code? Open in Web Editor NEW

This project forked from definitelytyped/demo-typescript-node-minimal

0.0 0.0 0.0 137 KB

Minimal demo showing how to use TypeScript with node.js/npm modules

TypeScript 100.00%

demo-typescript-node-minimal's Introduction

demo-typescript-node-minimal

Build Status

Minimal demo showing how to use TypeScript with node.js/npm modules

In the minimalistic example app we use the xregexp module to execute a simple RegExp on a string an log the output, and a local module to show relative imports.

This is a very simple example to show the essentials.

The typings are from DefinitelyTyped.

Prerequisites

Have node.js installed, it comes with the npm package manager.

Have the global tsc TypeScript compiler:

npm install typescript -g

Clone the repos to your local workspace

How to use

Install npm dependencies

Use your command-line:

A) From package.json (recommended for existing projects):

npm install

B) Manually (when adding new modules)

npm install xregexp --save

This will create the node_modules and add the xregexp package. If you look into the node_modules/xregexp folder you see a lot of stuff, but we don't have to be aware of any of that:

The magic happens when node loads a module: it will scan the node_modules folder and find the xregexp folder. In the package.json it will see the element "main": "./xregexp-all.js".

This tells node that the xregexp module uses that file as main-entry point. This also means you don't have to look into the folder as module resolution is all automated.

See http://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders for the actual logic (it is very clever).

Check the './typings' folder

It contains a folder xregexp with a file xregexp.d.ts. These names are not 'magic'. You have to explicitly reference them using a /// <reference .. tag in your code.

This particular typing defines a xregexp external module (notice the name matches the npm module's name)

Check the 'index.ts' file

Note the /// <reference .. tag, it is a relative path from this file to the typing .d.ts. It will add all it's content to the compilers namespace but not do anything on its own.

Note the import x = require('xregexp'). This serves two purposes:

  1. At compile time TypeScript will use it to attach type information, it expects to have type declaration for a xregexp module (this is why we had the reference mentioned above). 2
  2. At runtime it becomes the actual module import, it will use node's standard require system to get the xregexp module from the node_modules folder.

Note the import g = require('./lib/greeter');

This will import our own TypeScript module. When we compile the index.ts the compiler will also compile this sub module to it's own JavaScript file.

Compile the 'index.ts' file

We will compile index.ts to index.js Every file it imports automatically gets compiled to it's own module too.

Because we're on node and using import we will generate CommonJS modules:

tsc index.ts --module commonjs

Check the output

Open the index.js and ./lib/greeter.js. Because TypeScript is mostly syntax sugar this looks very similar to the source-code.

Notice how the import's are transformed in a plain var assignment.

The require's still have the same values. One has the npm module name and will be resolved by node, the other has the relative path to our own module.

Run the code

node ./index.js

It will run the code, in our case we see the output from the console in the example code (a simple RegExp result and a greeting).

Next steps

  • Add more modules, both from npm as well as your own.
  • Define your own typing for a module. Look at the pattern in the example or visit the guide on DefinitelyTyped.
  • Use TSD to pull definitions from DefinitelyTyped and work with the tsd.d.ts bundle to manage your references.

Contributions

Fixes and clarifications are very welcome. Send a pull request or leave a ticket if you found any problems.

License

Copyright (c) 2014 DefinitelyTyped

Licensed under the MIT license.

demo-typescript-node-minimal's People

Contributors

bartvds avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.