Phoenix LiveView install for TypeScript

installation.md

Phoenix LiveView doesn't include TypeScript install instructions since they don't maintain TypeScript support. Follow these additional steps to get it working:

1. Install the unofficial NPM typings package to dev dependencies with:

npm install -D @types/phoenix_live_view

2. Change:

import LiveSocket from "phoenix_live_view"

to (notice the curly braces):

import { LiveSocket } from "phoenix_live_view"

This is needed because the unofficial type definitions are not one to one with the JS library at this point:

export class LiveSocket {

whereas the JS library does:

export default LiveSocket

3. Add the following to assets/js/types.ts:

import { LiveSocket } from "phoenix_live_view";

declare global {
  interface Window {
    liveSocket: LiveSocket; //Phoenix LiveView
    userToken: string; //Phoenix Sockets
  }
}

4. Add the following to assets/js/topbar.d.ts

declare module "topbar" {
  export function show(): void;
  export function hide(): void;

  interface BarColorOptions {
    [percent: number]: string;
  }
  interface ConfigOptions {
    autoRun?: boolean;
    barThickness?: number;
    barColors?: BarColorOptions;
    shadowBlur?: number;
    shadowColor?: string;
    className?: string | null;
  }

  export function config(options: ConfigOptions): void;
}