diff --git a/packages/typography/index.tsx b/packages/typography/index.tsx
new file mode 100644
index 000000000..105f8d346
--- /dev/null
+++ b/packages/typography/index.tsx
@@ -0,0 +1,76 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import typographyHOC from './typography';
+
+export const Body1 = typographyHOC<HTMLParagraphElement>({classModifier: 'body1', tag: 'p'});
+
+export const Body2 = typographyHOC<HTMLParagraphElement>({classModifier: 'body2', tag: 'p'});
+
+export const Button = typographyHOC<HTMLSpanElement>({classModifier: 'button', tag: 'span'});
+
+export const Caption = typographyHOC<HTMLSpanElement>({classModifier: 'caption', tag: 'span'});
+
+export const Headline1 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline1',
+  tag: 'h1',
+});
+
+export const Headline2 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline2',
+  tag: 'h2',
+});
+
+export const Headline3 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline3',
+  tag: 'h3',
+});
+
+export const Headline4 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline4',
+  tag: 'h4',
+});
+
+export const Headline5 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline5',
+  tag: 'h5',
+});
+
+export const Headline6 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'headline6',
+  tag: 'h6',
+});
+
+export const Overline = typographyHOC<HTMLSpanElement>({
+  classModifier: 'overline',
+  tag: 'span',
+});
+
+export const Subtitle1 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'subtitle1',
+  tag: 'h6',
+});
+
+export const Subtitle2 = typographyHOC<HTMLHeadingElement>({
+  classModifier: 'subtitle2',
+  tag: 'h6',
+});
diff --git a/packages/typography/typography.js b/packages/typography/typography.js
deleted file mode 100644
index e5f100e06..000000000
--- a/packages/typography/typography.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const typographyHOC = (options) => {
-  const {tag, classModifier} = options;
-
-  const Typography = (props) => {
-    const {children, className, tag: Tag, ...otherProps} = props;
-    const classes = classnames('mdc-typography', `mdc-typography--${classModifier}`, className);
-    return (
-      <Tag className={classes} {...otherProps}>{children}</Tag>
-    );
-  };
-
-  Typography.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    tag: PropTypes.string,
-  };
-
-  Typography.defaultProps = {
-    className: '',
-    tag,
-  };
-
-  return Typography;
-};
-
-export default typographyHOC;
diff --git a/packages/typography/index.js b/packages/typography/typography.tsx
similarity index 51%
rename from packages/typography/index.js
rename to packages/typography/typography.tsx
index 4ded9a56e..357488259 100644
--- a/packages/typography/index.js
+++ b/packages/typography/typography.tsx
@@ -20,18 +20,48 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import typographyHOC from './typography';
-
-export const Body1 = typographyHOC({classModifier: 'body1', tag: 'p'});
-export const Body2 = typographyHOC({classModifier: 'body2', tag: 'p'});
-export const Button = typographyHOC({classModifier: 'button', tag: 'span'});
-export const Caption = typographyHOC({classModifier: 'caption', tag: 'span'});
-export const Headline1 = typographyHOC({classModifier: 'headline1', tag: 'h1'});
-export const Headline2 = typographyHOC({classModifier: 'headline2', tag: 'h2'});
-export const Headline3 = typographyHOC({classModifier: 'headline3', tag: 'h3'});
-export const Headline4 = typographyHOC({classModifier: 'headline4', tag: 'h4'});
-export const Headline5 = typographyHOC({classModifier: 'headline5', tag: 'h5'});
-export const Headline6 = typographyHOC({classModifier: 'headline6', tag: 'h6'});
-export const Overline = typographyHOC({classModifier: 'overline', tag: 'span'});
-export const Subtitle1 = typographyHOC({classModifier: 'subtitle1', tag: 'h6'});
-export const Subtitle2 = typographyHOC({classModifier: 'subtitle2', tag: 'h6'});
+import * as classnames from 'classnames';
+import * as React from 'react';
+
+export interface TypographyProps<T> extends React.HTMLProps<T> {
+  children?: React.ReactNode;
+  className?: string;
+  tag?: string;
+}
+
+interface EnhancedProps {
+  tag: string;
+  classModifier: string;
+}
+
+const typographyHOC = <T extends {}>(options: EnhancedProps) => {
+  const {tag, classModifier} = options;
+
+  const Typography: React.FunctionComponent<TypographyProps<T>> = ({
+    // TODO: clean up after removing eslint react/prop-types
+    /* eslint-disable */
+    children,
+    className = '',
+    tag: Tag = tag,
+    /* eslint-enable */
+    ...otherProps
+  }) => {
+    const classes = classnames(
+      'mdc-typography',
+      `mdc-typography--${classModifier}`,
+      className
+    );
+
+    return (
+      // https://github.com/Microsoft/TypeScript/issues/28892
+      // @ts-ignore
+      <Tag className={classes} {...otherProps}>
+        {children}
+      </Tag>
+    );
+  };
+
+  return Typography;
+};
+
+export default typographyHOC;
diff --git a/test/screenshot/typography/index.js b/test/screenshot/typography/index.tsx
similarity index 73%
rename from test/screenshot/typography/index.js
rename to test/screenshot/typography/index.tsx
index 746be1e36..0ba302797 100644
--- a/test/screenshot/typography/index.js
+++ b/test/screenshot/typography/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-
+import * as React from 'react';
 import {
   Body1,
   Body2,
@@ -29,16 +28,26 @@ const Standard = () => (
     <Subtitle2>Jim Raynor</Subtitle2>
     <Body1>Kerrigan</Body1>
     <Body2>Arcturus Mengsk</Body2>
-    <div><Caption>Valerian Mengsk</Caption></div>
-    <div><Button>Donny Vermillion</Button></div>
-    <div><Overline>Kate Lockwell</Overline></div>
+    <div>
+      <Caption>Valerian Mengsk</Caption>
+    </div>
+    <div>
+      <Button>Donny Vermillion</Button>
+    </div>
+    <div>
+      <Overline>Kate Lockwell</Overline>
+    </div>
   </React.Fragment>
 );
 
 const Nested = () => (
   <React.Fragment>
-    <Body1>Kate <Caption>Lockwell</Caption></Body1>
-    <Body2>Donny <Button>Vermillion</Button></Body2>
+    <Body1>
+      Kate <Caption>Lockwell</Caption>
+    </Body1>
+    <Body2>
+      Donny <Button>Vermillion</Button>
+    </Body2>
   </React.Fragment>
 );
 
diff --git a/test/unit/typography/Body1.test.js b/test/unit/typography/Body1.test.tsx
similarity index 56%
rename from test/unit/typography/Body1.test.js
rename to test/unit/typography/Body1.test.tsx
index d9b336c55..dbdfa4b61 100644
--- a/test/unit/typography/Body1.test.js
+++ b/test/unit/typography/Body1.test.tsx
@@ -1,25 +1,33 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Body1} from '../../../packages/typography/index';
 
 suite('TypographyBody1');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Body1 className='test-class-name'>Text</Body1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Body1 className='test-class-name'>Text</Body1>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--body1'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Body1 tag="h1">Text</Body1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Body1 tag='h1'>Text</Body1>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'h1');
 });
 
 test('keeps custom props', () => {
-  const wrapper = shallow(<Body1 propOne={true} propTwo='test-prop'>Children</Body1>, {disableLifecycleMethods: true});
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  const wrapper = shallow(
+    <Body1 disabled={true} label='test-prop'>
+      Children
+    </Body1>,
+    {disableLifecycleMethods: true}
+  );
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Body2.test.js b/test/unit/typography/Body2.test.tsx
similarity index 56%
rename from test/unit/typography/Body2.test.js
rename to test/unit/typography/Body2.test.tsx
index 81689e2d5..b48a4d07e 100644
--- a/test/unit/typography/Body2.test.js
+++ b/test/unit/typography/Body2.test.tsx
@@ -1,25 +1,33 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Body2} from '../../../packages/typography/index';
 
 suite('TypographyBody2');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Body2 className='test-class-name'>Text</Body2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Body2 className='test-class-name'>Text</Body2>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--body2'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Body2 tag="h2">Text</Body2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Body2 tag='h2'>Text</Body2>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'h2');
 });
 
 test('keeps custom props', () => {
-  const wrapper = shallow(<Body2 propOne={true} propTwo='test-prop'>Children</Body2>, {disableLifecycleMethods: true});
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  const wrapper = shallow(
+    <Body2 disabled={true} label='test-prop'>
+      Children
+    </Body2>,
+    {disableLifecycleMethods: true}
+  );
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Button.test.js b/test/unit/typography/Button.test.tsx
similarity index 59%
rename from test/unit/typography/Button.test.js
rename to test/unit/typography/Button.test.tsx
index 806120914..11fe17730 100644
--- a/test/unit/typography/Button.test.js
+++ b/test/unit/typography/Button.test.tsx
@@ -1,28 +1,33 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Button} from '../../../packages/typography/index';
 
 suite('TypographyButton');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Button className='test-class-name'>Text</Button>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Button className='test-class-name'>Text</Button>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--button'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Button tag="h2">Text</Button>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Button tag='h2'>Text</Button>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'h2');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Button propOne={true} propTwo='test-prop'>Children</Button>,
-    {disableLifecycleMethods: true},
+    <Button disabled={true} label='test-prop'>
+      Children
+    </Button>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Caption.test.js b/test/unit/typography/Caption.test.tsx
similarity index 59%
rename from test/unit/typography/Caption.test.js
rename to test/unit/typography/Caption.test.tsx
index d626f9a86..ff0232caf 100644
--- a/test/unit/typography/Caption.test.js
+++ b/test/unit/typography/Caption.test.tsx
@@ -1,28 +1,33 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Caption} from '../../../packages/typography/index';
 
 suite('TypographyCaption');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Caption className='test-class-name'>Text</Caption>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Caption className='test-class-name'>Text</Caption>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--caption'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Caption tag="h2">Text</Caption>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Caption tag='h2'>Text</Caption>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'h2');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Caption propOne={true} propTwo='test-prop'>Children</Caption>,
