Using Elixir-Style Modules in JavaScript

user-component1.jsx

import React from ‘react’;
import {userType, fullName} from ‘./user’;

const UserComponent = user => (
  <div>Name: {fullName(user)}</div>
);
UserComponent.propTypes = {
  user: userType
};

user-component2.jsx

import React from ‘react’;
import * as User from ‘./user’;

const UserComponent = user => (
  <div>Name: {User.fullName(user)}</div>
);
UserComponent.propTypes = {
  user: User.t
};

user-component2.ts

import * as User from './user';

class UserComponent {
  name(): User.t {
    return User.fullName(this.user);
  }
}

user-individual-import.js

import { userToFriend } from 'accounts/User';

userToFriend(user):

user-react1.js

export const userType = PropTypes.shape({
  firstName: PropTypes.string;
  lastName: PropTypes.string;
  email: PropTypes.string;
});

export function fullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

user-wildcard-import.js

import * as User from 'accounts/User';

User.toFriend(user):

user.ex

defmodule User do
  defstruct [:first_name, :last_name, :email]

  def full_name(user = %User{}) do
    "#{user.first_name} #{user.last_name}
  end
end

user1.js

/**
 * @typedef {Object} User
 * @property {string} firstName
 * @property {string} lastName
 * @property {string} email
 */

/**
 * @param {User} user
 * @returns {string}
 */
export function fullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

user1.ts

export interface User {
  firstName: string;
  lastName: string;
  email: string;
}

export function fullName(user: User): string {
  return `${user.firstName} ${user.lastName}`;
}

user2.js

export const t = PropTypes.shape({
  firstName: PropTypes.string;
  lastName: PropTypes.string;
  email: PropTypes.string;
});

export function fullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

user2.ts

export interface t {
  firstName: string;
  lastName: string;
  email: string;
}

export function fullName(user: t): string {
  return `${user.firstName} ${user.lastName}`;
}