Kasper kasper573

Tings personal awesome typescript cheat sheet

A class is a type that can be instantiated
interfaces should be used to define a common pattern that many classes wants to implement
'any' is commonly used when integrating typescript with javascript libraries
difference between type and interface: types can be inferred, interfaces cannot

Terminology:

Fancy english words:
explicit: stated clearly and in detail, leaving no room for confusion or doubt.

Application structure

This document explains how the application code flows and is structured, ie. "what code goes where" and teaches you application specific terminology.

The application is a Single Page Application bundled by webpack.

Webpack outputs an index.html with the script tags required to bootstrap the application already embedded. All required assets and scripts will be output to the dist folder. To serve the application simply serve the dist folder.

In development we use webpack-dev-server to automate this process, so this is something that you only need to care about if working with the build or deployment infrastructure.

In production we also render the application server side to improve SEO (see server.tsx).

	var S = readline();
	var max = '';
	var re = /(.)\1+/g;
	while (res = re.exec(S)) {
	if (res[0].length > max.length) {
	max = res[0];
	}
	}
	if (!max) {
	max = S[0];

	{
	"exclude": [
	"node_modules"
	],
	"compilerOptions": {
	"baseUrl": ".",
	"allowJs": false,
	"checkJs": false,
	"experimentalDecorators": true,
	"noImplicitAny": true,

	import * as express from 'express';
	import * as path from 'path';
	import * as args from 'args';
	import * as fs from 'fs';
	import {BuildInjects} from '../BuildOptions';

	args
	.option('dist', 'The path to the folder to distribute', path.join(__dirname, '../dist'))
	.option('port', 'The port on which the server will be running')
	.option('host', 'The host on which the server should listen');

	import * as React from 'react';
	import {IObservableValue} from 'mobx';
	import {observer} from 'mobx-react';
	import Transition from 'react-transition-group/Transition';
	import {WithTheme} from 'material-ui';
	import withTheme from 'material-ui/styles/withTheme';

	export type TransitionVector = {
	x: number,
	y: number,

	import {includes} from 'lodash';
	import {action, computed, observable} from 'mobx';
	import {RouteStore} from './RouteStore';
	import {UIStore} from './UIStore';
	import {LayoutLinks} from './models/LayoutLinks';

	const zeroVector = {x: 0, y: 0, z: 0};

	/**
	* The state of Layout.tsx.

	import * as React from 'react';
	import * as PropTypes from 'prop-types';

	let contextCounter = 0;

	/**
	* Temporary polyfill for React 16.3 createContext
	*/
	export function createContext<ContextProps> (defaultValues: ContextProps = {} as ContextProps) {
	contextCounter += 1;

	@withStyles(styles)
	export class Row extends React.Component<
	WithStyles &
	React.HTMLAttributes<HTMLDivElement> & {
	align?: React.CSSProperties['justify-content'],
	valign?: React.CSSProperties['align-items'],
	flex?: React.CSSProperties['flex'],
	wrap?: React.CSSProperties['flexWrap']
	}> {
	render () {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Edge 100% height window resize issue</title>
	<style type="text/css">
	html, body, #root {
	width: 100%;
	height: 100%;
	margin: 0;