init

Author: mavajee

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    ["@babel/preset-env", { "modules": false }]
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+./dist
+./node_modules

README.md

@@ -0,0 +1,17 @@
+# Typescript Setup
+
+## Webpack
+
+- **Webpack + ts-loader**
+- Webpack + babel + @babel/preset-typescript
+
+## Rollup
+
+- Rollup + rollup-plugin-typescript
+- Rollup + babel + @babel/preset-typescript
+- **Rollup + babel + @babel/preset-typescript2**
+
+
+UPD: Варианты при которых type-check происходит "на лету" выделены **жирным**. Но у этого есть минус, более медленно компилирование, поэтому если это важно (например для клиентского приложения) то лучше использовать babel.
+
+UPD: [Бабель поджерживает только компиляцию](https://github.com/babel/babel/issues/8301#issuecomment-404108743).

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "example__typescript-setup",
+  "version": "0.1.0",
+  "description": "none",
+  "main": "src/main.ts",
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "rollup:watch": "rollup -c -w",
+    "webpack:watch": "webpack -w"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-typescript": "^7.1.0",
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-typescript": "^1.0.0",
+    "rollup-plugin-typescript2": "^0.17.2",
+    "ts-loader": "^5.3.0",
+    "tslib": "^1.9.3",
+    "typescript": "^3.1.6",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2"
+  }
+}

rollup.config.js

@@ -0,0 +1,52 @@
+import path from "path";
+import babel from "rollup-plugin-babel";
+import typescript from "rollup-plugin-typescript";
+import typescript2 from "rollup-plugin-typescript2";
+
+// config for using rollup typescript
+// export default {
+//   input: "./main.ts",
+
+//   output: [
+//     {
+//       file: `test.js`,
+//       format: "esm"
+//     }
+//   ],
+
+//   plugins: [typescript()]
+// };
+
+// typescript using babel
+// export default {
+//   input: "./main.ts",
+
+//   output: [
+//     {
+//       file: path.resolve(__dirname, "dist", 'bundle.rollup.js'),
+//       format: "esm"
+//     }
+//   ],
+
+//   plugins: [
+//     babel({
+//       exclude: "node_modules/**",
+//       // https://github.com/Tomekmularczyk/react-package-rollup/blob/with-typescript/rollup.config.js
+//       extensions: [".js", ".ts", ".tsx"]
+//     })
+//   ]
+// };
+
+// config for using rollup typescript
+export default {
+  input: "./src/main.ts",
+
+  output: [
+    {
+      file: path.resolve(__dirname, "dist", 'bundle.rollup.js'),
+      format: "esm"
+    }
+  ],
+
+  plugins: [typescript2()]
+};

src/main.ts

@@ -0,0 +1,42 @@
+console.log('HELLO WORLD MAN;');
+console.log('You are my father boy;');
+
+// const asd = () => {
+//   console.log('WARNOTN');
+//   return '324234'
+// }
+
+// asd();
+
+// class Point {
+//   constructor(public x, public y) {
+//     console.log('asdas')
+//   }
+//   getDistance(p: Point) {
+//       let dx = p.x - this.x;
+//       let dy = p.y - this.y;
+//       return Math.sqrt(dx ** 2 + dy ** 2);
+//   }
+// }
+// // ...
+
+// // Reopen the interface.
+// interface Point {
+//   distanceFromOrigin(point: Point): number;
+// }
+// Point.prototype.distanceFromOrigin = function(point: Point) {
+//   return this.getDistance({ x: 0, y: 0});
+// }
+
+// const p = new Point(1,2);
+
+const test = (): Number => {
+  let b:Number = 123;
+  b = 123123;
+  b = 12325;
+  console.log(b);
+
+  return 123123
+}
+
+console.log(test())

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "target": "esnext",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@types"],
+    "lib": ["dom", "es2015", "es2016"]
+  },
+  "include": [
+    "src/*"
+],
+  "exclude": [
+      "node_modules",
+  ]
+}

webpack.config.js

@@ -0,0 +1,23 @@
+const path = require("path");
+
+module.exports = {
+  target: "node",
+  mode: "production",
+  entry: "./src/main.ts",
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"]
+  },
+  output: {
+    filename: "bundle.webpack.js",
+    path: path.resolve(__dirname, "dist")
+  }
+};