Enable prefer-const tslint flag

apps/fabric-website/tslint.json

@@ -14,6 +14,7 @@
     "jsx-alignment": false,
     "jsx-ban-props": false,
     "jsx-no-string-ref": false,
-    "jsx-no-bind": false
+    "jsx-no-bind": false,
+    "prefer-const": false
   }
 }

apps/todo-app/tslint.json

@@ -6,6 +6,7 @@
     "no-any": false,
     "typedef": [
       false
-    ]
+    ],
+    "prefer-const": false
   }
 }

packages/example-app-base/tslint.json

@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }

packages/experiments/tslint.json

@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }

packages/file-type-icons/tslint.json

@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }

packages/jest-serializer-merge-styles/tslint.json

@@ -2,7 +2,5 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {
-    "prefer-const": true
-  }
+  "rules": {}
 }

packages/merge-styles/tslint.json

@@ -2,7 +2,5 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {
-    "prefer-const": true
-  }
+  "rules": {}
 }

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

@@ -53,7 +53,7 @@
       "property-declaration",
       "member-variable-declaration"
     ],
-    "prefer-const": false,
+    "prefer-const": true,
     "quotemark": [
       true,
       "single",

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

@@ -18,7 +18,7 @@ export const getStyles = memoizeFunction((
   theme: ITheme = getTheme(),
   customStyles?: IActivityItemStyles
 ): IActivityItemStyles => {
-  let ActivityItemStyles: IActivityItemStyles = {
+  const ActivityItemStyles: IActivityItemStyles = {
 
     root: [
       theme.fonts.small,

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

@@ -32,72 +32,72 @@ const defaultPersonaProps = [
 describe('ActivityItem', () => {
 
   it('renders with an icon correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityIcon={ <Icon iconName={ 'Message' } /> }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with a single persona correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ [defaultPersonaProps[0]] }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with multiple personas correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ defaultPersonaProps }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with an icon correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityIcon={ <Icon iconName={ 'Message' } /> }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with a single persona correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ [defaultPersonaProps[0]] }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with multiple personas correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ defaultPersonaProps }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-});
+});

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

@@ -18,7 +18,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   }
 
   public render() {
-    let {
+    const {
       onRenderIcon = this._onRenderIcon,
       onRenderActivityDescription = this._onRenderActivityDescription,
       onRenderComments = this._onRenderComments,
@@ -97,11 +97,11 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   @autobind
   private _onRenderPersonaArray(props: IActivityItemProps): JSX.Element | null {
     let personaElement: JSX.Element | null = null;
-    let activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
+    const activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
-      let personaList: Array<JSX.Element> = [];
-      let showSize16Personas = (activityPersonas.length > 1 || props.isCompact);
-      let personaLimit = props.isCompact ? 3 : 4;
+      const personaList: Array<JSX.Element> = [];
+      const showSize16Personas = (activityPersonas.length > 1 || props.isCompact);
+      const personaLimit = props.isCompact ? 3 : 4;
       let style: React.CSSProperties | undefined = undefined;
       if (props.isCompact) {
         style = {

packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx

@@ -56,9 +56,9 @@ export class ActivityItemBasicExample extends React.Component<React.Props<Activi
       }
     ];
 
-    let activityExampleList: Array<JSX.Element> = [];
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
         <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );

packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx

@@ -72,9 +72,9 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
       }
     ];
 
-    let activityExampleList: Array<JSX.Element> = [];
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
         <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );

packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx

@@ -109,9 +109,9 @@ export class ActivityItemPersonaExample extends React.Component<React.Props<Acti
       }
     ];
 
-    let activityExampleList: Array<JSX.Element> = [];
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
         <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );

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

@@ -11,11 +11,11 @@ import { Autofill } from './Autofill';
 describe('Autofill', () => {
   let autoFill: Autofill;
   let autoFillInput: HTMLInputElement;
-  let baseNode = document.createElement('div');
+  const baseNode = document.createElement('div');
   document.body.appendChild(baseNode);
   beforeEach(() => {
 
-    let component = ReactDOM.render(
+    const component = ReactDOM.render(
       <Autofill
         ref={ (c) => autoFill = c! }
         suggestedDisplayValue='hello'

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

@@ -35,7 +35,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 
   public get cursorLocation(): number {
     if (this._inputElement) {
-      let inputElement = this._inputElement;
+      const inputElement = this._inputElement;
       if (inputElement.selectionDirection !== SELECTION_FORWARD) {
         return inputElement.selectionEnd;
       } else {
@@ -81,8 +81,8 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   }
 
   public componentDidUpdate() {
-    let value = this._value;
-    let {
+    const value = this._value;
+    const {
       suggestedDisplayValue,
       shouldSelectFullInputValueInComponentDidUpdate
     } = this.props;
@@ -109,7 +109,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   }
 
   public render() {
-    let {
+    const {
       displayValue
     } = this.state;
 
@@ -154,7 +154,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
   @autobind
   private _onCompositionEnd(ev: React.CompositionEvent<HTMLInputElement>) {
-    let inputValue = this._getCurrentInputValue();
+    const inputValue = this._getCurrentInputValue();
     this._tryEnableAutofill(inputValue, this.value, false, true);
     // Due to timing, this needs to be async, otherwise no text will be selected.
     this._async.setTimeout(() => this._updateValue(inputValue), 0);
@@ -200,7 +200,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 
   @autobind
   private _onChange(ev: React.FormEvent<HTMLElement>) {
-    let value: string = this._getCurrentInputValue(ev);
+    const value: string = this._getCurrentInputValue(ev);
     // Right now typing does not have isComposing, once that has been fixed any should be removed.
     this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing);
     this._updateValue(value);

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

@@ -49,14 +49,14 @@ describe('Breadcrumb', () => {
       { text: 'TestText', key: 'TestKey', onClick: clickCallback }
     ];
 
-    let component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
+    const component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
       <Breadcrumb
         items={ items }
       />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink');
 
     ReactTestUtils.Simulate.click(itemLink!);
     expect(callbackValue).toEqual('TestKey');
@@ -71,15 +71,15 @@ describe('Breadcrumb', () => {
       { text: 'TestText4', key: 'TestKey4' }
     ];
 
-    let component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
+    const component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
       <Breadcrumb
         items={ items }
         maxDisplayedItems={ 2 }
       />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item');
 
     expect(itemLink[0].textContent).toEqual('TestText3');
   });

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

@@ -56,7 +56,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   @autobind
   private _onReduceData(data: IBreadCrumbData): IBreadCrumbData | undefined {
     let { renderedItems, renderedOverflowItems } = data;
-    let movedItem = renderedItems[0];
+    const movedItem = renderedItems[0];
     renderedItems = renderedItems.slice(1);
 
     renderedOverflowItems = [...renderedOverflowItems, movedItem];
@@ -68,10 +68,10 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
 
   @autobind
   private _onRenderBreadcrumb(data: IBreadCrumbData) {
-    let { className, ariaLabel, onRenderItem = this._onRenderItem } = data.props;
-    let { renderedOverflowItems, renderedItems } = data;
+    const { className, ariaLabel, onRenderItem = this._onRenderItem } = data.props;
+    const { renderedOverflowItems, renderedItems } = data;
 
-    let contextualItems = renderedOverflowItems.map(
+    const contextualItems = renderedOverflowItems.map(
       (item, index) => ({
         name: item.text,
         key: item.key,

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

@@ -15,8 +15,8 @@ export const getStyles = memoizeFunction((
   theme: ITheme,
   customStyles?: IButtonStyles
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let actionButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const actionButtonStyles: IButtonStyles = {
     root: {
       padding: DEFAULT_PADDING,
       height: DEFAULT_BUTTON_HEIGHT,

packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx

@@ -13,7 +13,7 @@ export class ActionButton extends BaseComponent<IButtonProps, {}> {
   protected _shouldUpdateComponentRef = false;
 
   public render() {
-    let { styles, theme } = this.props;
+    const { styles, theme } = this.props;
 
     return (
       <BaseButton

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

@@ -30,11 +30,11 @@ const iconStyle = {
 export const getStyles = memoizeFunction((
   theme: ITheme
 ): IButtonStyles => {
-  let { semanticColors } = theme;
+  const { semanticColors } = theme;
 
-  let border = semanticColors.buttonBorder;
-  let disabledBackground = semanticColors.disabledBackground;
-  let disabledText = semanticColors.disabledText;
+  const border = semanticColors.buttonBorder;
+  const disabledBackground = semanticColors.disabledBackground;
+  const disabledText = semanticColors.disabledText;
 
   return {
     root: [