TypeScript General Constructs reference guide - javascript

On the TypeScript GitHub page, there's a document that contains coding guidelines, explaining the do's and don't's of TypeScript: TypeScript Coding Guidelines. It says the following:
For a variety of reasons, we avoid certain constructs, and use some of our own. Among them:
Do not use ECMAScript 5 functions; instead use those found in core.ts.
Do not use for..in statements; instead, use ts.forEach, ts.forEachKey and ts.forEachValue. Be aware of their slightly different semantics.
Try to use ts.forEach, ts.map, and ts.filter instead of loops when it is not strongly inconvenient.
This makes sense to me. TypeScript obviously has a built-in library containing some ES5 functions optimised to be used within TypeScript. What I was wondering is if there's some kind of function reference like jQuery's own documentation, where each method has an explanation, example and other info regarding compatibility and version differences.
I've searched for this on the TypeScript website and on Google, but Google insists I'm searching for 'Generic Constructs' instead of 'General Constructs' (which Microsoft calls its built-in TS library). I can't really find anything related to the general constructs that they're talking about on the site, except for the core.ts file of course, which contains the general constructs.
Does anyone have a source I could use for this?

The coding guideline you refer to is the internal guideline for the TypeScript compiler project. It is not necessary the coding guideline of how you should write your project with TypeScript.
You should think of TypeScript as just JavaScript with a gradual type system.
The closer you keep your code close to JavaScript the better.
The TypeScript handbook would be a good starting point.
You can also check out the deep dive guide and other style guides available on GitHub.

Related

Why does CTRL-click on JavaScript Math function in VSCode show internal TypeScript code?

I wanted to investigate the internals of the Math object in JavaScript as running in Node. I assumed I would get information on what C++ methods the V8 engine called, etc. but I get information showing TypeScript interfaces for the Math object.
Can anyone explain why TypeScript interfaces are being shown when one displays information on V8's implementation of JavaScript's Math object?
The underlying detailed engine implementation of functions
Wouldn't make sense to the vast majority of script-writers
are not standardized - there are different environments, VSCode wouldn't assume that the file being examined would always be running in V8
In comparison, the TypeScript documentation for these sorts of built-in functions is standardized, and is relatively simple to understand, even for those who may not have seen it before.
In addition to what #CertainPerformance said:
How engines implement built-in functions is completely up to them: it could be a JavaScript implementation (in which case you could certainly argue that it could be instructive for IDEs like VSCode to show the source), it could be C++ (or whichever language the engine is written in), it could be hand-written assembly; in case of current versions of V8, Math.min is implemented using V8's own DSL ("domain specific language") called "Torque", which despite looking a bit like TypeScript is a totally different beast under the hood (in short: it gets compiled to C++ source, which in turn is compiled to an executable that produces assembly code which is then embedded into the V8 binary).
Compiled (C/C++/Rust/...) binaries in general (in Release builds) don't include information about which functions they consist of (much less those functions' source code), so there's no way for IDEs to get at that information even if they wanted to. (This is why "Debug" builds are a thing.)
If you still want to study V8's implementation, you can find many of the Math builtins here.
So, showing the TypeScript definitions of the signatures of the Math builtins is pretty much the best that a JavaScript IDE can do.

What does babel's airbnb preset actually do?

I'm learning how to use webpack and babel to compile javascript for front-end applications, and I'm curious about the airbnb babel preset, which a lot of people seem to use when developing react applications. So a couple questions I have:
Does this preset translate any code into code which keeps to airbnb standards?
If so, is it necessary if I use the airbnb style guide anyways?
Additionally, I don't see why it is so necessary for someone who does not keep to the style. Does anyone ever read the compiled code (which is typically minified anyways)? In my experienced I've only read source code in their separate, original files. If that code is not already airbnb styled, I don't see what the advantage is of styling it in compilation -- at least for purposes of reading (I know some of the airbnb standards are for functionality, which does make sense).
A preset is a set of plugins used to support particular language features. You use presets to take advantage of the latest JavaScript features that haven't yet been implemented in browsers. Presets will transform your source code and syntax to be compatible with native JavaScript which browsers understand. For example, the
#babel/preset-react will allow you to write JSX (JavaScript as XML) style code, which is commonly used to define React components, although JSX isn't naturally understood by the browser.
So what's the deal with the babel-preset-airbnb preset?
Well AirBnb decided to create a guide to present a "reasonable approach to writing JavaScript" since everyone writes JavaScript differently. Ideally, this guide gives a greater sense of structure and order to JavaScript applications. The entire guidelines can be found here, where AirBnb describes their conventions or advice for writing more maintainable JavaScript.
So as for your question:
Does this preset translate any code into code which keeps to airbnb standards? If so, is it necessary if I use the airbnb style guide anyways?
Yes, the purpose of presets, in general, is to translate your code into industry standards currently understood by the browsers. So the preset provided by the AirBnb team will transpile your code according to their style guide mentioned above. As for the second part of your question, personally I would since they're good coding conventions and it's never a bad thing to write code the right way and have it stick to muscle memory.
Now as for why the code is minified?
Most people minify their JavaScript code prior to releasing to production to reduce the number of bytes needed to be downloaded by browser to run their web application. This is why when you inspect code most of the time it's minified code. With that being said, the whole purpose of their preset is to transpile your code into code that conforms to their style guidelines.

