Import/export modules in Typescript

I’m trying to figure out how one would import/export es6 modules using typescript. Here is what I got so far. Below is the HTML, JavaScript and the tasks. How do I get this to work? I want all modules that get imported to main.ts to bundle into one single .js file. Right now the import/export does not work.

File structure:

enter image description here


<body> etc...
    baseURL: './'

    .then(function() {"System.import was successful.");
    .catch(function(response) {
        console.error("Error in System.import, could not bootstrap.", response);


import { Foo } from './components/button/index';
let f = new Foo();
console.log(f);  //does not output anything, and i get no errros.


export class Foo {

    public name:string = 'test';


"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"experimentalDecorators": true,
"removeComments": false
"exclude": [


my gulptasks:

var tsProject = ts.createProject("tsconfig.json", {
    outFile: "bundle.js"

gulp.task('lint:ts', function() {
    return gulp.src('./src/scripts/**/*.ts')
            formatter: "verbose"

gulp.task("compile:ts", ["lint:ts"], function() {
    return tsProject.src()

Source: stackoverflow-javascript

RxJS update Observable array items on the fly

Im using GeoFire in an Ionic 2/Firebase APP. The main screen function gets all the users that are close by as follows, This gets fed to an ngFor loop as an array.

The issue: If one of the users details change, for instance if they change their name, then a duplicate user gets added to the array rather than the actual user getting updated. Im not sure how to work this into this function.

public outputUsersCloseToMe() : Observable<Array<displayAllUsers>> {

    const currUsr = this.firebaseInit().auth().currentUser.uid

    let availableUsers = <Array<displayAllUsers>>[];

    const loc = this.firebaseInit().database().ref("users")

    loc.once('value').then( (snapshot) => {
        let geoQuery = this.geoFire.query({
            center: [snapshot.val().lat, snapshot.val().lng],
            radius: 12.0//kilometers
        geoQuery.on("key_entered", (key, location, distance) => {
            this.firebaseInit().database().ref('users').child(key).child('profile').on('value', (userprofile) => {  
                if( userprofile.val() ) {
                        id: userprofile.val().id,                        
                        gender: userprofile.val().gender,
                        distance: distance.toFixed(2),
                        location: location,
                        firstName: userprofile.val().firstName,                        
    return Observable.from([availableUsers]).map(val => val); 

and the template is similar to the following

{{ usr?.id }}

Source: stackoverflow-javascript

Babel : turn off import directives transpilation

I am trying to use the babel transpiler to use ES6 in a project, but i’m struggling with something quite unusual : I’m working with an enhanced ES5 js codebase that contains imports and export directives.

Here is an example :

import Widget from 'component:component-widget';

//ES5 code here

export default "something"

I would like to keep those imports, but transpile the rest of detected ES6 features.

I did not find a way to do it so far… :/

Do you know if something like that could be possible?

Thanks in advance!

Source: stackoverflow-javascript

How to trasnfer data from .map to function from href element with onClick

I’m trying to move one element from .map to onClick function so that I can pass it to redux but I’m not sure how to proced. This is my code

const Lists =, index) =>
    <li key={index}> {} <a href="#" onClick={this.listInfo.bind(this)}>Learn More</a> </li> );

this is the function

 var el = //this is where I want to save that value;

Thanks in advance

Source: stackoverflow-javascript

ES6 arrow functions arguments

export const emailMatcher = 
           (control: AbstractControl): {[key: string]: boolean} => {
  const email = control.get('email');
  const confirm = control.get('confirm');
  if (!email || !confirm) return null;
  return email.value === confirm.value ? null : { nomatch: true };

I understand the use-case for arrow functions, but can anyone explain me the below line:

export const emailMatcher = 
           (control: AbstractControl): {[key: string]: boolean} => {

We are creating a function emailMatcher to which we are passing control as a argument. What does this line {[key: string]: boolean} do? I am not really understanding how that applies to return type of the function.

Source: stackoverflow-javascript

Elegant array transformation in Javascript

What’s an elegent way – purely functional, ideally – to transform (reduce?) this array:

var in = [
  { a: 1, b: 'x', c: 'foo' },
  { a: 1, b: 'y', c: 'goo' },
  { a: 2, b: 'x', c: 'hoo' },
  { a: 2, b: 'y', c: 'joo' }

Into this:

var out = [
  { a: 1, x: 'foo', y: 'goo' },
  { a: 2, x: 'hoo', y: 'joo' }

Source: stackoverflow-javascript