basarat

import * as onresize from 'onresize';

export type WindowDetails = {
  width: number,
  height: number
}
/** 
 * Doesn't render anything itself. Instead calls a function with the details.
 * Warning: will not work for server side rendering
 */

basarat

import { StyleSheet, css } from 'aphrodite';

/** Just for autocomplete convinience */
export interface CSSProperties extends React.CSSProperties {
  ':hover'?: React.CSSProperties;
  ':active'?: React.CSSProperties;
}

/**
 * Takes CSSProperties and return a generated className you can use on your component

basarat

import * as React from 'react';

interface FormProps {
  /**
   * Automatically prevents the default browser behavior so you don't have to
   */
  onSubmit: () => any;
  children?: JSX.Element;
}
export const Form = ({ onSubmit, children}: FormProps) =>

basarat

[] + []; // JavaScript will give you "" (which makes little sense), TypeScript will error

//
// other things that are nonsensical in JavaScript 
// - don't give a runtime error (making debugging hard)
// - but TypeScript will give a compile time error (making debugging unnecessary)
//
{} + []; // JS : 0, TS Error
[] + {}; // JS : "[object Object]", TS Error  
{} + {}; // JS : NaN, TS Error

basarat

/**
 * Called if a parameter is missing and
 * the default value is evaluated.
 */
function mandatory() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
  return mustBeProvided;
}

basarat

// You don't normally write code like this: 
function add() {
  return arguments[0] + arguments[1];
}

// You normally write code like: 
function add(num1, num2) {
  return num1 + num2;
}

basarat

function foo(mayNotBeProvided?) {
  return mayNotBeProvided;
}

foo(); // OKAY
foo(123); // OKAY

basarat

function foo(mustBeProvided) {
  return mustBeProvided;
}

foo(); // ERROR
foo(123); // OKAY

basarat

/**
 * Called if a parameter is missing and
 * the default value is evaluated.
 */
function mandatory() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
  return mustBeProvided;
}

basarat

/* style.css */
.className {
  color: green;
}

// source.ts
import { classNayme } from "./style.css";