-    {disableLifecycleMethods: true},
+    <Caption disabled={true} label='test-prop'>
+      Children
+    </Caption>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline1.test.js b/test/unit/typography/Headline1.test.tsx
similarity index 52%
rename from test/unit/typography/Headline1.test.js
rename to test/unit/typography/Headline1.test.tsx
index 4efb48086..2ffb568b2 100644
--- a/test/unit/typography/Headline1.test.js
+++ b/test/unit/typography/Headline1.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline1} from '../../../packages/typography/index';
 
 suite('TypographyHeadline1');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline1 className='test-class-name'>Text</Headline1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline1 className='test-class-name'>Text</Headline1>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline1'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline1 tag="p">Text</Headline1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline1 tag='p'>Text</Headline1>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline1 propOne={true} propTwo='test-prop'>Children</Headline1>,
-    {disableLifecycleMethods: true},
+    <Headline1 disabled={true} label='test-prop'>
+      Children
+    </Headline1>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline2.test.js b/test/unit/typography/Headline2.test.tsx
similarity index 52%
rename from test/unit/typography/Headline2.test.js
rename to test/unit/typography/Headline2.test.tsx
index dfe779ab3..88e2ebc9b 100644
--- a/test/unit/typography/Headline2.test.js
+++ b/test/unit/typography/Headline2.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline2} from '../../../packages/typography/index';
 
 suite('TypographyHeadline2');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline2 className='test-class-name'>Text</Headline2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline2 className='test-class-name'>Text</Headline2>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline2'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline2 tag="p">Text</Headline2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline2 tag='p'>Text</Headline2>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline2 propOne={true} propTwo='test-prop'>Children</Headline2>,
