{"id":13503,"date":"2016-06-28T16:15:03","date_gmt":"2016-06-28T13:15:03","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=13503"},"modified":"2018-01-10T16:32:55","modified_gmt":"2018-01-10T14:32:55","slug":"typescript-example-using-requirejs","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/requirejs\/typescript-example-using-requirejs\/","title":{"rendered":"TypeScript example using RequireJS"},"content":{"rendered":"

<\/a>1. TypeScript with RequireJS<\/h2>\n

In this article we are going to explain how to create a TypeScript application and separate its components in modules. After that we are going to show how to load these modules using AMD with RequireJS and the TypeScript compiler options to support it.
\nAll code and examples used in this tutorial are available in the download section at the end of this article.
\nBefore starting with the article you need to install NodeJS in your system. Instructions can be found here: https:\/\/nodejs.org\/en\/<\/a>.<\/p>\n

\n

Table Of Contents<\/h3>\n
\n
1. TypeScript with RequireJS<\/a><\/dt>\n
2. RequireJS<\/a><\/dt>\n
3. TypeScript<\/a><\/dt>\n
4. Creating a TypeScript project with NodeJS<\/a><\/dt>\n
5. Modules in TypeScript<\/a><\/dt>\n
6. Example<\/a><\/dt>\n
7. Options<\/a><\/dt>\n
8. Download<\/a><\/dt>\n
9. Links<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>2. RequireJS<\/h2>\n

RequireJS is an AMD JavaScript library that supports asynchronous file and module loading. It is optimized for web browser usage but it is also possible to use in Java or Node environments. It is compatible with all main browsers and quite intuitive to use. Its main benefit is that it offers the option to logically structure an application following the AMD principles.<\/p>\n

In the article https:\/\/www.webcodegeeks.com\/javascript\/requirejs\/requirejs-tutorial-how-to-use-requirejs\/<\/a> you can find more information about how to use RequireJS.
\n 
\n[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

<\/a>3. TypeScript<\/h2>\n

TypeScript is a free and open source programming language created and supported by Microsoft. It enhances basic JavaScript with Object Oriented capabilities like object typing and classes support. Applications writen in TypeScript need to be transcompiled to JavaScript. The compiler is called tsc<\/code> and code written in TypeScript can be compiled to JavaScript in almost any JavaScript engine like NodeJS or a Browser, in this example we are going to use NodeJS to compile the application.<\/p>\n

As we said before we are going to install TypeScript using NodeJS, in order to do that, you can type:<\/p>\n

npm install -g typescript\r\n\r\n<\/pre>\n
To check that the installation has been successfull please type tsc<\/code> in your console and something like the following should appear:<\/p>\n
Version 1.8.10\r\nSyntax:   tsc [options] [file ...]\r\n\r\nExamples: tsc hello.ts\r\n          tsc --out file.js file.ts\r\n          tsc @args.txt\r\n\r\nOptions:\r\n --allowJs                           Allow javascript files to be compiled.\r\n --allowSyntheticDefaultImports      Allow default imports from modules with no default export. This does not affect code emit, just typechecking.\r\n --allowUnreachableCode              Do not report errors on unreachable code.\r\n --allowUnusedLabels                 Do not report errors on unused labels.\r\n -d, --declaration                   Generates corresponding '.d.ts' file.\r\n...\r\n<\/pre>\n
A good explanation and overview about TypeScript can be found in https:\/\/en.wikipedia.org\/wiki\/TypeScript<\/a>.<\/p>\n
<\/a>4. Creating a TypeScript project with NodeJS<\/h2>\n
In order to create our application we type the following<\/p>\n
npm init \r\n<\/pre>\n
and we accept all options that are prompted (in case you want to modify some, fell free to do it).<\/p>\n
We edit the package.json file and include the following to indicate a TypeScript dependency:<\/p>\n
package.json<\/em><\/span><\/p>\n
\/\/check download section to see JS code\r\n\"dependencies\": {\r\n    \"typescript\": \"^1.8.10\"\r\n  }\r\n<\/pre>\n
After that we edit again the package.json and add a new script to run the TypeScript compiler tsc<\/code>:<\/p>\n
package.json<\/em><\/span><\/p>\n
\/\/check download section to see complete JSON\r\n \"scripts\": {\r\n    \"test\": \"test\",\r\n    \"tsc_amd\": \"tsc --module amd Game.ts\"\r\n  },\r\n<\/pre>\n
We will explain later what options we are passing to the compiler.<\/p>\n
<\/a>5. Modules in TypeScript<\/h2>\n
Modules is all about scoping. That is classes, methods, functions, etc. declared in the scope of a module are not visible outside this scope. In order to make them visible they need to be exported. The same applies for using this variable, function, class, method, whatever outside this module: it needs to be imported.<\/p>\n
Modules features can be exported in one of the following ways:<\/p>\n