Some noobish typescript/javascript question

[HappinessSam]

Hi, new to the forum. Also new to javascript, typescript and visual studio. What I am is a fairly experienced AS3 dev who's giving in a finally trying some javascript. It was suggested I try TS and use it to ease my way into JS, learning from the JS visual studio spits out. It's going ok, but I keep on feeling like I'm missing something, and probably the code I'm producing is fairly wonky. I have a few questions I'm hoping you guys can help with. they're probably obvious if you know what you're doing. I did do some searching but all the examples and tutorials I've found only use one TS file and my problems are with working with many.

 

- I'm used to coding with lots classes, but visual studio spits out everything as separate js files. Does it have a way to pull these together into one big js file or do I need to use another programme. I assumed this is something I should do - I don't fancy having a simple game that needs 50 different js files included. It's also a hassle having to keep updating the default.htm by hand to add new files in. There must be a way to automate this?

 

- Is there anyway to add resource/class paths like in Flash builder or Flashdevelop? I can't work out how to do it in VS so I've been adding everything into my source folders, but again, surely there's a better way?

 

- Are modules worth it? I pretty much ignored them initially, then I used Rich's convert tool to convert over some AS3 stuff and it used them as standard so  assume they're best practise?

 

 - Talking of modules, I was looking at the js code generated and it seems so bloated.

 

module com.utterlySuperb.nineBall.engine {   export class Game {           constructor(public stage: any) {               var gameState: GameState = GameState.getInstance();               gameState.reset();        }   }}

