No unused vars part of ts

.vscode/tasks.json

@@ -1,13 +1,22 @@
 {
-  "version": "0.1.0",
-  "command": "gulp",
-  "isShellCommand": true,
+  "version": "2.0.0",
   "tasks": [
     {
-      "taskName": "bundle",
-      "isBuildCommand": true,
-      "showOutput": "always",
-      "isWatching": true
+      "label": "Typescript (oufr) watch",
+      "type": "process",
+      "command": "node",
+      "args": [
+        "./scripts/node_modules/typescript/bin/tsc",
+        "-p",
+        "packages/office-ui-fabric-react/tsconfig.json",
+        "-w",
+        "--noEmit"
+      ],
+      "problemMatcher": "$tsc",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
     }
   ]
 }

common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "office-ui-fabric-react",
+      "type": "none"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "cliff.koh@microsoft.com"
+}

packages/office-ui-fabric-react-tslint/tslint.json

@@ -145,7 +145,7 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": false,
-    "no-unused-variable": true,
+    "no-unused-variable": false, // defer to typescript's no unused local instead
     "no-use-before-declare": true,
     "no-with-statement": true,
     "no-var-keyword": true,

packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx

@@ -1,13 +1,11 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
 import {
   styled
 } from '../../Utilities';
 import { ICalloutProps } from './Callout.types';
 import { CalloutContentBase } from './CalloutContent.base';
 import { getStyles } from './CalloutContent.styles';
 