-    {disableLifecycleMethods: true},
+    <Headline2 disabled={true} label='test-prop'>
+      Children
+    </Headline2>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline3.test.js b/test/unit/typography/Headline3.test.tsx
similarity index 52%
rename from test/unit/typography/Headline3.test.js
rename to test/unit/typography/Headline3.test.tsx
index 6516b5d9c..d08006116 100644
--- a/test/unit/typography/Headline3.test.js
+++ b/test/unit/typography/Headline3.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline3} from '../../../packages/typography/index';
 
 suite('TypographyHeadline3');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline3 className='test-class-name'>Text</Headline3>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline3 className='test-class-name'>Text</Headline3>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline3'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline3 tag="p">Text</Headline3>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline3 tag='p'>Text</Headline3>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline3 propOne={true} propTwo='test-prop'>Children</Headline3>,
-    {disableLifecycleMethods: true},
+    <Headline3 disabled={true} label='test-prop'>
+      Children
+    </Headline3>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline4.test.js b/test/unit/typography/Headline4.test.tsx
similarity index 52%
rename from test/unit/typography/Headline4.test.js
rename to test/unit/typography/Headline4.test.tsx
index 04a4966c6..07608847d 100644
--- a/test/unit/typography/Headline4.test.js
+++ b/test/unit/typography/Headline4.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline4} from '../../../packages/typography/index';
 
 suite('TypographyHeadline4');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline4 className='test-class-name'>Text</Headline4>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline4 className='test-class-name'>Text</Headline4>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline4'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline4 tag="p">Text</Headline4>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline4 tag='p'>Text</Headline4>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline4 propOne={true} propTwo='test-prop'>Children</Headline4>,
-    {disableLifecycleMethods: true},
+    <Headline4 disabled={true} label='test-prop'>
+      Children
+    </Headline4>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline5.test.js b/test/unit/typography/Headline5.test.tsx
similarity index 52%
rename from test/unit/typography/Headline5.test.js
rename to test/unit/typography/Headline5.test.tsx
index 0970ac61b..2b65ceec4 100644
--- a/test/unit/typography/Headline5.test.js
+++ b/test/unit/typography/Headline5.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline5} from '../../../packages/typography/index';
 
 suite('TypographyHeadline5');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline5 className='test-class-name'>Text</Headline5>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline5 className='test-class-name'>Text</Headline5>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline5'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline5 tag="p">Text</Headline5>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline5 tag='p'>Text</Headline5>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline5 propOne={true} propTwo='test-prop'>Children</Headline5>,
