diff --git a/build-utils/presets/webpack.typescript.js b/build-utils/presets/webpack.typescript.js
new file mode 100644
index 0000000..9181d63
--- /dev/null
+++ b/build-utils/presets/webpack.typescript.js
@@ -0,0 +1,10 @@
+module.exports = () => ({
+	module: {
+		rules: [
+			{
+				test: /\.ts$/,
+				use: 'ts-loader'
+			}
+		]
+	}
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index cd9bf95..0b37853 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "dev:hot": "npm run webpack-dev-server -- --env.mode development --hot",
     "dev:watch": "npm run dev -- --watch",
     "prod": "npm run webpack -- --env.mode production",
+    "prod:typescript": "npm run prod -- --env.presets typescript",
     "prod:debug": "npm run debug -- --env.mode production",
     "dev:debug": "npm run debug -- --env.mode development",
     "debugthis": "node --inspect --inspect-brk ./src/index.js"
@@ -21,6 +22,8 @@
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.1",
     "style-loader": "^0.21.0",
+    "ts-loader": "^4.4.2",
+    "typescript": "^3.0.1",
     "url-loader": "^1.0.1",
     "webpack": "^4.16.3",
     "webpack-cli": "^3.1.0",
diff --git a/src/foo.ts b/src/foo.ts
new file mode 100644
index 0000000..f3718ae
--- /dev/null
+++ b/src/foo.ts
@@ -0,0 +1,6 @@
+export default class foo {
+	public bar;
+	constructor(){
+		this.bar = 'foo'
+	}
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e5bcd51..404f6a3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,8 @@ import button from './button.css'
 // import {createImage} from './create-image'
 import createImage from './create-image'
 
+import Foo from './foo.ts'
+
 const button1 = makeButton('Yeap A Button')
 button1.style = makeColorStyle('red')
 document.body.appendChild(button1)
diff --git a/yarn.lock b/yarn.lock
index 671cce7..a28119a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -555,7 +555,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
   dependencies:
@@ -3195,7 +3195,7 @@ selfsigned@^1.9.1:
   dependencies:
     node-forge "0.7.5"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
@@ -3627,6 +3627,16 @@ trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
 
+ts-loader@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-4.4.2.tgz#778d4464b24436873c78f7f9e914d88194c2a248"
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^3.1.4"
+    semver "^5.0.1"
+
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -3646,6 +3656,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.0.1.tgz#43738f29585d3a87575520a4b93ab6026ef11fdb"
+
 uglify-es@^3.3.4:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"