diff --git a/package-lock.json b/package-lock.json
index 032224a8..7faeaf16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1913,6 +1913,15 @@
         "@rollup/pluginutils": "^3.1.0"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz",
+      "integrity": "sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw==",
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "resolve": "^1.17.0"
+      }
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -14092,6 +14101,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -14144,9 +14158,9 @@
       }
     },
     "typescript": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.2.tgz",
-      "integrity": "sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz",
+      "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==",
       "dev": true
     },
     "typical": {
diff --git a/package.json b/package.json
index c1934cc5..9381ed09 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,13 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
     "babel-plugin-source-map-support": "^2.1.3",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "rollup": "^2.34.0",
-    "source-map-support": "^0.5.19"
+    "source-map-support": "^0.5.19",
+    "tslib": "^2.2.0"
   },
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^8.0.1",
@@ -59,7 +61,7 @@
     "markdown-toc": "^1.2.0",
     "semantic-release": "^17.3.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.1.2"
+    "typescript": "^4.2.2"
   },
   "scripts": {
     "start": "tsc --watch",
diff --git a/src/renderer/template.ts b/src/renderer/template.ts
index 0021dc0c..15099a89 100644
--- a/src/renderer/template.ts
+++ b/src/renderer/template.ts
@@ -5,7 +5,7 @@ import { isJsFile } from "../utils";
 import { TemplateContext, TemplateFunction, TemplateRenderResult } from "../types";
 
 /**
- * render a file with react. This function automatically transforms jsx to js before importing the component.
+ * Render a file with React.
  * 
  * @param filepath the path to file to render
  */
diff --git a/src/transpiler/transpiler.ts b/src/transpiler/transpiler.ts
index 35ef7c1b..1faa4b6b 100644
--- a/src/transpiler/transpiler.ts
+++ b/src/transpiler/transpiler.ts
@@ -1,64 +1,70 @@
 import Path from 'path';
 
 import { rollup } from 'rollup';
+import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
 
 import { getStatsInDir } from '../utils';
 import { TranspileFilesOptions } from '../types';
 
 const ROOT_DIR = Path.resolve(__dirname, '../..');
+const extensions = ['.js', '.jsx', '.cjs', '.tsx'];
 
 /**
- * Transpile files in a given directory (and sub directory if recursive option are passed) and write it to an output directory, if no errors are thrown it completed successfully.
+ * Transpile files in a given directory (and sub directory if recursive option are passed) and write it to an output directory,
+ * if no errors are thrown it completed successfully.
  * 
  * @param directory to transpile.
  * @param outputDir to write the transpiled files to.
  * @param options any extra options that should be passed.
  */
 export async function transpileFiles(directory: string, outputDir: string, options?: TranspileFilesOptions) {
-    const { files, dirs } = await getStatsInDir(directory);
-    if (files.length) {
-        /**
-         * WHEN ADDING PLUGINS to transform the input keep in mind that 
-         * IF any of these changes the actual original content in some way
-         * the output is not able to produce accurate source map to the original file.
-         * 
-         * An example of this is using the `sourceMaps: 'inline'` configuration for the babel plugin.
-         */
-        const bundles = await rollup({
-            input: files,
-            onwarn: () => {},
-            plugins: [
-                babel({
-                    cwd: ROOT_DIR,
-                    babelHelpers: "bundled",
-                    plugins: [
-                        "source-map-support",
-                    ],
-                    presets: [
-                        ["@babel/preset-env", {
-                            targets: { node: "12.16" },
-                        }],
-                        ["@babel/preset-react", {
-                            runtime: "automatic",
-                        }],
-                    ],
-                })
-            ]
+  const { files, dirs } = await getStatsInDir(directory);
+    
+  if (files.length) {
+    /**
+     * WHEN ADDING PLUGINS to transform the input keep in mind that 
+     * IF any of these changes the actual original content in some way
+     * the output is not able to produce accurate source map to the original file.
+     * 
+     * An example of this is using the `sourceMaps: 'inline'` configuration for the babel plugin.
+     */
+    const bundles = await rollup({
+      input: files,
+      onwarn: () => {},
+      plugins: [
+        typescript(),
+        babel({
+          cwd: ROOT_DIR,
+          babelHelpers: "bundled",
+          plugins: [
+            "source-map-support",
+          ],
+          presets: [
+            ["@babel/preset-env", {
+              targets: { node: "12.16" },
+            }],
+            ["@babel/preset-react", {
+              runtime: "automatic",
+            }],
+          ],
         })
-        await bundles.write({
-            format: "commonjs",
-            sourcemap: true,
-            dir: outputDir,
-            exports: "auto"
-        })
-    }
+      ]
+    });
+    
+    await bundles.write({
+      format: "commonjs",
+      sourcemap: true,
+      dir: outputDir,
+      exports: "auto"
+    });
+  }
 
-    // Check if we should transpile all subdirs
-    if (options?.recursive === true && dirs.length > 0) {
-        for (const subdir of dirs) {
-            const subdirPath = Path.parse(subdir);
-            await transpileFiles(subdir, Path.resolve(outputDir, subdirPath.base), options);
-        }
+  // Check if we should transpile all subdirs
+  if (options?.recursive === true && dirs.length > 0) {
+    for (const subdir of dirs) {
+      const subdirPath = Path.parse(subdir);
+      await transpileFiles(subdir, Path.resolve(outputDir, subdirPath.base), options);
     }
+  }
 }
diff --git a/src/utils/isJsFile.ts b/src/utils/isJsFile.ts
index a675040a..0e20047f 100644
--- a/src/utils/isJsFile.ts
+++ b/src/utils/isJsFile.ts
@@ -1,7 +1,8 @@
-const ALLOWED_EXTS = ['js', 'jsx', 'cjs'];
+const ALLOWED_EXTS = ['js', 'jsx', 'cjs', 'tsx'];
 
 /**
- * Function which checks if file is JS file
+ * Function which checks if file is JS file that supports JSX syntax
+ * 
  * @private
  * @param {string} filename
  * @returns {boolean}