Can TypeScript be used with existing JavaScript code?

I am working on pretty big existing web application with team. Time to time we experience common JavaScript coding nuances like case difference while function calling or missing operator etc.
I find TypeScript promising solution for such issues specially while working with team on different files/modules. It has many benefits like
Static code analysis
Better auto-completion
Code Minification
Dead Code Reduction
String Type Checking
Strict OOP
I know there are converters available which can convert JavaScript to typescript but I do not want to convert existing project files to TypeScript.
I was wondering if it is possible to keep existing code as is and develop new modules/files in TypeScript. May be we can migrate existing files in gradual manner.
Will they work well together? How to do it?
I have tried to read online but couldn't find much relevant information other than converting existing projects to TypeScript.
Yes.
From the language spec :
TypeScript is a syntactic sugar for JavaScript. TypeScript syntax is a
superset of ECMAScript 6 (ES6) syntax.
Every JavaScript program is also a TypeScript program. The TypeScript compiler performs only file-local
transformations on TypeScript programs and does not re-order variables
declared in TypeScript. This leads to JavaScript output that closely
matches the TypeScript input. TypeScript does not transform variable
names, making tractable the direct debugging of emitted JavaScript.
TypeScript optionally provides source maps, enabling source-level
debugging. TypeScript tools typically emit JavaScript upon file save,
preserving the test, edit, refresh cycle commonly used in JavaScript
development.

How to add a new class to Google V8?

