Fix compatibility with TS 1.6 object literal typing

TS 1.6 requires that object literals assigned to variables or parameters with an interface typing may only contain properties that are listed in the interface. See microsoft/TypeScript#3823 for details. This mostly affected React component props interfaces which did not extend react.Props so were missing the common key, ref and children props.
robertknight · Aug 16, 2015 · a1bc33b · a1bc33b
1 parent 1808566
commit a1bc33b
Show file tree

Hide file tree

Showing 20 changed files with 58 additions and 59 deletions.
diff --git a/lib/agile_keychain_test.ts b/lib/agile_keychain_test.ts
@@ -90,7 +90,6 @@ testLib.addAsyncTest('Import item from .1pif file', (assert) => {
 	actualItems.then((items) => {
 		assert.equal(items.length, 1, 'Imported expected number of items');
 		var expectedItem = agile_keychain.fromAgileKeychainItem(null, {
-			"vault": null,
 			"updatedAt": 1398413120,
 			"title": "Facebook",
 			"securityLevel": "SL5",
@@ -725,4 +724,3 @@ testLib.addAsyncTest('Removing item succeeds if file is already removed', assert
 		assert.ok(testVault.items[0].isTombstone());
 	});
 });
-
diff --git a/lib/siteinfo/service.ts b/lib/siteinfo/service.ts
@@ -58,12 +58,12 @@ import url_util = require('../base/url_util');
 // list of known <link> and <meta> tags that point
 // to an icon for the site.
 //
-// See also: 
+// See also:
 // - http://microformats.org/wiki/existing-rel-values (list of known
 //   values for 'rel' attribute of <link> tags)
 // - http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013
 // - Google structured data testing tool: http://www.google.com/webmasters/tools/richsnippets
-// 
+//
 
 export enum MetaTagType {
 	Meta,
@@ -265,7 +265,6 @@ export class SiteInfoService implements site_info.SiteInfoProvider {
 		var result: site_info.QueryResult = {
 			info: {
 				url: url,
-				iconUrl: null,
 				icons: []
 			},
 			state: site_info.QueryState.Updating
@@ -597,4 +596,3 @@ export class DuckDuckGoClient {
 		}
 	}
 }
-
diff --git a/lib/vfs/node.ts b/lib/vfs/node.ts
@@ -174,7 +174,7 @@ export class FileVFS implements vfs.VFS {
 	}
 
 	login(): Q.Promise<vfs.Credentials> {
-		return Q<vfs.Credentials>({ user: process.env.USER });
+		return Q<vfs.Credentials>({});
 	}
 
 	isLoggedIn(): boolean {
@@ -247,4 +247,3 @@ export class FileVFS implements vfs.VFS {
 		return fullPath;
 	}
 }
-
diff --git a/typings/argparse.d.ts b/typings/argparse.d.ts
@@ -13,6 +13,8 @@ declare module "argparse" {
 		nargs? : any; // number or string
 		type? : string;
 		defaultValue? : any;
+		help?: string;
+		choices?: string[];
 	}
 
 	export interface Subparsers {
@@ -25,4 +27,3 @@ declare module "argparse" {
 		parseArgs(args?: string[]) : any;
 	}
 }
-
diff --git a/webui/app_view.ts b/webui/app_view.ts
@@ -56,7 +56,7 @@ export interface AppServices {
 	fs: vfs.VFS;
 }
 
-export interface AppViewProps {
+export interface AppViewProps extends react.Props<void> {
 	services: AppServices;
 	viewportRect: reactutil.Rect;
 	itemStore: ui_item_store.Store;
@@ -160,7 +160,7 @@ class AppView extends typed_react.Component<AppViewProps, AppViewState> {
 		children.push(this.renderItemDetails());
 		children.push(this.renderToasters());
 
-		var menu = reactutil.TransitionGroupF({ key: 'toolbar-menu' },
+		var menu = reactutil.TransitionGroupF(<any>{ key: 'toolbar-menu' },
 			this.state.appMenuSourceRect ? this.renderMenu('menu') : null
 			);
 		children.push(menu);
@@ -189,7 +189,7 @@ class AppView extends typed_react.Component<AppViewProps, AppViewState> {
 				progressMax: syncState.total
 			}));
 		}
-		return reactutil.TransitionGroupF({ key: 'toasterList' },
+		return reactutil.TransitionGroupF(<any>{ key: 'toasterList' },
 			toasters
 			);
 	}
@@ -376,4 +376,3 @@ class AppView extends typed_react.Component<AppViewProps, AppViewState> {
 }
 
 export var AppViewF = reactutil.createFactory(AppView);
-
diff --git a/webui/base/reactutil.ts b/webui/base/reactutil.ts
@@ -6,6 +6,17 @@ import env = require('../../lib/base/env');
 import transition_events = require('./transition_events');
 import tsutil = require('../../lib/base/tsutil');
 
+/** Extends the CSSProperties interface which as of 16/08/15
+ * only lists a small subset of CSS properties with one with
+ * a catch-all for other properties.
+ *
+ * See also https://github.com/borisyankov/DefinitelyTyped/pull/5089 for
+ * a discussion on how best to resolve this upstream.
+ */
+export interface ExtendedCSSProperties extends react.CSSProperties {
+	[index: string]: number | string;
+}
+
 /** Component factory returned by createFactory(). This extends
   * React.Factory with an additional property that specifies the
   * type of component which the factory creates.
@@ -179,4 +190,3 @@ export class TransitionEndListener {
 		transition_events.removeEndEventListener(this.node, this.listener);
 	}
 }
-
diff --git a/webui/base/reactutil_test.ts b/webui/base/reactutil_test.ts
@@ -3,8 +3,14 @@
 import reactutil = require('./reactutil');
 import testLib = require('../../lib/test');
 
+interface PropMergeResult {
+	id?: string;
+	className?: string;
+	onClick?: string;
+};
+
 testLib.addTest('merge props', (assert) => {
-	assert.deepEqual(reactutil.mergeProps({
+	assert.deepEqual<PropMergeResult>(reactutil.mergeProps({
 		id: 'instanceId',
 		className: 'instanceClass',
 		onClick: 'event handler'
@@ -34,4 +40,3 @@ testLib.addTest('object changes', (assert) => {
 });
 
 testLib.start();
-
diff --git a/webui/controls/button.ts b/webui/controls/button.ts
@@ -150,7 +150,7 @@ export enum Style {
 	Icon
 }
 
-export interface ButtonProps {
+export interface ButtonProps extends react.Props<void> {
 	onClick: (e: react.MouseEvent) => void;
 
 	/** Label for the button */
@@ -177,8 +177,6 @@ export interface ButtonProps {
 
 	/** Prevents interaction with the button */
 	disabled?: boolean;
-
-	children?: any;
 }
 
 export class Button extends typed_react.Component<ButtonProps, {}> {
@@ -295,4 +293,3 @@ export class Button extends typed_react.Component<ButtonProps, {}> {
 }
 
 export var ButtonF = reactutil.createFactory(Button);
-
diff --git a/webui/controls/demo.ts b/webui/controls/demo.ts
@@ -46,7 +46,7 @@ var theme = style.create({
 	}
 });
 
-interface ControlDemoAppProps {
+interface ControlDemoAppProps extends react.Props<void> {
 	viewportRect: reactutil.Rect;
 }
 
@@ -203,4 +203,3 @@ function main() {
 if (env.isBrowser()) {
 	main();
 }
-
diff --git a/webui/controls/menu.ts b/webui/controls/menu.ts
@@ -77,7 +77,7 @@ var theme = style.create({
 			label: {
 				width: '100%',
 				height: '100%',
-				
+
 				// give menu item label its own stacking context so
 				// that it renders on top of ripple effect
 				transform: 'translate3d(0,0,0)'
@@ -97,7 +97,7 @@ interface MenuState {
 	showTime?: Date;
 }
 
-export interface MenuProps {
+export interface MenuProps extends react.Props<void> {
 	/** The source rect of the icon which triggered the
 	  * menu.
 	  */
@@ -369,4 +369,3 @@ export class Menu extends typed_react.Component<MenuProps, MenuState> {
 }
 
 export var MenuF = reactutil.createFactory(Menu);
-
diff --git a/webui/controls/ripple.ts b/webui/controls/ripple.ts
@@ -1,7 +1,7 @@
 /// <reference path="../../typings/react.d.ts" />
 
 // Material Design style touch-ripple.
-// See https://www.polymer-project.org/docs/elements/paper-elements.html#paper-ripple 
+// See https://www.polymer-project.org/docs/elements/paper-elements.html#paper-ripple
 
 import react = require('react');
 import style = require('ts-style');
@@ -38,7 +38,7 @@ enum Phase {
 	Release
 }
 
-export interface InkRippleProps {
+export interface InkRippleProps extends react.Props<void> {
 	/** Fill style for the expanding ripple.
 	  * The background of the ripple uses a lighter version of
 	  * this color.
@@ -259,4 +259,3 @@ export class InkRipple extends typed_react.Component<InkRippleProps, InkRippleSt
 	}
 }
 export var InkRippleF = reactutil.createFactory(InkRipple);
-
diff --git a/webui/controls/svg_icon.ts b/webui/controls/svg_icon.ts
@@ -4,7 +4,11 @@ import underscore = require('underscore');
 
 import reactutil = require('../base/reactutil');
 
-export class SvgIconProps {
+export interface SvgIconProps extends react.Props<react.HTMLComponent>, react.HTMLAttributes {
+	// redeclare 'ref' here to resolve conflict between
+	// react.Props.ref and react.HTMLAttributes.ref
+	ref?: string;
+
 	href: string;
 	fill: string;
 	viewBox: {
@@ -35,4 +39,3 @@ export class SvgIcon extends typed_react.Component<SvgIconProps, {}> {
 }
 
 export var SvgIconF = reactutil.createFactory(SvgIcon);
-
diff --git a/webui/controls/text_field.ts b/webui/controls/text_field.ts
@@ -167,7 +167,7 @@ export interface TextFieldStyle {
 	fontFamily?: string;
 }
 
-export interface TextFieldProps {
+export interface TextFieldProps extends react.Props<void> {
 	/** Specifies the type of <input> field */
 	type?: string;
 
@@ -414,4 +414,3 @@ export class TextField extends typed_react.Component<TextFieldProps, TextFieldSt
 }
 
 export var TextFieldF = reactutil.createFactory(TextField);
-
diff --git a/webui/controls/toaster.ts b/webui/controls/toaster.ts
@@ -52,7 +52,7 @@ var theme = style.create({
 	}
 });
 
-export interface ToasterProps {
+export interface ToasterProps extends react.Props<void> {
 	message: string;
 	progressValue?: number;
 	progressMax?: number;
@@ -97,4 +97,3 @@ export class Toaster extends typed_react.Component<ToasterProps, ToasterState> {
 }
 
 export var ToasterF = reactutil.createFactory(Toaster, transition_mixin.TransitionMixinM);
-
diff --git a/webui/details_view.ts b/webui/details_view.ts
@@ -213,7 +213,7 @@ interface ItemFieldState {
 	value?: string;
 }
 
-interface ItemFieldProps {
+interface ItemFieldProps extends react.Props<void> {
 	label: string;
 	value: string;
 	type: FieldType;
@@ -383,7 +383,7 @@ export enum ItemEditMode {
 	EditItem
 }
 
-export interface DetailsViewProps {
+export interface DetailsViewProps extends react.Props<void> {
 	entryRect?: reactutil.Rect;
 	viewportRect: reactutil.Rect;
 	animateEntry: boolean;
@@ -972,7 +972,7 @@ export class DetailsView extends typed_react.Component<DetailsViewProps, Details
 		var itemListDetailsStyle: any[] = [headerTheme.iconAndDetails.details.itemList];
 		var detailsViewDetailsStyle: any[] = [headerTheme.iconAndDetails.details.detailsView];
 
-		var contentStyles: react.CSSProperties[] = [{
+		var contentStyles: reactutil.ExtendedCSSProperties[] = [{
 			paddingTop: 16,
 
 			// vertically align left edge of details text with item
@@ -1002,7 +1002,6 @@ export class DetailsView extends typed_react.Component<DetailsViewProps, Details
 				bottom: 16
 			}), button.ButtonF({
 					style: button.Style.FloatingAction,
-					accessKey: 'a',
 					backgroundColor: colors.MATERIAL_COLOR_PRIMARY,
 					color: colors.MATERIAL_COLOR_HEADER,
 					rippleColor: 'white',
@@ -1058,4 +1057,3 @@ export class DetailsView extends typed_react.Component<DetailsViewProps, Details
 }
 
 export var DetailsViewF = reactutil.createFactory(DetailsView, focus_mixin.FocusMixinM);
-
diff --git a/webui/item_icons.ts b/webui/item_icons.ts
@@ -164,7 +164,7 @@ export class BasicIconProvider implements IconProvider {
 	private static DEFAULT_ICON = 'dist/icons/default.png';
 
 	updated: event_stream.EventStream<string>;
-	
+
 	/** Create an icon provider which uses @p provider to fetch
 	  * icon data. @p iconSize specifies the size of icon to make from
 	  * the available icons for a given URL.
@@ -402,7 +402,7 @@ class Cache {
 	}
 }
 
-export interface IconControlProps {
+export interface IconControlProps extends react.Props<void> {
 	location: string;
 	iconProvider: IconProvider;
 	isFocused: boolean;
@@ -512,4 +512,3 @@ export class FakeIconProvider implements IconProvider {
 }
 
 export var IconControlF = reactutil.createFactory(IconControl);
-
diff --git a/webui/item_list_view.ts b/webui/item_list_view.ts
@@ -152,7 +152,7 @@ interface ItemListViewState {
 	filter?: string;
 }
 
-export class ItemListViewProps {
+export interface ItemListViewProps extends react.Props<void> {
 	items: item_store.Item[];
 	selectedItem: item_store.Item;
 	onSelectedItemChanged: (item: item_store.Item, rect: reactutil.Rect) => void;
@@ -254,7 +254,7 @@ export class ItemListView extends typed_react.Component<ItemListViewProps, ItemL
 
 export var ItemListViewF = reactutil.createFactory(ItemListView, focus_mixin.FocusMixinM);
 
-export interface ItemProps {
+export interface ItemProps extends react.Props<void> {
 	key: string;
 	item: item_store.Item;
 	onSelected: () => void;
@@ -327,7 +327,7 @@ interface ItemListState {
 	itemHeight?: number;
 }
 
-class ItemListProps {
+export interface ItemListProps extends react.Props<void> {
 	items: item_store.Item[];
 	filter: string;
 	filterUrl: string;
@@ -598,7 +598,7 @@ class ItemList extends typed_react.Component<ItemListProps, ItemListState> {
 
 var ItemListF = reactutil.createFactory(ItemList);
 
-class ItemListToolbarProps {
+export interface ItemListToolbarProps extends react.Props<void> {
 	filterUrl: string;
 
 	onQueryChanged: (query: string) => void;