diff --git a/scripts/generators/patternfly-4-component/index.js b/scripts/generators/patternfly-4-component/index.js
index a26aaa73b24..7a0d8608477 100644
--- a/scripts/generators/patternfly-4-component/index.js
+++ b/scripts/generators/patternfly-4-component/index.js
@@ -32,17 +32,40 @@ function setPF4Generators(plop) {
       };
       return [
         {
-          base,
           data,
-          type: 'addMany',
-          destination: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/'),
-          templateFiles: join(base, '**/*.js')
+          type: 'add',
+          templateFile: join(base, 'component.tsx.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.tsx')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'component.test.tsx.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.test.tsx')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'component.docs.js.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.docs.js')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'index.ts.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/index.ts')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'example.js.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/example/Simple{{componentName}}.ts')
         },
         {
           data,
           type: ADD_TO_BARREL_FILE,
           template: `export * from './{{componentName}}';`,
-          path: join(reactCoreRoot, './src/{{typeDir}}/index.js')
+          path: join(reactCoreRoot, './src/{{typeDir}}/index.ts')
         }
       ];
     }
diff --git a/scripts/generators/patternfly-4-component/templates/component/{{componentName}}.docs.js b/scripts/generators/patternfly-4-component/templates/component/component.docs.js.hbs
similarity index 100%
rename from scripts/generators/patternfly-4-component/templates/component/{{componentName}}.docs.js
rename to scripts/generators/patternfly-4-component/templates/component/component.docs.js.hbs
diff --git a/scripts/generators/patternfly-4-component/templates/component/{{componentName}}.test.js b/scripts/generators/patternfly-4-component/templates/component/component.test.tsx.hbs
similarity index 100%
rename from scripts/generators/patternfly-4-component/templates/component/{{componentName}}.test.js
rename to scripts/generators/patternfly-4-component/templates/component/component.test.tsx.hbs
diff --git a/scripts/generators/patternfly-4-component/templates/component/component.tsx.hbs b/scripts/generators/patternfly-4-component/templates/component/component.tsx.hbs
new file mode 100644
index 00000000000..4911d7ef7be
--- /dev/null
+++ b/scripts/generators/patternfly-4-component/templates/component/component.tsx.hbs
@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps } from 'react';
+import styles from '@patternfly/patternfly-next/{{typeDir}}/{{componentName}}/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+interface {{ componentName }}Props {
+  children?: any;
+  className?: string;
+}
+
+const {{componentName}}: React.SFC<{{componentName}}Props> = (props) => (
+  <div {...props} className={css(styles.{{ camelCase componentName }}, props.className)}>
+    {props.children}
+  </div>
+);
+
+{{ componentName }}.defaultProps = defaultProps;
+
+export default {{ componentName }};
diff --git a/scripts/generators/patternfly-4-component/templates/component/examples/Simple{{componentName}}.js b/scripts/generators/patternfly-4-component/templates/component/example.js.hbs
similarity index 100%
rename from scripts/generators/patternfly-4-component/templates/component/examples/Simple{{componentName}}.js
rename to scripts/generators/patternfly-4-component/templates/component/example.js.hbs
diff --git a/scripts/generators/patternfly-4-component/templates/component/index.js b/scripts/generators/patternfly-4-component/templates/component/index.ts.hbs
similarity index 100%
rename from scripts/generators/patternfly-4-component/templates/component/index.js
rename to scripts/generators/patternfly-4-component/templates/component/index.ts.hbs
diff --git a/scripts/generators/patternfly-4-component/templates/component/{{componentName}}.js b/scripts/generators/patternfly-4-component/templates/component/{{componentName}}.js
deleted file mode 100644
index 3a438e3c478..00000000000
--- a/scripts/generators/patternfly-4-component/templates/component/{{componentName}}.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/patternfly-next/{{typeDir}}/{{componentName}}/styles.css';
-import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-const defaultProps = {
-  children: null,
-  className: ''
-};
-
-const {{componentName}} = ({ className, children, ...props }) => (
-  <div {...props} className={css(styles.{{camelCase componentName}}, className)}>
-    {children}
-  </div>
-);
-
-{{componentName}}.propTypes = propTypes;
-{{componentName}}.defaultProps = defaultProps;
-
-export default {{componentName}};
diff --git a/tsconfig.json b/tsconfig.json
index 1649002babe..aff1ea4901f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,13 @@
   "compilerOptions": {
     "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true, 
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["es6", "dom"],
+    "lib": [
+      "es6",
+      "dom"
+    ],
     "module": "es2015",
     "moduleResolution": "node",
     "noEmit": true,
@@ -13,8 +16,12 @@
     "target": "esnext",
     "allowJs": true,
     "paths": {
-      "*": ["./packages/patternfly-4/react-core/dist/esm/*"]
+      "*": [
+        "./packages/patternfly-4/react-core/dist/esm/*"
+      ]
     }
   },
-  "include": ["packages/**/src/**/*"]
+  "include": [
+    "packages/**/src/**/*"
+  ]
 }