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

index.html.

<html>
<body> etc...
    
  System.config({
    baseURL: './'
  });

  System.import("build/js/bundle.js")
    .then(function() {
        console.info("System.import was successful.");
    })
    .catch(function(response) {
        console.error("Error in System.import, could not bootstrap.", response);
    });

main.ts

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

button/index.ts

export class Foo {

    public name:string = 'test';
}

tsconfig.json

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

}

my gulptasks:

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

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

gulp.task("compile:ts", ["lint:ts"], function() {
    return tsProject.src()
        .pipe(tsProject())
        .js
        .pipe(gulp.dest("build/js"));
});


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")
                                .child(currUsr)
                                .child('profile')
                                .child('lastKnownLocation');

    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() ) {
                    availableUsers.push({ 
                        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 = lists.map((list, index) =>
    <li key={index}> {list.name} <a href="#" onClick={this.listInfo.bind(this)}>Learn More</a> </li> );

this is the function

listInfo(event){
 event.preventDefault();
 var el = list.name //this is where I want to save that value;
 console.log(el)
}

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