-export const CalloutContent = styled(
+export const CalloutContent: (props: ICalloutProps) => JSX.Element = styled(
   CalloutContentBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { mount, ReactWrapper } from 'enzyme';
 import * as renderer from 'react-test-renderer';

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx

@@ -33,7 +33,6 @@ import {
   getClassNames,
   getComboBoxOptionClassNames
 } from './ComboBox.classNames';
-import { BaseButton, Button } from 'src/index.bundle';
 
 export interface IComboBoxState {
 

packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts

@@ -1,8 +1,3 @@
-
-import {
-  ITheme,
-  mergeStyles
-} from '../../Styling';
 import { IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const inheritFont = { fontFamily: 'inherit' };

packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
 import { mount, shallow } from 'enzyme';
 import { setRTL } from '../../Utilities';

packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import {
   HoverCard,

packages/office-ui-fabric-react/src/components/Image/Image.test.tsx

@@ -9,8 +9,6 @@ import { ImageFit } from './Image.types';
 
 /* tslint:disable:no-unused-variable */
 const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
-const testImage1x2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWP4////fyYGBgYGAB32A/+PRyXoAAAAAElFTkSuQmCC';
-const testImage2x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQImWP8////fwYGBgYAGfgD/hEzDhoAAAAASUVORK5CYII=';
 const brokenImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
 
 describe('Image', () => {

packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx

@@ -7,8 +7,6 @@ import {
   IOverflowSetItemProps,
   OverflowSet
 } from 'office-ui-fabric-react/lib/OverflowSet';
-/* tslint:disable-next-line:no-unused-variable */
-import * as stylesImport from './OverflowSet.Example.scss';
 
 export class OverflowSetVerticalExample extends BaseComponent<any, any> {
 

packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts

@@ -1,4 +1,3 @@
-import { IStyle, keyframes } from '../../Styling';
 import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';
 
 export const getStyles = (

packages/office-ui-fabric-react/src/components/Rating/Rating.tsx

@@ -1,12 +1,11 @@
 import {
   styled
 } from '../../Utilities';
-// tslint:disable-next-line:no-unused-variable
 import { IRatingProps } from './Rating.types';
 import { getStyles } from './Rating.styles';
 import { RatingBase } from './Rating.base';
 
-export const Rating = styled(
+export const Rating: (props: IRatingProps) => JSX.Element = styled(
   RatingBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as PropTypes from 'prop-types';
 import {
   BaseComponent,

packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx

@@ -1,10 +1,9 @@
 import { styled } from '../../Utilities';
 import { SearchBoxBase } from './SearchBox.base';
-// tslint:disable-next-line:no-unused-variable
 import { ISearchBoxProps } from './SearchBox.types';
 import { getStyles } from './SearchBox.styles';
 
-export const SearchBox = styled(
+export const SearchBox: (props: ISearchBoxProps) => JSX.Element = styled(
   SearchBoxBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx

@@ -1,10 +1,9 @@
 import { styled } from '../../Utilities';
 import { SpinnerBase } from './Spinner.base';
 import { getStyles } from './Spinner.styles';
-// tslint:disable-next-line:no-unused-variable
 import { ISpinnerProps } from './Spinner.types';
 
-export const Spinner = styled(
+export const Spinner: (props: ISpinnerProps) => JSX.Element = styled(
   SpinnerBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx

@@ -2,11 +2,10 @@ import {
   styled
 } from '../../Utilities';
 import { ColorPickerGridCellBase } from './ColorPickerGridCell.base';
-// tslint:disable-next-line:no-unused-variable
 import { IColorPickerGridCellProps } from './ColorPickerGridCell.types';
 import { getStyles } from './ColorPickerGridCell.styles';
 
-export const ColorPickerGridCell = styled(
+export const ColorPickerGridCell: (props: IColorPickerGridCellProps) => JSX.Element = styled(
   ColorPickerGridCellBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';

packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx

@@ -1,10 +1,9 @@
 import { styled } from '../../Utilities';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';
-// tslint:disable-next-line:no-unused-variable
 import { ISwatchColorPickerProps } from './SwatchColorPicker.types';
 import { getStyles } from './SwatchColorPicker.styles';
 
-export const SwatchColorPicker = styled(
+export const SwatchColorPicker: (props: ISwatchColorPickerProps) => JSX.Element = styled(
   SwatchColorPickerBase,
   getStyles
 );

packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx

@@ -8,9 +8,7 @@ import {
 import {
   IColor,
   getContrastRatio,
-  updateA,
   isDark,
-  getColorFromString
 } from 'office-ui-fabric-react/lib/utilities/color/index';
 
 import {
@@ -38,12 +36,8 @@ export interface IThemeGeneratorPageState {
   colorPickerVisible: boolean;
 }
 
-const BackgroundImageUriKey = 'backgroundImageUri';
-const BackgroundOverlayKey = 'backgroundOverlay';
-
 export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageState> {
   private _semanticSlotColorChangeTimeout: number;
-  private _imgUrl: string;
 
   constructor(props: {}) {
     super(props);
@@ -121,6 +115,37 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
           * and generate a theme based off of those.
           * Since this API requires a personal subscription key, you'll have to enlist and insert your subscription
           * key in _makeThemeFromImg() below. Then, just uncomment this section. */}
+        {/*
+          private _imgUrl: string;
+          const BackgroundImageUriKey = 'backgroundImageUri';
+          const BackgroundOverlayKey = 'backgroundOverlay';
+
+          private _makeThemeFromImg = (): void => {
+            this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value;
+            (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl;
+
+            if (this._imgUrl) {
+              const xhr = new XMLHttpRequest();
+              xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this));
+              // you may need to change the URL here
+              xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en');
+              xhr.setRequestHeader('Content-Type', 'application/json');
+              alert('You forgot to set the subscription key!');
+              xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here
+              xhr.send('{ "url": "' + this._imgUrl + '" }');
+            } else {
+              // remove related properties from theme
+              const { themeRules } = this.state;
+              if (themeRules.hasOwnProperty(BackgroundImageUriKey)) {
+                delete themeRules[BackgroundImageUriKey];
+              }
+              if (themeRules.hasOwnProperty(BackgroundOverlayKey)) {
+                delete themeRules[BackgroundOverlayKey];
+              }
+              this.setState({ themeRules: themeRules }, this._makeNewTheme);
+            }
+          }
+        */}
         {/*}
         <div style={ { display: 'flex' } }>
           <div>URL to image:&nbsp;</div>
@@ -234,108 +259,6 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  /* tslint:disable:no-unused-variable */
-  private _makeThemeFromImg = (): void => {
-    /* tslint:enable:no-unused-variable */
-    this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value;
-    (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl;
-
-    if (this._imgUrl) {
-      const xhr = new XMLHttpRequest();
-      xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this));
-      // you may need to change the URL here
-      xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en');
-      xhr.setRequestHeader('Content-Type', 'application/json');
-      alert('You forgot to set the subscription key!');
-      xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here
-      xhr.send('{ "url": "' + this._imgUrl + '" }');
-    } else {
-      // remove related properties from theme
-      const { themeRules } = this.state;
-      if (themeRules.hasOwnProperty(BackgroundImageUriKey)) {
-        delete themeRules[BackgroundImageUriKey];
-      }
-      if (themeRules.hasOwnProperty(BackgroundOverlayKey)) {
-        delete themeRules[BackgroundOverlayKey];
-      }
-      this.setState({ themeRules: themeRules }, this._makeNewTheme);
-    }
-  }
-
-  private _cognitiveVisionCallback = (e: any): void => {
-    const xhr = e.target;
-    if (xhr.status === 200) {
-      const response = JSON.parse(xhr.response);
-
-      document.getElementById('imageDescription')!.innerHTML = response.description.captions[0].text;
-
-      /* API returns:
-       response.color.accentColor
-       response.color.dominantColorBackground
-       response.color.dominantColorForeground */
-
-      // converts a returned color from a word into a hex value conforming to our palette
-      const getHexFromColor = (color: string, isBg: boolean) => {
-        // todo: could use more logic based on isInverted and isBg
-        switch (color.toLowerCase()) {
-          case 'black': return '#1f1f1f';
-          case 'blue': return '#0078d4';
-          case 'brown': return '#754d12';
-          case 'gray':
-          case 'grey': return isBg ? '#444' : '#ccc';
-          case 'green': return '#107c10';
-          case 'orange': return '#ff8c00';
-          case 'pink': return '#e3008c';
-          case 'purple': return '#5c2d91';
-          case 'red': return '#e81123';
-          case 'teal': return '#008272';
-          case 'white': return '#fff';
-          case 'yellow': return '#fff100';
-        }
-        alert('Error: Unexpected color passed to getHexFromColor(): ' + color);
-        return '#fff';
-      };
-
-      const { themeRules } = this.state;
-      const bgColor = getHexFromColor(response.color.dominantColorBackground, true);
-      const bgColorIsDark = isDark(getColorFromString(bgColor)!);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.backgroundColor]],
-        bgColor,
-        bgColorIsDark,
-        true,
-        true);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.primaryColor]],
-        '#' + response.color.accentColor,
-        bgColorIsDark,
-        true,
-        true);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.foregroundColor]],
-        getHexFromColor(response.color.dominantColorForeground, false),
-        bgColorIsDark,
-        true,
-        true);
-
-      themeRules[BackgroundImageUriKey] = {
-        name: BackgroundImageUriKey,
-        value: 'url(\'' + this._imgUrl + '\')',
-        dependentRules: []
-      };
-      themeRules[BackgroundOverlayKey] = {
-        name: BackgroundOverlayKey,
-        color: updateA((themeRules[BaseSlots[BaseSlots.backgroundColor]]).color!, 50),
-        dependentRules: []
-      };
-
-      this.setState({ themeRules: themeRules }, this._makeNewTheme);
-
-    } else {
-      alert('Error ' + xhr.status + ': ' + xhr.statusText);
-    }
-  }
-
   private _colorPickerOnDismiss = (): void => {
     this.setState({ colorPickerVisible: false });
   }

packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx

@@ -1,7 +1,6 @@
 /* tslint:disable */
 import * as React from 'react';
 import {
-  BaseComponent,
   css
 } from '../../../Utilities';
 /* tslint:enable */

packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import { GridBase } from './Grid.base';
 import { getStyles } from './Grid.styles';
 import { DefaultButton } from '../../Button';