I'm a beginner level in writing in TypeScript and working with Angular, but I am experienced in JavaScript. From what I've read, any TypeScript would be translated into JavaScript and compiled. So when I code in the TypeScript file (e.g. the whatever.component.ts file), does that mean I can mix or introduce JavaScript language code inside where I also write TypeScript in the .ts file?
How does this all exist within the .ts file in regards to a code readability aspect for someone who is just learning TypeScript/Angular?
You can of course use JavaScript anyhow you like it. However, TypeScript is built to help the developers maintaining projects by using variables types. The types can then easily be read and previewed by good IDE with the appropriate extensions.
Get used to adding types. Use interfaces for custom objects, embrace the Angular way and you will forget you ever had to deal with JavaScript very soon.
A good base for productive IDE would be Visual Studio Code with the Angular Essentials extension.
Welcome to the Angular community!
Related
So I've started using VsCode over Atom recently and love it, the issue is I develop for software that uses its own JS API with no proper integration into anything.
I've started trying to implement my own autocomplete/intellisense structure using their pdf into VsCode to speed up my workflow, currently I'm simply using a JS file that is full of empty functions and objects with a bunch of JSDoc comments to help VsCode Intellisense identify what's what, that seems to be working fine so far but it means importing this "useless" file into every project I work on.
I looked into extending the JS language using a language server but that seems way too complex for what I need (plus it looks like I'd be building the entire Javascript language from scratch).
Does anyone have any recommendations ect?
Kind regards.
Edit
Sorry I also would like the ability for it to pass linting as right now it gets a bit funky with it.
You likely do not need an extension for that your example use case.
VS Code's intellisense for libraries is powered by .d.ts typing declaration files. The declaration files for the library you are using can either be written in your current workspace as you are currently doing, or—preferably—shipped with the library itself. Many npm modules ship their with typing definitions files, while other libraries have typing definition files provided by the community through DefinitelyTyped.
You alternatively bundle d.ts types file into as a separate npm package that you include in any project that needs them
My front end is an Angular 1.x project with tons of files. I basically need to validate it and find any errors that are there in any of the files. Specifically, errors that can break the page. In compiled/static type languages like Java, this is very easy, as the compiler will tell you exactly what's wrong. However, since JS is interpreted/dynamically typed, I can't figure out a way to "build" these files and find errors like I would for compiled languages. Going to every single page in the browser after I make any change is neither practical nor scalable.
I am also not using TypeScript or ES6 and it's not possible at the moment to migrate to any of them. Tools like ESLint and JSHint have also not been very successful, since they only bring out minor errors within that file. However, a lot of major code is spread over several files. Although my code is already all ES5, I thought about concatenating all JS files together in one file and running babel on it. But have it been sure how to manage dependencies during the concatenation (such as in what order to concatenate files).
This cant be the only project that uses vanilla JS and needs to be validated for errors. Anyone has any ideas on how I should go about accomplishing the task?
I highly recommend writing tests using jasmine and karma. I've found the two of these integrate really well with Angular and test driven development is highly regarded as one of the best development styles.
With all of this being said, I understand that's not what you're looking for directly because you want more of a "compiler" like solution. The closest thing that you can get to this in JS in my opinion is a linter and when combined with tests, this solution is rather good at finding errors in JS code.
In trying to understand TypeScript a little more, what are the relations between all of the file extensions?
TypeScript, *.ts
Definition, *.d.ts
Map, *.map
JavaScript, *.js
I initially started entering the question above thinking to myself that someone would come along and help me out. Then I noticed an "answer your own question" option and I was inspired by Jeff Atwood's encouraging blog post - so I decided I should attempt to answer my own question. I had to do some research but now I have the understanding I was originally looking for.
TypeScript, *.ts
A typed superset of JavaScript that "compiles" to plain JavaScript. These files have the potential to utilize type-safety and strongly-typed syntax, with IDE intellisense.
Definition, *.d.ts
A *.d.ts file is used to provide TypeScript type information about an API that's written in JavaScript. Type definition files contain the defining types for all of the public APIs within a corresponding .js, for example - JQuery has jQuery.js without the jQuery.d.ts a TypeScript file consuming jQuery wouldn't know about its types, therefore intellisense is gone.
Map, *.map
A .map file is a source map file that let tools "map" between the emitted JavaScript code and the TypeScript source files that created it. This concept has been around since CoffeeScript.
JavaScript, *.js
According to MDN:
JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
The relationship between a .ts file and a .js file is that a TypeScript file compiles down to a JavaScript file.
I am at the starting point of trying to build a JavaScript library for our RIA application at work. Currently we have lots of JavaScript files with functions all in global scope and I would like to attempt to put some reasonable namespace and context to our functions. Possibly putting them into object form.
I've been looking at other open source libraries to help me understand the best way to build a library. I see a lot of .js files with the following in one particular open-source project.
/**
* #required OpenLayers/Map.js
*/
for example.
Does this have any meaning other than just being a comment in the file?
Is there some kind of way to import other .js files into your main build with this annotation or an import statement like in Java?
This code is using JsDoc (http://jsdoc.sourceforge.net/) or something similar to create documentation from the source code, most likely.
Javascript doesn't actually have annotations.
Choose RequireJS. It is a JavaScript file and module loader. It implements the CommonJS proposal.
It's a PHPDoc-style comment, telling anybody working with the code that it will not work properly without OpenLayers/Map.js
JavaDoc, the grandaddy of all code documentation/annotation systems for which all others (I think) are derived:
http://www.oracle.com/technetwork/java/javase/documentation/index-137868.html
I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?
I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.
I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.