I'm a new comer in Google V8 and Javascript, and I'm trying to add a new class to Javascript using C++.
I've finished some work using Webkit's V8 binding, references are: webkit idl and v8 binding
Now I want to integrate it into V8 engine directly, by modifying V8's code instead of simply using V8's api to make a extension. In other words, I want to add a new class just like Array type in Javascript, using the same implementation mechanism.
I've searched the Internet, including docs in Google, but have only seen guides on embedding V8 with native code.
Where can I find guides about modifying V8's code?
Or where can I find docs about V8's design architecture?
Or can anyone describe how V8 implements the Array type in C++?
Thanks a lot.
Firstly, it's likely that you can actually get away with using the v8 api to do whatever it is that you want to do. You can use it to create prototypes that mostly behave the same as built-in objects, you can bind C++ function calls to JS function calls also. There's really no reason to modify v8 itself unless you need something to be extremely fast or to inspect or manipulate v8 internals. For instance, Chrome's DOM implementation uses the v8 API rather than being implemented in v8 directly. The embedder's guide actually has all the information you need to create "classes" (remember that in JS it's actually prototype inheritance): https://developers.google.com/v8/embed#templates.
That said, here's some good places to look in the source code for say, the array object. I'm not sure off any design doc, you're probably better off looking at the source.
The array object itself is here:
https://code.google.com/p/v8/source/browse/trunk/src/objects.h#8409
Some of the array api functions are implemented here (many use the same public APIs as you would for extending):
https://code.google.com/p/v8/source/browse/trunk/src/builtins.cc#511
Some of the array api functions are implemented in JavaScript: https://code.google.com/p/v8/source/browse/trunk/src/array.js
Do a search for JSArray and you'll see much more. Pay particular attention to the bits in the native code generator, because you if you really want to take advantage of some custom type written at this level, you'll want to write code to generate efficient machine code too, for a bunch of different architectures...
Edit: Looks like V8 documentation has moved (and are better) than when this answer was written, here's some quick links to useful documentation:
Wiki: https://github.com/v8/v8/wiki/Getting%20Started%20with%20Embedding
API docs: http://v8.paulfryzel.com/docs/master/index.html

Examples of good JavaScript code in open source web apps [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm struggling to find a way of writing good JavaScript code that would be efficient, widely accepted by other developers and not very ugly.
Until recently, what I used were just literal objects and bits of jQuery but after reading Douglas Crockford's "JavaScript: The Good Parts" I now fully realize that there's more to JavaScript than AJAX, DOM modifications and simple animation.
The problem is that JavaScript seems not much standarized. The amount of OOP/inheritance patterns available overwhelms me. I'm not used to every framework/library providing its own impementation of inheritance. I also don't want to make a wrong decision regarding such things because this would mean rewriting all the code in case of some problems.
So what I'm looking for are existing open source web applications that use JavaScript heavily, if possible on the client side, to see what patterns are used in real projects. I would like to see the code of web applications, not frameworks or libraries. I don't mind though if those web apps are based on some framework (and if it's Dojo or RequireJS it'll be even better because I'm using them ;)
What I always recommend to anyone who is interested in this kind of thing is: STICK TO WHAT YOUR TEAM DOES. If they use camelCase for methods, you use it. If they use snake_case for variables, you do it. If your team prefers spaces over tabs; use them.
Never go into a stablished team with standardized style changing things because it looks better unless it's causing heavy problems.
If you're not working on a team and you're interested on using a coding style; then use the style of the libraries you use the most.
If you use jQuery stick to jQuery Coding Style Guidelines
If you use Closure Library use JavaScript Google Coding Style
If you use MooTools Library use MooTools Coding Style Guideline
Organization wise, Closure is the best.. but to me somehow it feels like I'm reading JAVA instead of javascript. Go figure.
Yep. There are a few JavaScript gurus that have written alot about how to write JavaScript, about prototype based OOP with JavaScript, even about how indenting and naming variables should be done.
However, if you are looking for a large implementation of JavaScript to study as an example, I would look for HTML5 game implementations. It's practically guaranteed that you will find a large enough, well written example that is not minified.
If you are interested in JavaScript standards I would check out commonJS. They have a lot of good ideas about how JavaScript should be done.
BravoJS is a good module implementation for the browser.
As for examples jQuery's source code was mentioned in the comments. jQuery does a good job but it is I would also check out Narwhal JS for examples of how things should be done.
Here is a good free design patterns book that I found helpful Essential JavaScript And jQuery Design Patterns.
You wont find one solution to your problem and that is how JavaScript is designed. I would recommended experimenting. I find that Douglas Crockford has a lot of great ideas but that does not mean you have to follow him to the letter.
A good project is : http://impactjs.com/
A good reading is : http://addyosmani.com/blog/essentialjsdesignpatterns/
Great question. I couldn't find one example of a well written object oriented open source application. Tiny MCE was so-so, but I wouldn't consider it well written: http://www.tinymce.com/
However, I have written clean, well factored object oriented javascript at work. It's proprietary so I can't share it, but I can explain what worked for me to learn how to do that:
1) Read the mozilla javascript object oriented programming tutorial. Their explanation of javascript inheritance is exactly what google closure uses. Personally I think what Crockford calls pseudo classical is easiest to read and maintain since 4 of the 5 other programming languages I know use classes (java, c#, python, and php. perl's the oddball here with no classes either).
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
2) Read the book 'Object Oriented Javascript' by Stoyan Stefanov.
3) Take an existing procedural javascript code base and refactor it to objects. Use the tips in 'Clean Code' by Robert C. Martin as they apply to any programming language.
4) Structure your code so it has many different files similar to how you'd use classes in a language with classes.
5) Implement dependency injection without an IOC container by creating all your objects at a top level and feeding them down into the objects that depend on them.
There's a lot more, but hopefully this is a helpful start.
Here is what I feel is the correct way to implement inheritance in javascript. this is from the google closure library:
goog.inherits = function(childCtor, parentCtor) {
/** #constructor */
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
Coincidentally, today on SlashDot there is a review of the 6th edition of Javascript: The Definitive Guide, which the reviewer there says "retains its crown as the ultimate reference resource for JavaScript programmers." It's 1,100 pages.
Yes, this isn't the sample app you were seeking, but the book does have a lot of examples and advice about best practices.
There are several ways to learn how to write good JS code.
You can read books. The best one about organization of JS code and about common patterns including inheritance is JavaScript Patterns by Stoyan Stefanov.
Another good way to learn is just look through the excellent code of other developers and using it. The best library I've seen from the point of code organization and using of patterns is Google Closure Library. It is used internally by Google in the RIA like Gmail Google Docs.
A kind person in irc suggested this eBook and I found it verry helpful.
Learning JavaScript Design Patterns
A book by Addy Osmani
http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Categories

Resources