gives you

 

 var com;(function (com) {    (function (utterlySuperb) {        (function (nineBall) {            ///<reference path='../model/GameState.ts'/>            (function (engine) {                var Game = (function () {                    function Game(stage) {                        this.stage = stage;                        var gameState = GameState.getInstance();                        gameState.reset();                    }                    return Game;                })();                engine.Game = Game;                            })(nineBall.engine || (nineBall.engine = {}));            var engine = nineBall.engine;        })(utterlySuperb.nineBall || (utterlySuperb.nineBall = {}));        var nineBall = utterlySuperb.nineBall;    })(com.utterlySuperb || (com.utterlySuperb = {}));    var utterlySuperb = com.utterlySuperb;})(com || (com = {}));

Which seems mental. Am I just structuring it wrong - should I not being using so many levels? Or are modules just not appropriate  for this kind of small projects?

 

Anyway, thanks. I probably have another bazillion questions, but these are the one that are bugging me and that I can't really google the answers to.

[Ezelia]

well, such module naming is a habit from Java am I right ?

Actually, you don't have to define a namespaces if you are not using it.

if you still want to have the long naming without TS garbage code just define your useful module

 

 

module engine {   export class Game {           constructor(public stage: any) {               var gameState: GameState = GameState.getInstance();               gameState.reset();        }   }} 

then create a pseudo namespace and add your module

 

 

var com = com || {};com.utterlySuperb = com.utterlySuperb || {};com.utterlySuperb.nineBall = com.utterlySuperb.nineBall || {};com.utterlySuperb.nineBall.engine = engine; 

[rich]

Yeah I usually only use modules 2 deep at the very most. To answer your first question though, you can get Visual Studio to output a single JS file by doing this:

 

Go into your VS project and open up the csproj file. For example TestGame.csproj - be careful to open the csproj file and NOT the csproj.user file. The one you want has the little green box icon with the C# in the middle of it. The purple VS icon is the user file, ignore that one. Anyway open it into a text editor.

 

Scroll to the bottom where you'll find the TypeScript control block.

 

This is what I change all of my projects to:

 

 

<TypeScriptTarget>ES5</TypeScriptTarget><TypeScriptIncludeComments>true</TypeScriptIncludeComments><TypeScriptSourceMap>false</TypeScriptSourceMap><TypeScriptOutFile>flixel5.js</TypeScriptOutFile> 

 

Target ES5 allows you to use getters, setters and other advanced class stuff. The default is ES3. ES5 won't work on IE7/8 though, but does pretty much everywhere else. So let your project decide what you do here.

 

I disable the creation of SourceMaps, because I don't need them for this project - unless you are creating a public API or similar, you won't either.

 

The OutFile line is what tells TypeScript to compile all of the source into one single JS file, rather than every TS file into its own JS file.

 

Note that you need to set the above blocks twice, once for Debug Mode and once for Release mode.

[HappinessSam]

Thanks on the one output file thing, that's awesome. - Definitely the kind of thing that Microsoft should add to VS in later releases.

 

I think I'm going to look at my code and try to flatten it out. That com folder is definitely not needed, but I used to go by the principle that if I had more than ten classes in one package I needed to organise my code better. I tried running the btw fantastic as3->typescript on one of my games and I had some classes 6 deep, which on reflection is a bit silly.

 

Also, cheers on the signals typescript conversion. I was torn between using the events in the renderers or writing my own but that's so much better.

[Ezelia]

6 levels is definitely too much IMHO

the only software that need that detailled hierarchy are Frameworks since they embed so many things,

if you just want to organise your code two or three levels are more than enought

[mentuat]

thought I'd post this query here rather than start a new thread as it's directly relevent to Sam's issue...

 

I have everything set up all dandy - have added Rich's typescript control block amend to combine multiple referenced TS files but that seems to have disabled the ability to use the compile-on-save option in VS

 

so my total noob question is: how do you actually compile from VS and have it spit just the JS out? - if I hit f5 or 'build' it generates a bunch of unecessary files, tries (and fails) to launch via the browser and 'runs' it, whereas ideally I just want it to generate the JS (like the command line or previous compile-on-save option)

 

any ideas?

[tackle]

When you speak of VS, what version of Visual Studio do you refer to?
I know Visual Studio Express is free, so I installed the "for Web" version but I don't understand what would be the most suitable project for just mainly Typescript/Javascript in that program. So maybe I'm using the wrong version..?

[rich]

The version you've got sounds good to me. I use VS Pro 2012, but on my laptop I have the Web Express version installed and it works great.

[mentuat]

I'm using 'express 2012 for web' and all works perfectly apart from me being confused about what constitutes a 'build' or compile' - in an ideal world there'd be a keyboard shortcut within VS that compiles into one JS and launches/refreshes a tab in firefox

 

At the moment I am using the command line to build which works - but is a bit unwieldy.

 

should I be configuring the 'build' functionality in VS so it doesn't create .dll and .pdb files and launch the web server?  My googling is not getting me far - which generally means my question is too obvious or badly phrased!

[HappinessSam]

Weird. I'm using VS express 2012 for web too and when I click 'Build Solution' (Ctrl shift it compile and generate the single js file with no problems. I haven't done anything fancy - just created a tyescript project and added the TypeScriptOutFile node to the csproj.

I was using debug, which does launch Firefox, but I've found (as I mentioned in another thread) that VS doesn't copy json file over into the localhost directory so I'm having to hit build then manually refresh the browser, which is clunky, but not the end of the world.

[Ezelia]

@HappinessSam what do you mean by "VS doesn't copy json file over into the localhost directory" ?
are your json files not accessible from the local VS debugging server ?

if so just add the following lines in your web.config before </configuration>
 

 

  <system.webServer>    <directoryBrowse enabled="true" />    <staticContent>      <mimeMap fileExtension=".json" mimeType="application/json" />    </staticContent>  </system.webServer> 

[tackle]

HappinessSam, how does one "create a typescript project"? All I have is ASP projects.

 

Also, in case anyone uses turbulenz engine - what IDE would you recommend for working with that? I'm a web developer at work, doing PHP stuff and a lot of javascript etc, but even I am quite lost when it comes to complexity of the turbulenz setup. Since you have a python console connection to it and it includes NodeJS and other things, I'm all too confused

[HappinessSam]

Cheers Ezelia, that worked a treat. You have no idea how much googling I did trying to work out a solution to that.

 

tackle, if you don't have an option to create a Typescript project from the templates when you select new project, you might either have an old version of VS or the typescript plugin didn't installed correctly. If it's not one of those two I can't help - my VS experience is pretty minimal, sorry.

[Ezelia]

@tackle you need Visual Studio 2012 for Web then install the typescript plugin here : http://www.microsoft.com/en-us/download/details.aspx?id=34790

[binarez]

Hi, I have a question about my Typescript Visual Studio project. Why does it generate a DLL file in the bin folder?

[binarez]

Hi, I have a question about my Typescript Visual Studio project. Why does it generate a DLL file in the bin folder?

 

In case anyone else wonders: http://stackoverflow.com/questions/21895702/why-does-vs-net-2013-create-a-dll-file-in-the-bin-directory-when-i-build-my-html

[away168]

Just a little side note on TypeScript though, do not use long namespaces like that because when you make a cross reference between classes you'll end up in circular dependency issue. Say you have engine.component.Transform and engine.core.Entity, component needs a hold of Entity for faster reference and entity needs that Transform component attached to it, aand it'll throw you an error.

 

This JavaScript is an interpreted language and not a compiled language; these things are worth to know because it can cause a lot of trouble when you're doing large-scale JavaScript apps.