-    {disableLifecycleMethods: true},
+    <Headline5 disabled={true} label='test-prop'>
+      Children
+    </Headline5>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Headline6.test.js b/test/unit/typography/Headline6.test.tsx
similarity index 52%
rename from test/unit/typography/Headline6.test.js
rename to test/unit/typography/Headline6.test.tsx
index 45af241a5..426fe033e 100644
--- a/test/unit/typography/Headline6.test.js
+++ b/test/unit/typography/Headline6.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Headline6} from '../../../packages/typography/index';
 
 suite('TypographyHeadline6');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Headline6 className='test-class-name'>Text</Headline6>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Headline6 className='test-class-name'>Text</Headline6>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--headline6'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Headline6 tag="p">Text</Headline6>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Headline6 tag='p'>Text</Headline6>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Headline6 propOne={true} propTwo='test-prop'>Children</Headline6>,
-    {disableLifecycleMethods: true},
+    <Headline6 disabled={true} label='test-prop'>
+      Children
+    </Headline6>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Overline.test.js b/test/unit/typography/Overline.test.tsx
similarity index 52%
rename from test/unit/typography/Overline.test.js
rename to test/unit/typography/Overline.test.tsx
index 4fd34bfb9..fad9a99ea 100644
--- a/test/unit/typography/Overline.test.js
+++ b/test/unit/typography/Overline.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Overline} from '../../../packages/typography/index';
 
 suite('TypographyOverline');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Overline className='test-class-name'>Text</Overline>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Overline className='test-class-name'>Text</Overline>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--overline'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Overline tag="p">Text</Overline>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Overline tag='p'>Text</Overline>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Overline propOne={true} propTwo='test-prop'>Children</Overline>,
-    {disableLifecycleMethods: true},
+    <Overline disabled={true} label='test-prop'>
+      Children
+    </Overline>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Subtitle1.test.js b/test/unit/typography/Subtitle1.test.tsx
similarity index 52%
rename from test/unit/typography/Subtitle1.test.js
rename to test/unit/typography/Subtitle1.test.tsx
index edc586b98..4aeb85986 100644
--- a/test/unit/typography/Subtitle1.test.js
+++ b/test/unit/typography/Subtitle1.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Subtitle1} from '../../../packages/typography/index';
 
 suite('TypographySubtitle1');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Subtitle1 className='test-class-name'>Text</Subtitle1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Subtitle1 className='test-class-name'>Text</Subtitle1>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--subtitle1'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Subtitle1 tag="p">Text</Subtitle1>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Subtitle1 tag='p'>Text</Subtitle1>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Subtitle1 propOne={true} propTwo='test-prop'>Children</Subtitle1>,
-    {disableLifecycleMethods: true},
+    <Subtitle1 disabled={true} label='test-prop'>
+      Children
+    </Subtitle1>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/typography/Subtitle2.test.js b/test/unit/typography/Subtitle2.test.tsx
similarity index 52%
rename from test/unit/typography/Subtitle2.test.js
rename to test/unit/typography/Subtitle2.test.tsx
index 677bb8ab5..6e299f6eb 100644
--- a/test/unit/typography/Subtitle2.test.js
+++ b/test/unit/typography/Subtitle2.test.tsx
@@ -1,28 +1,34 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Subtitle2} from '../../../packages/typography/index';
 
 suite('TypographySubtitle2');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Subtitle2 className='test-class-name'>Text</Subtitle2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(
+    <Subtitle2 className='test-class-name'>Text</Subtitle2>,
+    {disableLifecycleMethods: true}
+  );
   assert.isTrue(wrapper.hasClass('mdc-typography'));
   assert.isTrue(wrapper.hasClass('mdc-typography--subtitle2'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('renders a different tag', () => {
-  const wrapper = shallow(<Subtitle2 tag="p">Text</Subtitle2>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Subtitle2 tag='p'>Text</Subtitle2>, {
+    disableLifecycleMethods: true,
+  });
   assert.equal(wrapper.type(), 'p');
 });
 
 test('keeps custom props', () => {
   const wrapper = shallow(
-    <Subtitle2 propOne={true} propTwo='test-prop'>Children</Subtitle2>,
-    {disableLifecycleMethods: true},
+    <Subtitle2 disabled={true} label='test-prop'>
+      Children
+    </Subtitle2>,
+    {disableLifecycleMethods: true}
   );
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });