Native support Native support can be added quite easily e.g. https://github.com/basarat/typescript-script adds support for script tags (although this adds 6 MB of supporting JavaScript to a page). However there is a performance hit in compiling TypeScript to JavaScript and for the best performance it is best to precompile and execute the compiled JavaScript in the browsers. … Read more
A very easy way is to turn the Set into an Array first: let a = new Set(); a.add(‘Hello’); a = Array.from(a); …and then just use a simple for loop. Be aware that Array.from is not supported in IE11.
ES6 doesn’t allow export default const. You must declare the constant first then export it: const Header = () => { return <pre>Header</pre> }; export default Header; This constraint exists to avoid writting export default a, b, c; that is forbidden: only one variable can be exported as default
It seems for the moment string concatenation is faster: http://jsperf.com/es6-string-literals-vs-string-concatenation ES6 with variable 19,992,512 ±5.21% 78% slower String concatenation with variable 89,791,408 ±2.15% fastest ES6 with function 461,358 ±3.12% 99% slower String concatenation with function 503,255 ±1.77% 99% slower I tested was run on Chrome 43.0.2334.0 canary (64-bit), which is using V8 4.3.31, with the … Read more
Why it doesn’t work import * as MC from ‘./MyClass’; This is ES6/ES2015-style import syntax. The exact meaning of this is “Take the module namespace object loaded from ./MyClass and use it locally as MC“. Notably, the “module namespace object” consists only of a plain object with properties. An ES6 module object cannot be invoked … Read more
Sure, just use the object destructuring syntax: const { old_name: new_name, foo: f, bar: b } = require(‘module’);
Here is a 2017 elegant solution using async/await : Very straightforward usage: const results = await filter(myArray, async num => { await doAsyncStuff() return num > 2 }) The helper function (copy this into your web page): async function filter(arr, callback) { const fail = Symbol() return (await Promise.all(arr.map(async item => (await callback(item)) ? item … Read more
The new class syntax is mostly, though not entirely, syntactic sugar (but, you know, the good kind of sugar). It markedly simplifies writing constructor functions and the objects they assign as prototypes to the objects they create, especially when setting up inheritance hierarchies, which was error-prone with the ES5 syntax. But unlike the old way, … Read more
You need to wrap your title and body in a container. That could be a div. If you use a fragment instead, you’ll have one less element in the dom. { this.state.loadingPage ? <span className=”sr-only”>Loading… Registered Devices</span> : <> {this.state.someBoolean ? <div>some title</div> : null } <div>body</div> </> } I would advise against nesting ternary … Read more
Update: The create-react-app polyfill approach and docs have changed since this question/answer. You should now include react-app-polyfill (here) if you want to support older browsers like ie11. However, this only includes the “…minimum requirements and commonly used language features“, so you’ll still want to use one of the approaches below for less common ES6/7 features … Read more