I am working to understand Angular. As part of this, I began reviewing the TodoMVC example found here. I notice that the app has both .js and .ts files. My question is, do developers have to write both of these? I was under the impression that a developer writes the TypeScript (.ts) and it compiles to JavaScript (.js). If this is true, why would someone include the JavaScript files in the repo? Or, am I misunderstanding something?
When you write Angular2 application you write typescript files (TS).
When you run npm start or ng serve with angular-cli the ts file convert to js.
developer should only commit ts files to source control.
in this todomvc project the developer mistakenly put the js files.
Related
I'm working on a project which uses js source files from multiple directories and compiles them into a common dist/ directory which is used in production. One way I can test my changes to the js code would be to make the changes into the source code and reinstall the entire project to generate the new dist/ directory. Is there an easier and more practical way to do this?
As I like my production and development environments to be (mostly) equal I use source maps for this issue. This is the way I usually build by js:
JS Hint
Generate Source maps
Concat JS into one file
Uglify
I do this by using gulp and some plugins. Those shouldn't be hard to find.
The benefits of this aproach are:
Serving a small js file
no difference between dev and prod
readable JS source for debugging
no redeploy needed
I am using ionic to create a mobile app following the link at http://ionicframework.com/docs/v2/getting-started/tutorial/.
ionic start my-mobileapp sidemenu --v2
Then I start my app in a browser as follows.
ionic serve
All of this worked until I changed my file extensions from *.js to *.ts.
Error: Cannot find module './pages/getting-started/getting-started'
from '/Users/jwayne/git/my-mobileapp/app'
If I simply toggle/change the file extensions back to js then things work.
My question is how does ionic know that code stored in a js file is actually TypeScript and not JavaScript if TypeScript code is stored in a js file?
I think you should be typing that...
ionic start my-mobileapp sidemenu --v2 --ts
If you want to work with Typescript, you should start a project with the --ts flag, as suggested above. Then, you should go about changing parts of your code to make them Typescript compliant.
See here for a good short overview of Javascript (ECMA6) VS Typescript:
http://www.joshmorony.com/converting-ecmascript-6-to-typescript-in-ionic-2/
As a side note, if your project is not too complex yet, I highly suggest you follow the guide and move to Typescript.
I just installed VS 2015 Community.
After building no js files are created inside the solution or the explorer.
TypeScript is part of Community. The produced .js files aren't part of the project, so you won't see them unless you turn on 'show all files' from the solution explorer. Here is the button you need to press:
Then the .js files will appear after you build:
If you're not seeing these, then check to make sure you're using this project template:
I want to thanks all who tryied to help But the solution in cordova typescript project - The compiled .ts files are inside the www\scripts\appBundle.js.
*you may need to use #Micheal Braude solution to see the appBundle.js file.
thanks agian.
I`m not sure that VS 2015 Enterprise works like Community version, but I tried to explain you, how to create Simple TypeScript project, and configure it for using step by step.
Steps
Create new HTML Application, developed for TypeScript.
When you have done it, you would get something like on image below:
It is a simple structure of application, here we have file app.ts, html view, and css style-sheet.
Configure compilation - What you should to know about this step:
ES target version
Compile single merged file or separate files.
Enter project configurations -->> Open TypeScripts Compilation tab -->>
Choose required ES version in ComboBox -->> Write path to compiled file and it name, if needed (located slightly below).
Add your first file to solution and write some code in it
Create your file.
4.1. If you prefer separate compilation then you should add dependency for your js file into html view. Usually, the *.js file compiled in the same location folder of *.ts file, that`s why targeting on you ts file when write dependency to js file
4.2. If you prefer merged compilation, first that you need - it is configure order of file, it is very simple challenge:
Add into the main file (in my case usually it is app.ts) and write in it list of your dependencies
///<reference path="path/to/file1.ts"/>
///<reference path="path/to/file2.ts"/>
Than, you should replace in html view this default script path:
with path to your final js file
Test your application:
try to add some code that would help you to be ensure that your code works perfectly
run you application and ensure that it works as you expected.
Good Luck! I hope that this post helps you in your beginnings!!
P.S. Here working project.
I'm trying out TypeScript for the first time and I've downloaded the angularjs.TypeScript.DefinitelyTyped package from nuget but I cannot generate JavaScript files from it.
I've tried deleting the file, creating a new TypeScript file (called angular.ts) and this generates a JavaScript absolutely fine with the exact same code. I could keep this file and do the same with the others but it seems like I should be able to compile these sorts of files.
I've also looked into the Properties of my project and under TypeScript Build I have the following options activated:
ECMAScript version: ECMAScript 5
Compile on Save
Allow implicit 'any' types
Module system: none
Keep comments in JavaScript output
Generate source maps
I don't have any errors when I build my project and all of my other .ts files that I have added all generate JavaScript files without an issue. I've looked to see if this is a known Visual Studio issue but I can't seem to find much about it. Is there a setting for this or should it happen automatically?
Sorry if I misunderstood the question but you cannot compile d.ts files. When you see a d.ts file, you can think of it like a interface for a project that was not written in TypeScript.
For example, I use phaser game engine. So like everyone else, I go and get the phaser.js file. At this point, my TypeScript cannot understand this phaser.js file. So, I go and grab the phaser.d.ts file and it is that which contains the full API of the phaser.js.
So basically, .ts files will always compile to JavaScript, whereas .d.ts are the definition files providing the bridge to using a .js file!
We are using Typescript with Visual Studio in our app, but we also had some problems when trying to coerce VS 2013 to compile TypeScript to JavaScript. We opted out for Grunt plugin and no longer rely on VS. I suggest you do the same. One caveat: don't use watch in typescript Grunt task. It will trigger VS into infinite loop when you will be building your project. Instead when you apply changes to your .ts files, tab switch to command line and run grunt task for ts->js compilation.
I have some code I would like to ask questions about on stackoverflow. The code is written in AngularJS with Typescript, and does manipulation and watching of the $location.hash. I now have the code on github at https://github.com/svdoever/AngularJS-bookviewer. Is it possible to have this code, preferably without the compiled Typescript files, up at http://plnkr.co?
I read at https://twitter.com/filearts/status/290961349092208642 that Typescript should be suported on http://plunkr.co.
Edit:
Solution by Bassarat to add a gh-pages branch to the git repository did the job. See comments on his answer.
It isn't supported by plunker. But I tend to use http://typescript.io/ when I need third party lib support (e.g. angularjs). Otherwise I just stick with TypeScript Playground http://www.typescriptlang.org/Playground/
Update
You can use TypeScript anywhere you like using https://github.com/basarat/typescript-script (plunker sample : https://github.com/basarat/typescript-script#plunker)
That said many playgrounds now support TypeScript natively including plunkr : https://github.com/ggoodman/plunker-run-plugin/blob/master/README.md (just put "use typescript"; at the top of your file and add a tsconfig.json file 🌹
You can use TypeScript Compile to transform your TypeScript files into JavaScript.
Reference your TS files like this:
<script type="text/typescript" src="app.ts"></script>
And add these two JS files at the end of the HTML body:
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="//niutech.github.io/typescript-compile/js/typescript.compile.js"></script>
Kos Prov created a working TypeScript Plunker here.
Update
You can use SystemJS to load TypeScript files, although you'll need to manually bootstrap Angular.
http://plnkr.co/edit/kFsJ7q?p=preview
Use https://stackblitz.com/ instead, all live examples on angular.io use stackblitz now.
You could use Cloud 9 or Codio
https://c9.io
https://codio.com/
You can clone projects from github.
It is like an IDE and you will get a terminal. It has node installed.
I tested in cloud 9, but codio is similar you can use it too
You can run this command to install typescript
npm install -g typescript
then you can compile your .ts file from the terminal.
lets say that you have a file
hello.ts
you compile it using the following command
tsc hello.ts
If you are facing issues with compiling, please check the directory where your file is at.
http://plnkr.co/edit/NqELPE?p=preview
Here's a simple Hello World app that my colleague wrote that uses Typescript and Angular2
Simply use the Plunker tool for including packages and it works fine:
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime#0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.25/angular2.dev.js"></script>