From 3ad7a2642ba29c6b118af403400e63075944c978 Mon Sep 17 00:00:00 2001
From: subying <tearlight2008@gmail.com>
Date: Sun, 9 Jun 2019 22:22:49 +0800
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=E5=8D=95=E5=85=83=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E6=94=B9=E6=88=90typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.base.config.js                  |  36 +-
 build/webpack.test.config.js                  |  12 +
 package-lock.json                             | 471 +++++++++++++++++-
 package.json                                  |   4 +
 test/index.d.ts                               |  20 +
 test/tsconfig.json                            |  35 ++
 test/tslint.json                              |  21 +
 test/unit/index.js                            |   2 +-
 test/unit/karma.conf.js                       |   4 +-
 .../specs/{expand.spec.js => expand.spec.ts}  |  37 +-
 .../specs/{fixed.spec.js => fixed.spec.ts}    |  32 +-
 .../specs/{index.spec.js => index.spec.ts}    |  61 +--
 .../{loading.spec.js => loading.spec.ts}      |  25 +-
 .../specs/{render.spec.js => render.spec.ts}  |  40 +-
 .../{resizable.spec.js => resizable.spec.ts}  |  23 +-
 ...{scopedSlot.spec.js => scopedSlot.spec.ts} |  33 +-
 ...{selectable.spec.js => selectable.spec.ts} |  37 +-
 test/unit/specs/sortable.spec.js              | 192 -------
 test/unit/specs/sortable.spec.ts              | 161 ++++++
 .../specs/{theme.spec.js => theme.spec.ts}    |  25 +-
 test/unit/tool.ts                             |  15 +
 test/unit/{util.js => util.ts}                |  34 +-
 22 files changed, 942 insertions(+), 378 deletions(-)
 create mode 100644 test/index.d.ts
 create mode 100644 test/tsconfig.json
 create mode 100644 test/tslint.json
 rename test/unit/specs/{expand.spec.js => expand.spec.ts} (70%)
 rename test/unit/specs/{fixed.spec.js => fixed.spec.ts} (81%)
 rename test/unit/specs/{index.spec.js => index.spec.ts} (64%)
 rename test/unit/specs/{loading.spec.js => loading.spec.ts} (80%)
 rename test/unit/specs/{render.spec.js => render.spec.ts} (75%)
 rename test/unit/specs/{resizable.spec.js => resizable.spec.ts} (82%)
 rename test/unit/specs/{scopedSlot.spec.js => scopedSlot.spec.ts} (75%)
 rename test/unit/specs/{selectable.spec.js => selectable.spec.ts} (85%)
 delete mode 100644 test/unit/specs/sortable.spec.js
 create mode 100644 test/unit/specs/sortable.spec.ts
 rename test/unit/specs/{theme.spec.js => theme.spec.ts} (81%)
 create mode 100644 test/unit/tool.ts
 rename test/unit/{util.js => util.ts} (69%)

diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
index 65496f3..d783d08 100644
--- a/build/webpack.base.config.js
+++ b/build/webpack.base.config.js
@@ -6,7 +6,7 @@ const { VueLoaderPlugin } = require('vue-loader');
 function resolve(dir) {
     return path.join(__dirname, '..', dir);
 }
-let sourceMap = false; // css sourceMap
+const sourceMap = false; // css sourceMap
 let jsSourceMap = true;
 if (process.env.NODE_ENV === 'production') {
     jsSourceMap = false;
@@ -63,10 +63,10 @@ module.exports = {
                         ],
                     },
                     postLoaders: {
-                        html: 'babel-loader?sourceMap'
+                        html: 'babel-loader?sourceMap',
                     },
                     sourceMap: jsSourceMap,
-                }
+                },
             },
             {
                 test: /\.js$/,
@@ -91,7 +91,7 @@ module.exports = {
                             sourceMap,
                         },
                     },
-                ]
+                ],
             },
             {
                 test: /\.less$/,
@@ -114,7 +114,7 @@ module.exports = {
                             sourceMap,
                         },
                     },
-                ]
+                ],
             },
             {
                 test: /\.scss$/,
@@ -137,30 +137,34 @@ module.exports = {
                             sourceMap,
                         },
                     },
-                ]
+                ],
             },
             {
                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
-                loader: 'url-loader?limit=8192'
+                loader: 'url-loader?limit=8192',
             },
             {
                 test: /\.(html|tpl)$/,
-                loader: 'html-loader'
-            }
-        ]
+                loader: 'html-loader',
+            },
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+            },
+        ],
     },
     resolve: {
         extensions: ['.js', '.vue'],
         alias: {
-            'vue': 'vue/dist/vue.esm.js',
-            '@': resolve('src')
-        }
+            vue: 'vue/dist/vue.esm.js',
+            '@': resolve('src'),
+        },
     },
     plugins: [
         new webpack.optimize.ModuleConcatenationPlugin(),
         new webpack.DefinePlugin({
-            'process.env.VERSION': `'${pkg.version}'`
+            'process.env.VERSION': `'${pkg.version}'`,
         }),
         new VueLoaderPlugin(),
-    ]
-};
\ No newline at end of file
+    ],
+};
diff --git a/build/webpack.test.config.js b/build/webpack.test.config.js
index 81e71d9..91c4125 100644
--- a/build/webpack.test.config.js
+++ b/build/webpack.test.config.js
@@ -1,9 +1,21 @@
+const path = require('path');
 const merge = require('webpack-merge');
 const webpackBaseConfig = require('./webpack.base.config.js');
 
+function resolve(dir) {
+    return path.join(__dirname, '..', dir);
+}
+
 const conifg = merge(webpackBaseConfig, {
     devtool: 'eval-source-map',
     mode: 'development',
+    resolve: {
+        extensions: ['.js', '.vue', '.ts'],
+        alias: {
+            vue: 'vue/dist/vue.esm.js',
+            '@': resolve('test/unit'),
+        },
+    },
 });
 
 delete conifg.entry;
diff --git a/package-lock.json b/package-lock.json
index 4eff600..54e03a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -819,6 +819,12 @@
       "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
       "dev": true
     },
+    "@types/chai": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.7.tgz",
+      "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==",
+      "dev": true
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -842,6 +848,12 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
       "dev": true
     },
+    "@types/mocha": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.7.tgz",
+      "integrity": "sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==",
+      "dev": true
+    },
     "@types/node": {
       "version": "12.0.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.2.tgz",
@@ -1142,6 +1154,12 @@
       "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==",
       "dev": true
     },
+    "acorn-walk": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz",
+      "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==",
+      "dev": true
+    },
     "after": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -1212,6 +1230,12 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
+      "dev": true
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -1867,6 +1891,23 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
+    "browser-resolve": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
+      "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
+      "dev": true,
+      "requires": {
+        "resolve": "1.1.7"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
+          "dev": true
+        }
+      }
+    },
     "browser-stdout": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
@@ -2356,6 +2397,26 @@
       "integrity": "sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==",
       "dev": true
     },
+    "combine-source-map": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/combine-source-map/-/combine-source-map-0.8.0.tgz",
+      "integrity": "sha1-pY0N8ELBhvz4IqjoAV9UUNLXmos=",
+      "dev": true,
+      "requires": {
+        "convert-source-map": "~1.1.0",
+        "inline-source-map": "~0.6.0",
+        "lodash.memoize": "~3.0.3",
+        "source-map": "~0.5.3"
+      },
+      "dependencies": {
+        "convert-source-map": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
+          "integrity": "sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=",
+          "dev": true
+        }
+      }
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2948,6 +3009,23 @@
         "ip-regex": "^2.1.0"
       }
     },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+          "dev": true
+        }
+      }
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -3433,6 +3511,12 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=",
+      "dev": true
+    },
     "es6-symbol": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
@@ -5898,6 +5982,15 @@
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
+    "inline-source-map": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/inline-source-map/-/inline-source-map-0.6.2.tgz",
+      "integrity": "sha1-+Tk0ccGKedFyT4Y/o4tYY3Ct4qU=",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.5.3"
+      }
+    },
     "inquirer": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.3.1.tgz",
@@ -5994,6 +6087,12 @@
         "kind-of": "^3.0.2"
       }
     },
+    "is-arguments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
+      "dev": true
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -6082,6 +6181,12 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.7.tgz",
+      "integrity": "sha512-YZc5EwyO4f2kWCax7oegfuSr9mFz1ZvieNYBEjmukLxgXfBUbxAWGVF7GZf0zidYtoBl3WvC07YK0wT76a+Rtw==",
+      "dev": true
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -6091,6 +6196,15 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-nan": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.2.1.tgz",
+      "integrity": "sha1-n69ltvttskt/XAYoR16nH5iEAeI=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.1"
+      }
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -6391,8 +6505,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "json3": {
       "version": "3.3.2",
@@ -6551,6 +6664,149 @@
         "colors": "^1.1.2"
       }
     },
+    "karma-typescript": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/karma-typescript/-/karma-typescript-4.1.0.tgz",
+      "integrity": "sha512-FhoZlPWVlkWN110KrUYcAOxTPeyvw9kg3uolxP2s/DsmUthdc5MWgl84yOr4j3xFGHStd9wLqek1nGRkFcJ35A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^6.0.5",
+        "acorn-walk": "^6.1.1",
+        "assert": "^2.0.0",
+        "async": "^3.0.1",
+        "browser-resolve": "^1.11.3",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^5.2.1",
+        "combine-source-map": "^0.8.0",
+        "console-browserify": "^1.1.0",
+        "constants-browserify": "^1.0.0",
+        "convert-source-map": "^1.6.0",
+        "crypto-browserify": "^3.12.0",
+        "diff": "^4.0.1",
+        "domain-browser": "^1.2.0",
+        "events": "^3.0.0",
+        "glob": "^7.1.3",
+        "https-browserify": "^1.0.0",
+        "istanbul": "0.4.5",
+        "json-stringify-safe": "^5.0.1",
+        "karma-coverage": "^1.1.1",
+        "lodash": "^4.17.11",
+        "log4js": "^4.0.1",
+        "minimatch": "^3.0.4",
+        "os-browserify": "^0.3.0",
+        "pad": "^3.2.0",
+        "path-browserify": "^1.0.0",
+        "process": "^0.11.10",
+        "punycode": "^2.1.1",
+        "querystring-es3": "^0.2.1",
+        "readable-stream": "^3.1.1",
+        "remap-istanbul": "^0.13.0",
+        "source-map": "^0.7.3",
+        "stream-browserify": "^2.0.2",
+        "stream-http": "^3.0.0",
+        "string_decoder": "^1.2.0",
+        "timers-browserify": "^2.0.10",
+        "tmp": "^0.1.0",
+        "tty-browserify": "^0.0.1",
+        "url": "^0.11.0",
+        "util": "^0.12.0",
+        "vm-browserify": "1.1.0"
+      },
+      "dependencies": {
+        "assert": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
+          "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
+          "dev": true,
+          "requires": {
+            "es6-object-assign": "^1.1.0",
+            "is-nan": "^1.2.1",
+            "object-is": "^1.0.1",
+            "util": "^0.12.0"
+          }
+        },
+        "async": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.0.1.tgz",
+          "integrity": "sha512-ZswD8vwPtmBZzbn9xyi8XBQWXH3AvOQ43Za1KWYq7JeycrZuUYzx01KvHcVbXltjqH4y0MWrQ33008uLTqXuDw==",
+          "dev": true
+        },
+        "buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+          "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        },
+        "diff": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
+          "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
+          "dev": true
+        },
+        "path-browserify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.0.tgz",
+          "integrity": "sha512-Hkavx/nY4/plImrZPHRk2CL9vpOymZLgEbMNX1U0bjcBL7QN9wODxyx0yaMZURSQaUtSEvDrfAvxa9oPb0at9g==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        },
+        "stream-http": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.0.0.tgz",
+          "integrity": "sha512-JELJfd+btL9GHtxU3+XXhg9NLYrKFnhybfvRuDghtyVkOFydz3PKNT1df07AMr88qW03WHF+FSV0PySpXignCA==",
+          "dev": true,
+          "requires": {
+            "builtin-status-codes": "^3.0.0",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.0.6",
+            "xtend": "^4.0.0"
+          }
+        },
+        "tmp": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.1.0.tgz",
+          "integrity": "sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==",
+          "dev": true,
+          "requires": {
+            "rimraf": "^2.6.3"
+          }
+        },
+        "tty-browserify": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+          "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==",
+          "dev": true
+        },
+        "util": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.0.tgz",
+          "integrity": "sha512-pPSOFl7VLhZ7LO/SFABPraZEEurkJUWSMn3MuA/r3WQZc+Z1fqou2JqLSOZbCLl73EUIxuUVX8X4jkX2vfJeAA==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "object.entries": "^1.1.0",
+            "safe-buffer": "^5.1.2"
+          }
+        },
+        "vm-browserify": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
+          "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==",
+          "dev": true
+        }
+      }
+    },
     "karma-webpack": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/karma-webpack/-/karma-webpack-3.0.5.tgz",
@@ -6761,6 +7017,12 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash.memoize": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz",
+      "integrity": "sha1-LcvSwofLwKVcxCMovQxzYVDVPj8=",
+      "dev": true
+    },
     "lodash.tail": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
@@ -7774,6 +8036,12 @@
         "kind-of": "^3.0.3"
       }
     },
+    "object-is": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -8016,6 +8284,15 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "pad": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pad/-/pad-3.2.0.tgz",
+      "integrity": "sha512-2u0TrjcGbOjBTJpyewEl4hBO3OeX5wWue7eIFPzQTg6wFSvoaHcBTTUY5m+n0hd04gmTCPuY0kCpVIVuw5etwg==",
+      "dev": true,
+      "requires": {
+        "wcwidth": "^1.0.1"
+      }
+    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -8239,6 +8516,12 @@
       "dev": true,
       "optional": true
     },
+    "picomatch": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
+      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
+      "dev": true
+    },
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -8269,6 +8552,48 @@
         "find-up": "^3.0.0"
       }
     },
+    "plugin-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+      "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^1.0.1",
+        "arr-diff": "^4.0.0",
+        "arr-union": "^3.1.0",
+        "extend-shallow": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+          "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+          "dev": true,
+          "requires": {
+            "ansi-wrap": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -8761,12 +9086,6 @@
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
-    "ramda": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
-      "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==",
-      "dev": true
-    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9025,6 +9344,37 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remap-istanbul": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/remap-istanbul/-/remap-istanbul-0.13.0.tgz",
+      "integrity": "sha512-rS5ZpVAx3fGtKZkiBe1esXg5mKYbgW9iz8kkADFt3p6lo3NsBBUX1q6SwdhwUtYCGnr7nK6gRlbYK3i8R0jbRA==",
+      "dev": true,
+      "requires": {
+        "istanbul": "0.4.5",
+        "minimatch": "^3.0.4",
+        "plugin-error": "^1.0.1",
+        "source-map": "0.6.1",
+        "through2": "3.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "through2": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.0.tgz",
+          "integrity": "sha512-8B+sevlqP4OiCjonI1Zw03Sf8PuV1eRsYQgLad5eonILOdyeRsY27A/2Ze8IlvlMvq31OH+3fz/styI7Ya62yQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "2 || 3",
+            "xtend": "~4.0.1"
+          }
+        }
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -10599,6 +10949,96 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "ts-loader": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.0.2.tgz",
+      "integrity": "sha512-kkF3sGf3oBUehlvXI9fkbItbFTnNgGkYAz91vtWnsKAU4m+LAmQjuby7uTZNo3As+/zHLuyB052SkQDY6vLXtg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^1.0.2",
+        "micromatch": "^4.0.0",
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "big.js": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "semver": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz",
+          "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
@@ -10659,6 +11099,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.1.tgz",
+      "integrity": "sha512-64HkdiRv1yYZsSe4xC1WVgamNigVYjlssIoaH2HcZF0+ijsk5YK2g0G34w9wJkze8+5ow4STd22AynfO6ZYYLw==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -11237,6 +11683,15 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
     "webpack": {
       "version": "4.31.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.31.0.tgz",
diff --git a/package.json b/package.json
index 54f16cd..f70b861 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,8 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-stage-3": "^7.0.0",
     "@babel/runtime": "^7.4.4",
+    "@types/chai": "^4.1.7",
+    "@types/mocha": "^5.2.7",
     "@vue/test-utils": "^1.0.0-beta.29",
     "autoprefixer-loader": "^3.2.0",
     "babel-eslint": "^10.0.1",
@@ -78,6 +80,8 @@
     "sinon": "^7.3.2",
     "sinon-chai": "^3.3.0",
     "style-loader": "^0.23.1",
+    "ts-loader": "^6.0.2",
+    "typescript": "^3.5.1",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
     "vue": "^2.6.10",
diff --git a/test/index.d.ts b/test/index.d.ts
new file mode 100644
index 0000000..8bec03f
--- /dev/null
+++ b/test/index.d.ts
@@ -0,0 +1,20 @@
+
+interface FlexTableColumnOption {
+    [index: string]: string | number;
+    name: string;
+    age: number;
+    address: string;
+    date: string;
+}
+
+interface FlexTableRow {
+    row: FlexTableColumnOption;
+    column: {
+        title: string;
+    };
+}
+
+interface SortOption {
+    key: string;
+    order: string;
+}
diff --git a/test/tsconfig.json b/test/tsconfig.json
new file mode 100644
index 0000000..234182f
--- /dev/null
+++ b/test/tsconfig.json
@@ -0,0 +1,35 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "esnext",
+        "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": false,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": [
+            "mocha",
+            "vue"
+        ],
+        "paths": {
+            "@/*": [
+                "unit/*"
+            ]
+        },
+        "lib": [
+            "esnext",
+            "dom",
+        ]
+    },
+    "include": [
+        "**/*.ts",
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
diff --git a/test/tslint.json b/test/tslint.json
new file mode 100644
index 0000000..e9bc3d4
--- /dev/null
+++ b/test/tslint.json
@@ -0,0 +1,21 @@
+{
+    "defaultSeverity": "warning",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "linterOptions": {
+        "exclude": [
+            "node_modules/**"
+        ]
+    },
+    "rules": {
+        "quotemark": [true, "single"],
+        "indent": [true, "spaces", 4],
+        "interface-name": false,
+        "ordered-imports": false,
+        "object-literal-sort-keys": false,
+        "no-consecutive-blank-lines": false,
+        "no-namespace": false,
+        "only-arrow-functions": false
+    }
+}
\ No newline at end of file
diff --git a/test/unit/index.js b/test/unit/index.js
index 20c99cb..0f4e38a 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,5 +1,5 @@
 const testsContext = require.context('./specs', true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
-const srcContext = require.context('../../src', true,  /^\.\/(?!.*(\.less)?$)/);
+const srcContext = require.context('../../src', true, /^\.\/(?!.*(\.less)?$)/);
 srcContext.keys().forEach(srcContext);
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 6bb6b3c..5dfee63 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -5,7 +5,9 @@ module.exports = function(config) {
         browsers: ['ChromeHeadless'],
         frameworks: ['mocha', 'sinon-chai'],
         reporters: ['spec', 'coverage'],
-        files: ['index.js'],
+        files: [
+            'index.js',
+        ],
         preprocessors: {
             'index.js': ['webpack', 'sourcemap'],
         },
diff --git a/test/unit/specs/expand.spec.js b/test/unit/specs/expand.spec.ts
similarity index 70%
rename from test/unit/specs/expand.spec.js
rename to test/unit/specs/expand.spec.ts
index d35dbda..d047a1c 100644
--- a/test/unit/specs/expand.spec.js
+++ b/test/unit/specs/expand.spec.ts
@@ -1,12 +1,12 @@
-/* eslint-disable no-undef */
 import {
     createVue,
     // destroyVM,
     triggerEvent,
     waitImmediate,
-} from '../util';
+} from '@/util';
+import { expect } from 'chai';
 
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 1; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -25,8 +25,8 @@ describe('Flex-Table', () => {
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                 ></flex-table>
@@ -37,7 +37,7 @@ describe('Flex-Table', () => {
                         {
                             type: 'expand',
                             width: 50,
-                            render: (h, params) => {
+                            render: (h: any, params: FlexTableRow) => {
                                 return h('p', {}, params.row.name);
                             },
                         },
@@ -48,7 +48,7 @@ describe('Flex-Table', () => {
                         {
                             title: 'Age',
                             key: 'age',
-                            render(h, params) {
+                            render(h: any, params: FlexTableRow) {
                                 return h('span', `age: ${params.row.age}`);
                             },
                         },
@@ -76,16 +76,29 @@ describe('Flex-Table', () => {
         const elemExpandBtn = vm.$el.querySelector('.flex-table-col-icon');
         // 检测
         it('check expand', async () => {
-            triggerEvent(elemExpandBtn, 'click');
-            await waitImmediate();
-            const elemNext = elemExpandBtn.parentElement.nextElementSibling;
-            expect(elemNext.innerHTML).to.eql('<p>John Brown</p>');
+            let elemNextHtml = '';
+            if (elemExpandBtn) {
+                triggerEvent(elemExpandBtn, 'click');
+                await waitImmediate();
+                if ( elemExpandBtn.parentElement ) {
+                    const elemNext = elemExpandBtn.parentElement.nextElementSibling;
+                    if ( elemNext && elemNext.innerHTML) {
+                        elemNextHtml = elemNext.innerHTML;
+                    }
+                }
+            }
+
+            expect(elemNextHtml).to.eql('<p>John Brown</p>');
         });
 
         it('check unexpanded', async () => {
             triggerEvent(elemExpandBtn, 'click');
             await waitImmediate();
-            const elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            let elemNext;
+            if (elemExpandBtn && elemExpandBtn.parentElement){
+                elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            }
+
             expect(elemNext).to.eql(null);
         });
 
diff --git a/test/unit/specs/fixed.spec.js b/test/unit/specs/fixed.spec.ts
similarity index 81%
rename from test/unit/specs/fixed.spec.js
rename to test/unit/specs/fixed.spec.ts
index ad0e2bb..f51b442 100644
--- a/test/unit/specs/fixed.spec.js
+++ b/test/unit/specs/fixed.spec.ts
@@ -1,12 +1,13 @@
-/* eslint-disable no-undef */
 import {
     createVue,
     // destroyVM,
     // triggerEvent,
     // waitImmediate,
-} from '../util';
+} from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 2; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -16,18 +17,15 @@ for (let i = 0; i < 2; i += 1) {
     };
     aTestList.push(oTestData);
 }
-function checkFixedLayout(vm, type) {
+function checkFixedLayout(vm: Vue, type: string) {
     const aFixedTable = vm.$el.querySelectorAll(`.flex-table-fixed-${type}`);
     expect(aFixedTable.length).to.eql(1);
 }
 
-function checkLayoutHead(vm, type, i) {
+function checkLayoutHead(vm: Vue, type: string, i: number) {
     const aFixedTableHeadCol = vm.$el.querySelectorAll(`.flex-table-fixed-${type} .flex-table-head .flex-table-col`);
     let bCheck = true;
-    aFixedTableHeadCol.forEach((element, index) => {
-        if (type === 'right') {
-            console.log(element);
-        }
+    aFixedTableHeadCol.forEach((element: any, index: number) => {
         // 如果不是第2列，并且存在内容，则表示渲染失败
         if (index !== i && element.innerText) {
             bCheck = false;
@@ -39,14 +37,14 @@ function checkLayoutHead(vm, type, i) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('fixed', () => {
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
-                    resizable
-                    :loading="loading" 
-                    :columns="columns" 
-                    :data="list"
-                    :sum="sum"
+                resizable
+                :loading="loading"
+                :columns="columns"
+                :data="list"
+                :sum="sum"
                 ></flex-table>
             `,
             data() {
@@ -63,7 +61,7 @@ describe('Flex-Table', () => {
                             key: 'age',
                             width: 100,
                             fixed: 'right',
-                            render(h, params) {
+                            render(h: Vue.CreateElement, params: FlexTableRow ) {
                                 return h('span', `age: ${params.row.age}`);
                             },
                         },
@@ -106,7 +104,7 @@ describe('Flex-Table', () => {
             done();
         });
         it('check fixed-right layout-head', (done) => {
-            checkLayoutHead(vm, 'right', vm.$children[0].columns.length - 1);
+            checkLayoutHead(vm, 'right', vm.$data.columns.length - 1);
             done();
         });
     });
diff --git a/test/unit/specs/index.spec.js b/test/unit/specs/index.spec.ts
similarity index 64%
rename from test/unit/specs/index.spec.js
rename to test/unit/specs/index.spec.ts
index f449462..3615a5a 100644
--- a/test/unit/specs/index.spec.js
+++ b/test/unit/specs/index.spec.ts
@@ -1,33 +1,35 @@
-import { createVue } from '../util';
+import { expect } from 'chai';
+import { createVue } from '@/util';
+import { setFoot } from '@/tool';
 
-const aTestList = [];
-const aTestData = [];
-for(let i=0;i<10;i++){
-    const oTestData = {
+const aTestList: FlexTableColumnOption[] = [];
+const aTestData: string[] = [];
+for (let i = 0; i < 10; i++) {
+    const oTestData: FlexTableColumnOption = {
         name: 'John Brown',
         age: 18,
         address: 'New York No. 1 Lake Park',
         date: '2016-10-03',
     };
     aTestList.push(oTestData);
-    for (const k in oTestData) {
-        aTestData.push(oTestData[k].toString()); 
-    }
+    Object.keys(oTestData).forEach((k) => {
+        aTestData.push(oTestData[k].toString());
+    });
 }
-describe('Flex-Table', () => { 
+describe('Flex-Table', () => {
     // 基础测试
     describe('base', () => {
         const vm = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                 ></flex-table>
             `,
-            data(){
+            data() {
                 return {
                     columns: [
                         {
@@ -36,7 +38,7 @@ describe('Flex-Table', () => {
                         },
                         {
                             title: 'Age',
-                            key: 'age'
+                            key: 'age',
                         },
                         {
                             title: 'Address',
@@ -49,23 +51,25 @@ describe('Flex-Table', () => {
                     ],
                     loading: false,
                     list: aTestList,
-                    sum:{
+                    sum: {
                         name: 'Jim Green',
                         age: 24,
                         address: 'London',
                         date: '2016-10-01',
                     },
-                }
-            }
+                };
+            },
         });
-        
+
 
         // 检测头部
         it('check head', (done) => {
             const aHead = vm.$el.querySelectorAll('.flex-table-head .flex-table-col>span');
-            const aHeadTitle = [];
-            aHead.forEach(function(node){
-                aHeadTitle.push(node.textContent);
+            const aHeadTitle: string[] = [];
+            aHead.forEach(function(node) {
+                if (node && node.textContent) {
+                    aHeadTitle.push(node.textContent.trim());
+                }
             });
             expect(aHeadTitle).to.eql(['Name', 'Age', 'Address', 'Date']);
             done();
@@ -74,11 +78,13 @@ describe('Flex-Table', () => {
         // 检测 输入的内容
         it('check body', (done) => {
             const aBodyRow = vm.$el.querySelectorAll('.flex-table-body .flex-table-row');
-            const aBodyData = [];
+            const aBodyData: string[] = [];
             aBodyRow.forEach( (node) => {
                 const aCol = node.querySelectorAll('.flex-table-col');
                 aCol.forEach( (elem) => {
-                    aBodyData.push(elem.textContent.trim());
+                    if (elem && elem.textContent) {
+                        aBodyData.push(elem.textContent.trim());
+                    }
                 });
             });
             expect(aBodyData).to.eql(aTestData);
@@ -88,15 +94,14 @@ describe('Flex-Table', () => {
         // 检测 汇总信息
         it('check sum', (done) => {
             const aFootRow = vm.$el.querySelectorAll('.flex-table-foot .flex-table-row .flex-table-col');
-            const aFootLabel = [];
-            const aFootValue = [];
+            const aFootLabel: string[] = [];
+            const aFootValue: string[] = [];
             aFootRow.forEach( (node) => {
                 const aDoms = node.querySelectorAll('p');
-                aFootValue.push(aDoms[0].textContent);
-                aFootLabel.push(aDoms[1].textContent);
+                setFoot(aDoms, aFootValue, aFootLabel);
             });
-            expect(aFootValue).to.eql(['Jim Green','24','London','2016-10-01']);
-            expect(aFootLabel).to.eql(['Name','Age','Address','Date']);
+            expect(aFootValue).to.eql(['Jim Green', '24', 'London', '2016-10-01']);
+            expect(aFootLabel).to.eql(['Name', 'Age', 'Address', 'Date']);
             done();
         });
     });
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.ts
similarity index 80%
rename from test/unit/specs/loading.spec.js
rename to test/unit/specs/loading.spec.ts
index 9ba63d0..a4eb683 100644
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.ts
@@ -1,12 +1,8 @@
-import { createVue, waitImmediate } from '../util';
+import { createVue, waitImmediate } from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const {
-    describe,
-    it,
-// eslint-disable-next-line no-undef
-} = window;
-
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 5; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -20,11 +16,11 @@ for (let i = 0; i < 5; i += 1) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('loading', () => {
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                 ></flex-table>
             `,
@@ -57,14 +53,15 @@ describe('Flex-Table', () => {
         });
 
         // 检测 显示loading
-        it('status:true', () => {
+        it('status:true', (done) => {
             const elemLoading = vm.$el.querySelector('.flex-table-spinner');
             expect(!!elemLoading).to.eql(true);
+            done();
         });
 
         // 检测 取消loading
-        it('status:false', async() => {
-            vm.loading = false;
+        it('status:false', async () => {
+            vm.$data.loading = false;
             await waitImmediate();
             const elemLoading = vm.$el.querySelector('.flex-table-spinner');
             expect(!!elemLoading).to.eql(false);
diff --git a/test/unit/specs/render.spec.js b/test/unit/specs/render.spec.ts
similarity index 75%
rename from test/unit/specs/render.spec.js
rename to test/unit/specs/render.spec.ts
index a62aea7..da17e41 100644
--- a/test/unit/specs/render.spec.js
+++ b/test/unit/specs/render.spec.ts
@@ -1,10 +1,13 @@
 /* eslint-disable no-undef */
-import { createVue } from '../util';
+import { createVue } from '@/util';
+import { setFoot } from '@/tool';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const aTestList = [];
-const aTestData = [];
+const aTestList: FlexTableColumnOption[] = [];
+const aTestData: string[] = [];
 for (let i = 0; i < 5; i += 1) {
-    const oTestData = {
+    const oTestData: FlexTableColumnOption = {
         name: 'John Brown',
         age: 18,
         address: 'New York No. 1 Lake Park',
@@ -24,12 +27,12 @@ for (let i = 0; i < 5; i += 1) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('render', () => {
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                 ></flex-table>
@@ -40,14 +43,14 @@ describe('Flex-Table', () => {
                         {
                             title: 'Name',
                             key: 'name',
-                            renderHeader(h, params) {
+                            renderHeader(h: Vue.CreateElement, params: FlexTableRow) {
                                 return h('span', `Custom Title : ${params.column.title}`);
                             },
                         },
                         {
                             title: 'Age',
                             key: 'age',
-                            render(h, params) {
+                            render(h: Vue.CreateElement, params: FlexTableRow) {
                                 return h('span', `age: ${params.row.age}`);
                             },
                         },
@@ -75,9 +78,11 @@ describe('Flex-Table', () => {
         // 检测头部
         it('check head', (done) => {
             const aHead = vm.$el.querySelectorAll('.flex-table-head .flex-table-col>span');
-            const aHeadTitle = [];
+            const aHeadTitle: string[] = [];
             aHead.forEach((node) => {
-                aHeadTitle.push(node.textContent);
+                if (node && node.textContent) {
+                    aHeadTitle.push(node.textContent);
+                }
             });
             expect(aHeadTitle).to.eql(['Custom Title : Name', 'Age', 'Address', 'Date']);
             done();
@@ -86,11 +91,13 @@ describe('Flex-Table', () => {
         // 检测 输入的内容
         it('check body', (done) => {
             const aBodyRow = vm.$el.querySelectorAll('.flex-table-body .flex-table-row');
-            const aBodyData = [];
+            const aBodyData: string[] = [];
             aBodyRow.forEach((node) => {
                 const aCol = node.querySelectorAll('.flex-table-col');
                 aCol.forEach((elem) => {
-                    aBodyData.push(elem.textContent.trim());
+                    if (elem && elem.textContent) {
+                        aBodyData.push(elem.textContent.trim());
+                    }
                 });
             });
             expect(aBodyData).to.eql(aTestData);
@@ -100,12 +107,11 @@ describe('Flex-Table', () => {
         // 检测 汇总信息
         it('check sum', (done) => {
             const aFootRow = vm.$el.querySelectorAll('.flex-table-foot .flex-table-row .flex-table-col');
-            const aFootLabel = [];
-            const aFootValue = [];
+            const aFootLabel: string[] = [];
+            const aFootValue: string[] = [];
             aFootRow.forEach((node) => {
                 const aDoms = node.children;
-                aFootValue.push(aDoms[0].textContent);
-                aFootLabel.push(aDoms[1].textContent);
+                setFoot(aDoms, aFootValue, aFootLabel);
             });
             expect(aFootValue).to.eql(['Jim Green', 'age: 24', 'London', '2016-10-01']);
             expect(aFootLabel).to.eql(['Name', 'Age', 'Address', 'Date']);
diff --git a/test/unit/specs/resizable.spec.js b/test/unit/specs/resizable.spec.ts
similarity index 82%
rename from test/unit/specs/resizable.spec.js
rename to test/unit/specs/resizable.spec.ts
index 2d34878..9312d93 100644
--- a/test/unit/specs/resizable.spec.js
+++ b/test/unit/specs/resizable.spec.ts
@@ -1,10 +1,11 @@
-/* eslint-disable no-undef */
 import {
     createVue,
     destroyVM,
-} from '../util';
+} from '@/util';
+import Vue from 'vue';
+import { expect } from 'chai';
 
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 5; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -21,12 +22,12 @@ describe('Flex-Table', () => {
     describe('resizable', () => {
         const nInitWidth = 50;
         const nAddWidth = 100;
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                 ></flex-table>
@@ -38,14 +39,14 @@ describe('Flex-Table', () => {
                             title: 'Name',
                             key: 'name',
                             width: nInitWidth,
-                            renderHeader(h, params) {
+                            renderHeader(h: Vue.CreateElement, params: FlexTableRow) {
                                 return h('span', `Custom Title : ${params.column.title}`);
                             },
                         },
                         {
                             title: 'Age',
                             key: 'age',
-                            render(h, params) {
+                            render(h: Vue.CreateElement, params: FlexTableRow) {
                                 return h('span', `age: ${params.row.age}`);
                             },
                         },
@@ -71,18 +72,18 @@ describe('Flex-Table', () => {
         });
 
         const $resizeDiv = vm.$el.querySelectorAll('.flex-table-head .flex-table-col-resize')[0];
-        const vmTable = vm.$children[0];
+        const vmTable: any = vm.$children[0];
 
         vmTable.onColResizeStart.call(vmTable, {
             clientX: 0,
             target: $resizeDiv,
-            stopPropagation: () => {},
+            stopPropagation: () => void 0,
         }, 0);
 
         vmTable.onColResizeMove.call(vmTable, {
             clientX: nAddWidth,
             target: $resizeDiv,
-            stopPropagation: () => {},
+            stopPropagation: () => void 0,
         });
 
         vmTable.onColResizeEnd.call(vmTable);
diff --git a/test/unit/specs/scopedSlot.spec.js b/test/unit/specs/scopedSlot.spec.ts
similarity index 75%
rename from test/unit/specs/scopedSlot.spec.js
rename to test/unit/specs/scopedSlot.spec.ts
index a88106f..ccb7e2a 100644
--- a/test/unit/specs/scopedSlot.spec.js
+++ b/test/unit/specs/scopedSlot.spec.ts
@@ -1,9 +1,10 @@
-/* eslint-disable no-undef */
-import { createVue } from '../util';
+import { createVue } from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const aTestList = [];
-const aTestBtn = [];
-const aTestHtml = [];
+const aTestList: FlexTableColumnOption[] = [];
+const aTestBtn: string[] = [];
+const aTestHtml: string[] = [];
 for (let i = 0; i < 5; i += 1) {
     const sCon = `2016-10-03(${i})`;
     const oTestData = {
@@ -20,12 +21,12 @@ for (let i = 0; i < 5; i += 1) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('scopedSlot', () => {
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list">
                     <template slot-scope="{ row, index }" slot="operation">
                         <button>View{{index}}</button>
@@ -67,21 +68,25 @@ describe('Flex-Table', () => {
         });
 
         // 检测 slot
-        it('check slot', async() => {
+        it('check slot', async () => {
             const aOperation = vm.$el.querySelectorAll('.flex-table-body button');
-            const aBtnStr = [];
+            const aBtnStr: string[] = [];
             aOperation.forEach((elem) => {
-                aBtnStr.push(elem.textContent);
+                if (elem && elem.textContent) {
+                    aBtnStr.push(elem.textContent);
+                }
             });
 
             expect(aTestBtn).to.eql(aBtnStr);
         });
 
-        it('check html', async() => {
+        it('check html', async () => {
             const aOperation = vm.$el.querySelectorAll('.flex-table-body i');
-            const aHtmlStr = [];
+            const aHtmlStr: string[] = [];
             aOperation.forEach((elem) => {
-                aHtmlStr.push(elem.textContent);
+                if (elem && elem.textContent) {
+                    aHtmlStr.push(elem.textContent);
+                }
             });
 
             expect(aTestHtml).to.eql(aHtmlStr);
diff --git a/test/unit/specs/selectable.spec.js b/test/unit/specs/selectable.spec.ts
similarity index 85%
rename from test/unit/specs/selectable.spec.js
rename to test/unit/specs/selectable.spec.ts
index 02921cd..d9b37f8 100644
--- a/test/unit/specs/selectable.spec.js
+++ b/test/unit/specs/selectable.spec.ts
@@ -1,11 +1,12 @@
-/* eslint-disable no-undef */
 import {
     createVue,
     triggerEvent,
     wait,
-} from '../util';
+} from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 2; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -20,12 +21,12 @@ for (let i = 0; i < 2; i += 1) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('select', () => {
-        const vm = createVue({
+        const vm: any = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                 ></flex-table>
@@ -45,7 +46,7 @@ describe('Flex-Table', () => {
                         {
                             title: 'Age',
                             key: 'age',
-                            render(h, params) {
+                            render(h: Vue.CreateElement, params: FlexTableRow) {
                                 return h('span', `age: ${params.row.age}`);
                             },
                         },
@@ -69,7 +70,7 @@ describe('Flex-Table', () => {
                 };
             },
         });
-        const elemAllCheckedBtn = vm.$el.querySelector('.flex-table-head input[type="checkbox"]');
+        const elemAllCheckedBtn: any = vm.$el.querySelector('.flex-table-head input[type="checkbox"]');
         // 检测 全选
         it('check select all', async () => {
             triggerEvent(elemAllCheckedBtn, 'click');
@@ -78,7 +79,7 @@ describe('Flex-Table', () => {
             let bCheck = true;
             const aElemBodyCheck = vm.$el.querySelectorAll('.flex-table-body input[type="checkbox"]');
 
-            aElemBodyCheck.forEach((element) => {
+            aElemBodyCheck.forEach((element: any) => {
                 if (!element.checked) {
                     bCheck = false;
                 }
@@ -96,7 +97,7 @@ describe('Flex-Table', () => {
             let bCheck = true;
             const aElemBodyCheck = vm.$el.querySelectorAll('.flex-table-body input[type="checkbox"]');
 
-            aElemBodyCheck.forEach((element) => {
+            aElemBodyCheck.forEach((element: any) => {
                 if (element.checked) {
                     bCheck = false;
                 }
@@ -107,15 +108,14 @@ describe('Flex-Table', () => {
 
         // 检测 全选,有diabled的情况
         it('check select all-_isDisabled', async () => {
-            // eslint-disable-next-line no-underscore-dangle
             vm.$children[0].dataList[0]._isDisabled = true;
             triggerEvent(elemAllCheckedBtn, 'click');
             vm.$children[0].$children[0].$children[0].toggle(); // 这里需要手动程序触发
             await wait(100);
-            const aCheck = [];
+            const aCheck: boolean[] = [];
             const aElemBodyCheck = vm.$el.querySelectorAll('.flex-table-body input[type="checkbox"]');
 
-            aElemBodyCheck.forEach((element) => {
+            aElemBodyCheck.forEach((element: any) => {
                 aCheck.push(element.checked);
             });
 
@@ -124,15 +124,14 @@ describe('Flex-Table', () => {
 
         // 检测 取消全选,有diabled的情况
         it('check unselect all-_isDisabled', async () => {
-            // eslint-disable-next-line no-underscore-dangle
             vm.$children[0].dataList[0]._isDisabled = true;
             triggerEvent(elemAllCheckedBtn, 'click');
             vm.$children[0].$children[0].$children[0].toggle(); // 这里需要手动程序触发
             await wait(100);
-            const aCheck = [];
+            const aCheck: boolean[] = [];
             const aElemBodyCheck = vm.$el.querySelectorAll('.flex-table-body input[type="checkbox"]');
 
-            aElemBodyCheck.forEach((element) => {
+            aElemBodyCheck.forEach((element: any) => {
                 aCheck.push(element.checked);
             });
 
@@ -141,7 +140,6 @@ describe('Flex-Table', () => {
 
         // 检测 全选后，点击body中一个input 此时全选应该被取消
         it('check unselect all->body unselect', async () => {
-            // eslint-disable-next-line no-underscore-dangle
             vm.$children[0].dataList[0]._isDisabled = false;
             triggerEvent(elemAllCheckedBtn, 'click');
             vm.$children[0].$children[0].$children[0].toggle(); // 这里需要手动程序触发
@@ -161,15 +159,14 @@ describe('Flex-Table', () => {
 
         // 检测 点击body中的input 此时全选应该被选中
         it('check select all->body select', async () => {
-            // eslint-disable-next-line no-underscore-dangle
             vm.$children[0].dataList[0]._isDisabled = false;
             const aElemBodyCheck = vm.$el.querySelectorAll('.flex-table-body input[type="checkbox"]');
-            aElemBodyCheck.forEach(async (elem, index) => {
+            aElemBodyCheck.forEach(async (elem: Element, index: number) => {
                 triggerEvent(elem, 'click');
                 vm.$children[0].$children[1].$children[0].toggleSelect(index); // 这里需要手动程序触发
                 await wait(50);
             });
-            const bCheck = elemAllCheckedBtn.checked;
+            const bCheck = elemAllCheckedBtn && elemAllCheckedBtn.checked;
 
             expect(bCheck).to.eql(true);
         });
diff --git a/test/unit/specs/sortable.spec.js b/test/unit/specs/sortable.spec.js
deleted file mode 100644
index 151768f..0000000
--- a/test/unit/specs/sortable.spec.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/* eslint-disable no-undef */
-import { createVue, triggerEvent, waitImmediate } from '../util';
-
-const aTestList = [];
-for (let i = 0; i < 5; i += 1) {
-    const oTestData = {
-        name: 'John Brown',
-        age: 18 + i,
-        address: 'New York No. 1 Lake Park',
-        date: '2016-10-03',
-    };
-    aTestList.push(oTestData);
-}
-
-describe('Flex-Table', () => {
-    // 基础测试
-    describe('sortable', () => {
-        const vm = createVue({
-            template: `
-                <flex-table
-                    resizable
-                    :loading="loading" 
-                    :columns="columns" 
-                    :data="list"
-                    :sum="sum"
-                    @on-sort-change="onSortChange"
-                ></flex-table>
-            `,
-            data() {
-                return {
-                    columns: [
-                        {
-                            title: 'Name',
-                            key: 'name',
-                        },
-                        {
-                            title: 'Age',
-                            key: 'age',
-                            sortable: true,
-                        },
-                        {
-                            title: 'Address',
-                            key: 'address',
-                        },
-                        {
-                            title: 'Date',
-                            key: 'date',
-                        },
-                    ],
-                    loading: false,
-                    list: aTestList,
-                    sum: {
-                        name: 'Jim Green',
-                        age: 24,
-                        address: 'London',
-                        date: '2016-10-01',
-                    },
-                };
-            },
-            methods: {
-                onSortChange(obj) {
-                    const sKey = obj.key;
-                    const sOrder = obj.order;
-                    const aList = this.list.sort((item1, item2) => {
-                        if (sOrder === 'desc') {
-                            return item2[sKey] - item1[sKey];
-                        }
-                        return item1[sKey] - item2[sKey];
-                    });
-                    this.list = aList;
-                },
-            },
-        });
-
-        const aHeadAgeSort = vm.$el.querySelectorAll('.flex-table-head .flex-table-col:nth-child(2) .flex-table-sort i');
-
-        // 检测 倒叙
-        it('check desc', async() => {
-            triggerEvent(aHeadAgeSort[1], 'click');
-            let aDescList = JSON.parse(JSON.stringify(aTestList));
-            aDescList = aDescList.sort((item1, item2) => {
-                return item2.age - item1.age;
-            });
-
-            const aTestData = [];
-            aDescList.forEach((item) => {
-                Object.keys(item).forEach((k) => {
-                    aTestData.push(item[k].toString());
-                });
-            });
-
-            await waitImmediate();
-
-            const aBodyRow = vm.$el.querySelectorAll('.flex-table-body .flex-table-row');
-            const aBodyData = [];
-            aBodyRow.forEach((node) => {
-                const aCol = node.querySelectorAll('.flex-table-col');
-                aCol.forEach((elem) => {
-                    aBodyData.push(elem.textContent.trim());
-                });
-            });
-            expect(aBodyData).to.eql(aTestData);
-        });
-
-        // 检测 倒叙
-        it('check asc', async() => {
-            triggerEvent(aHeadAgeSort[0], 'click');
-            let aDescList = JSON.parse(JSON.stringify(aTestList));
-            aDescList = aDescList.sort((item1, item2) => {
-                return item1.age - item2.age;
-            });
-
-            const aTestData = [];
-            aDescList.forEach((item) => {
-                Object.keys(item).forEach((k) => {
-                    aTestData.push(item[k].toString());
-                });
-            });
-
-            await waitImmediate();
-
-            const aBodyRow = vm.$el.querySelectorAll('.flex-table-body .flex-table-row');
-            const aBodyData = [];
-            aBodyRow.forEach((node) => {
-                const aCol = node.querySelectorAll('.flex-table-col');
-                aCol.forEach((elem) => {
-                    aBodyData.push(elem.textContent.trim());
-                });
-            });
-            expect(aBodyData).to.eql(aTestData);
-        });
-
-        // 检测 动态修改columns
-        it('change columns: desc', async() => {
-            vm.columns = [
-                {
-                    title: 'Name',
-                    key: 'name',
-                },
-                {
-                    title: 'Age',
-                    key: 'age',
-                },
-                {
-                    title: 'Address',
-                    key: 'address',
-                },
-                {
-                    title: 'Date',
-                    key: 'date',
-                    sortable: true,
-                    sortType: 'desc',
-                },
-            ];
-
-            await waitImmediate();
-
-            const elemHeadDateSort = vm.$el.querySelector('.flex-table-head .flex-table-col:nth-child(4) .flex-table-sort .flex-table-arrow-dropdown');
-
-            expect(elemHeadDateSort.classList.contains('on')).to.eql(true);
-        });
-
-        it('change columns: asc', async() => {
-            vm.columns = [
-                {
-                    title: 'Name',
-                    key: 'name',
-                },
-                {
-                    title: 'Age',
-                    key: 'age',
-                },
-                {
-                    title: 'Address',
-                    key: 'address',
-                },
-                {
-                    title: 'Date',
-                    key: 'date',
-                    sortable: true,
-                    sortType: 'asc',
-                },
-            ];
-
-            await waitImmediate();
-
-            const elemHeadDateSort = vm.$el.querySelector('.flex-table-head .flex-table-col:nth-child(4) .flex-table-sort .flex-table-arrow-dropup');
-
-            expect(elemHeadDateSort.classList.contains('on')).to.eql(true);
-        });
-    });
-});
diff --git a/test/unit/specs/sortable.spec.ts b/test/unit/specs/sortable.spec.ts
new file mode 100644
index 0000000..d39f2f8
--- /dev/null
+++ b/test/unit/specs/sortable.spec.ts
@@ -0,0 +1,161 @@
+import { createVue, triggerEvent, waitImmediate } from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
+
+const aTestList: FlexTableColumnOption[] = [];
+for (let i = 0; i < 5; i += 1) {
+    const oTestData = {
+        name: 'John Brown',
+        age: 18 + i,
+        address: 'New York No. 1 Lake Park',
+        date: '2016-10-03',
+    };
+    aTestList.push(oTestData);
+}
+
+describe('Flex-Table', () => {
+    // 基础测试
+    describe('sortable', () => {
+        const vm: Vue = createVue({
+            template: `
+                <flex-table
+                    resizable
+                    :loading="loading"
+                    :columns="columns"
+                    :data="list"
+                    :sum="sum"
+                    @on-sort-change="onSortChange"
+                ></flex-table>
+            `,
+            data() {
+                return {
+                    columns: [
+                        {
+                            title: 'Name',
+                            key: 'name',
+                        },
+                        {
+                            title: 'Age',
+                            key: 'age',
+                            sortable: true,
+                        },
+                        {
+                            title: 'Address',
+                            key: 'address',
+                        },
+                        {
+                            title: 'Date',
+                            key: 'date',
+                        },
+                    ],
+                    loading: false,
+                    list: aTestList,
+                    sum: {
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London',
+                        date: '2016-10-01',
+                    },
+                };
+            },
+            methods: {
+                onSortChange(obj: SortOption) {
+                    const list = vm.$data.list;
+                    const sKey = obj.key;
+                    const sOrder = obj.order;
+                    const aList = list.sort((item1: any, item2: any) => {
+                        if (sOrder === 'desc') {
+                            return item2[sKey] - item1[sKey];
+                        }
+                        return item1[sKey] - item2[sKey];
+                    });
+                    vm.$data.list = aList;
+                },
+            },
+        });
+
+        const sSortSelector = '.flex-table-head .flex-table-col:nth-child(2) .flex-table-sort i';
+        const aHeadAgeSort = vm.$el.querySelectorAll(sSortSelector);
+
+        // 检测 倒叙
+        it('check desc', async () => {
+            triggerEvent(aHeadAgeSort[1], 'click');
+            await checkOrder(vm, 'desc');
+        });
+
+        // 检测 升序
+        it('check asc', async () => {
+            triggerEvent(aHeadAgeSort[0], 'click');
+            await checkOrder(vm, 'asc');
+        });
+
+        // 检测 动态修改columns
+        it('change columns: desc', async () => {
+            await chnageColumns(vm, 'desc');
+        });
+
+        it('change columns: asc', async () => {
+            await chnageColumns(vm, 'asc');
+        });
+    });
+});
+async function chnageColumns(vm: Vue, type: string) {
+    vm.$data.columns = [
+        {
+            title: 'Name',
+            key: 'name',
+        },
+        {
+            title: 'Age',
+            key: 'age',
+        },
+        {
+            title: 'Address',
+            key: 'address',
+        },
+        {
+            title: 'Date',
+            key: 'date',
+            sortable: true,
+            sortType: type,
+        },
+    ];
+    await waitImmediate();
+    let sOrderSelector = '.flex-table-head .flex-table-col:nth-child(4) .flex-table-sort .flex-table-arrow-';
+    sOrderSelector += (type === 'desc' ? 'dropdown' : 'dropup');
+    const elemHeadDateSort = vm.$el.querySelector(sOrderSelector);
+    let bCheck = false;
+    if (elemHeadDateSort && elemHeadDateSort.classList) {
+        bCheck = elemHeadDateSort.classList.contains('on');
+    }
+    expect(bCheck).to.eql(true);
+}
+
+async function checkOrder(vm: Vue, type: string) {
+    let aOrderList: FlexTableColumnOption[] = JSON.parse(JSON.stringify(aTestList));
+    aOrderList = aOrderList.sort((item1: any, item2: any) => {
+        if ( type === 'desc') {
+            return item2.age - item1.age;
+        }
+        return item1.age - item2.age;
+    });
+    const aTestData: string[] = [];
+    aOrderList.forEach((item) => {
+        Object.keys(item).forEach((k) => {
+            aTestData.push(item[k].toString());
+        });
+    });
+    await waitImmediate();
+    const aBodyRow: NodeListOf<Element> = vm.$el.querySelectorAll('.flex-table-body .flex-table-row');
+    const aBodyData: string[] = [];
+    aBodyRow.forEach((node) => {
+        const aCol = node.querySelectorAll('.flex-table-col');
+        aCol.forEach((elem) => {
+            if (elem && elem.textContent) {
+                aBodyData.push(elem.textContent.trim());
+            }
+        });
+    });
+    expect(aBodyData).to.eql(aTestData);
+}
+
diff --git a/test/unit/specs/theme.spec.js b/test/unit/specs/theme.spec.ts
similarity index 81%
rename from test/unit/specs/theme.spec.js
rename to test/unit/specs/theme.spec.ts
index bb46644..55d2ade 100644
--- a/test/unit/specs/theme.spec.js
+++ b/test/unit/specs/theme.spec.ts
@@ -1,7 +1,8 @@
-/* eslint-disable no-undef */
-import { createVue, waitImmediate } from '../util';
+import { createVue, waitImmediate } from '@/util';
+import { expect } from 'chai';
+import Vue from 'vue';
 
-const aTestList = [];
+const aTestList: FlexTableColumnOption[] = [];
 for (let i = 0; i < 5; i += 1) {
     const oTestData = {
         name: 'John Brown',
@@ -15,12 +16,12 @@ for (let i = 0; i < 5; i += 1) {
 describe('Flex-Table', () => {
     // 基础测试
     describe('theme', () => {
-        const vm = createVue({
+        const vm: Vue = createVue({
             template: `
                 <flex-table
                     resizable
-                    :loading="loading" 
-                    :columns="columns" 
+                    :loading="loading"
+                    :columns="columns"
                     :data="list"
                     :sum="sum"
                     :size="size"
@@ -65,8 +66,8 @@ describe('Flex-Table', () => {
         });
 
         // 检测 size-big
-        it('check size-big', async() => {
-            vm.size = 'big';
+        it('check size-big', async () => {
+            vm.$data.size = 'big';
 
             await waitImmediate();
             const bBig = vm.$el.classList.contains('flex-table-big');
@@ -74,8 +75,8 @@ describe('Flex-Table', () => {
         });
 
         // 检测 size-small
-        it('check size-small', async() => {
-            vm.size = 'small';
+        it('check size-small', async () => {
+            vm.$data.size = 'small';
 
             await waitImmediate();
             const bBig = vm.$el.classList.contains('flex-table-small');
@@ -83,8 +84,8 @@ describe('Flex-Table', () => {
         });
 
         // 检测 theme-dark
-        it('check theme-dark', async() => {
-            vm.theme = 'dark';
+        it('check theme-dark', async () => {
+            vm.$data.theme = 'dark';
 
             await waitImmediate();
             const bBig = vm.$el.classList.contains('flex-table-dark');
diff --git a/test/unit/tool.ts b/test/unit/tool.ts
new file mode 100644
index 0000000..c6a4713
--- /dev/null
+++ b/test/unit/tool.ts
@@ -0,0 +1,15 @@
+/**
+ * set foot
+ * @param aDoms
+ * @param aFootValue
+ * @param aFootLabel
+ */
+// tslint:disable-next-line:max-line-length
+export function setFoot(aDoms: NodeListOf<HTMLParagraphElement> | HTMLCollection, aFootValue: string[], aFootLabel: string[]) {
+    if (aDoms[0] && aDoms[0].textContent) {
+        aFootValue.push(aDoms[0].textContent);
+    }
+    if (aDoms[1] && aDoms[1].textContent) {
+        aFootLabel.push(aDoms[1].textContent);
+    }
+}
diff --git a/test/unit/util.js b/test/unit/util.ts
similarity index 69%
rename from test/unit/util.js
rename to test/unit/util.ts
index d3a6f9c..1efa73f 100644
--- a/test/unit/util.js
+++ b/test/unit/util.ts
@@ -18,9 +18,13 @@ const createElm = function() {
  * 回收 vm
  * @param  {Object} vm
  */
-export const destroyVM = function(vm) {
-    vm.$destroy && vm.$destroy();
-    vm.$el && vm.$el.parentNode && vm.$el.parentNode.removeChild(vm.$el);
+export const destroyVM = function(vm: Vue) {
+    if (vm.$destroy) {
+        vm.$destroy();
+    }
+    if (vm.$el && vm.$el.parentNode) {
+        vm.$el.parentNode.removeChild(vm.$el);
+    }
 };
 
 /**
@@ -29,11 +33,11 @@ export const destroyVM = function(vm) {
  * @param  {Boolean=false} mounted 是否添加到 DOM 上
  * @return {Object} vm
  */
-export const createVue = function(Compo, mounted = false) {
+export const createVue = function(Compo: any, mounted = false) {
     if (Object.prototype.toString.call(Compo) === '[object String]') {
         Compo = { template: Compo };
     }
-    return new Vue(Compo).$mount(mounted === false ? null : createElm());
+    return new Vue(Compo).$mount(mounted === false ? undefined : createElm());
 };
 
 /**
@@ -44,14 +48,14 @@ export const createVue = function(Compo, mounted = false) {
  * @param  {Boolean=false} mounted  - 是否添加到 DOM 上
  * @return {Object} vm
  */
-export const createTest = function(Compo, propsData = {}, mounted = false) {
+export const createTest = function(Compo: any, propsData = {}, mounted = false) {
     if (propsData === true || propsData === false) {
-        mounted = propsData;
+        mounted = !!propsData;
         propsData = {};
     }
     const elm = createElm();
     const Ctor = Vue.extend(Compo);
-    return new Ctor({ propsData }).$mount(mounted === false ? null : elm);
+    return new Ctor({ propsData }).$mount(mounted === false ? undefined : elm);
 };
 
 /**
@@ -61,7 +65,7 @@ export const createTest = function(Compo, propsData = {}, mounted = false) {
  * @param  {String} name
  * @param  {*} opts
  */
-export const triggerEvent = function(elm, name, ...opts) {
+export const triggerEvent = function(elm: any, name: string, ...opts: any[]) {
     let eventName;
 
     if (/^mouse|click/.test(name)) {
@@ -86,7 +90,7 @@ export const triggerEvent = function(elm, name, ...opts) {
  * @param {Element} elm
  * @param {*} opts
  */
-export const triggerClick = function(elm, ...opts) {
+export const triggerClick = function(elm: HTMLElement, ...opts: any[]) {
     triggerEvent(elm, 'mousedown', ...opts);
     triggerEvent(elm, 'mouseup', ...opts);
 
@@ -98,8 +102,8 @@ export const triggerClick = function(elm, ...opts) {
  * @param {Element} elm
  * @param {keyCode} int
  */
-export const triggerKeyDown = function(el, keyCode) {
-    const evt = document.createEvent('Events');
+export const triggerKeyDown = function(el: HTMLElement, keyCode: number|string) {
+    const evt: any = document.createEvent('Events');
     evt.initEvent('keydown', true, true);
     evt.keyCode = keyCode;
     el.dispatchEvent(evt);
@@ -109,11 +113,11 @@ export const triggerKeyDown = function(el, keyCode) {
  * 等待 ms 毫秒，返回 Promise
  * @param {Number} ms
  */
-export const wait = function(ms = 50) {
-    return new Promise(resolve => setTimeout(() => resolve(), ms));
+export const wait = function(ms: number = 50) {
+    return new Promise((resolve) => setTimeout(() => resolve(), ms));
 };
 
 /**
  * 等待一个 Tick，代替 Vue.nextTick，返回 Promise
  */
-export const waitImmediate = () => wait(0);
\ No newline at end of file
+export const waitImmediate = () => wait(0);

From 6682de9ec967655417a048db3f3b2fea33907a84 Mon Sep 17 00:00:00 2001
From: subying <tearlight2008@gmail.com>
Date: Sun, 9 Jun 2019 22:40:12 +0800
Subject: [PATCH 2/5] =?UTF-8?q?test:=E5=A2=9E=E5=8A=A0=20fixed=20header?=
 =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/unit/specs/fixed.spec.ts | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/fixed.spec.ts b/test/unit/specs/fixed.spec.ts
index f51b442..8d0c671 100644
--- a/test/unit/specs/fixed.spec.ts
+++ b/test/unit/specs/fixed.spec.ts
@@ -2,7 +2,7 @@ import {
     createVue,
     // destroyVM,
     // triggerEvent,
-    // waitImmediate,
+    waitImmediate,
 } from '@/util';
 import { expect } from 'chai';
 import Vue from 'vue';
@@ -45,6 +45,7 @@ describe('Flex-Table', () => {
                 :columns="columns"
                 :data="list"
                 :sum="sum"
+                :height="height"
                 ></flex-table>
             `,
             data() {
@@ -82,7 +83,7 @@ describe('Flex-Table', () => {
                         address: 'London',
                         date: '2016-10-01',
                     },
-                    height: 250,
+                    height: 0,
                 };
             },
         });
@@ -107,5 +108,32 @@ describe('Flex-Table', () => {
             checkLayoutHead(vm, 'right', vm.$data.columns.length - 1);
             done();
         });
+
+        // 检测 fiexed header
+        it('check fixed-head base', async () => {
+            vm.$data.height = 250;
+            await waitImmediate();
+            let bCheck = false;
+            const elemBody = vm.$el.querySelector('.flex-table-body');
+
+            if (elemBody && elemBody.classList) {
+                bCheck = elemBody.classList.contains('flex-table-fixed-header');
+            }
+
+            expect(bCheck).to.eql(true);
+        });
+        it('check fixed-head height', async () => {
+            const nHeight = 250;
+            vm.$data.height = nHeight;
+            await waitImmediate();
+            let nMaxHeight = 0;
+            const elemBody = vm.$el.querySelector('.flex-table-body') as HTMLElement;
+
+            if (elemBody && elemBody.style && elemBody.style.maxHeight) {
+                nMaxHeight = Number(elemBody.style.maxHeight.replace('px', ''));
+            }
+
+            expect(nMaxHeight).to.eql(nHeight);
+        });
     });
 });

From 99cc73c8cf5d8cd03f7084fcc280c529ab3cafd9 Mon Sep 17 00:00:00 2001
From: subying <tearlight2008@gmail.com>
Date: Sun, 9 Jun 2019 22:40:36 +0800
Subject: [PATCH 3/5] =?UTF-8?q?test:=E5=A2=9E=E5=8A=A0=20fixed=20header?=
 =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/unit/specs/fixed.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/fixed.spec.ts b/test/unit/specs/fixed.spec.ts
index 8d0c671..bd1ab9a 100644
--- a/test/unit/specs/fixed.spec.ts
+++ b/test/unit/specs/fixed.spec.ts
@@ -110,7 +110,7 @@ describe('Flex-Table', () => {
         });
 
         // 检测 fiexed header
-        it('check fixed-head base', async () => {
+        it('check fixed-header base', async () => {
             vm.$data.height = 250;
             await waitImmediate();
             let bCheck = false;
@@ -122,7 +122,7 @@ describe('Flex-Table', () => {
 
             expect(bCheck).to.eql(true);
         });
-        it('check fixed-head height', async () => {
+        it('check fixed-header height', async () => {
             const nHeight = 250;
             vm.$data.height = nHeight;
             await waitImmediate();

From f0c337ce2d46ccccb2fdea0b766d766d8bbaa807 Mon Sep 17 00:00:00 2001
From: subying <tearlight2008@gmail.com>
Date: Sun, 9 Jun 2019 22:47:29 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix:=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E4=B8=ADexpand=E7=9A=84ts=20=E8=AF=AD=E6=B3=95=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/unit/specs/expand.spec.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/expand.spec.ts b/test/unit/specs/expand.spec.ts
index dbeffaf..e84a9cd 100644
--- a/test/unit/specs/expand.spec.ts
+++ b/test/unit/specs/expand.spec.ts
@@ -166,14 +166,20 @@ describe('Flex-Table', () => {
         it('check expand', async () => {
             triggerEvent(elemExpandBtn, 'click');
             await waitImmediate();
-            const elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            let elemNext;
+            if (elemExpandBtn && elemExpandBtn.parentElement) {
+                elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            }
             expect(elemNext.innerHTML).to.eql('<div><p>John Brown</p></div>');
         });
 
         it('check unexpanded', async () => {
             triggerEvent(elemExpandBtn, 'click');
             await waitImmediate();
-            const elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            let elemNext;
+            if (elemExpandBtn && elemExpandBtn.parentElement) {
+                elemNext = elemExpandBtn.parentElement.nextElementSibling;
+            }
             expect(elemNext).to.eql(null);
         });
     });

From a6a284ef71b3cfcc86f1c1948da205be746df998 Mon Sep 17 00:00:00 2001
From: robin <lb.robin1991@gmail.com>
Date: Wed, 12 Jun 2019 19:42:09 +0800
Subject: [PATCH 5/5] doc: add pr template

doc: add pr template
---
 .github/PULL_REQUEST_TEMPLATE.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..e97519e
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,23 @@
+<!--
+Thank you for your pull request. Please review below requirements.
+Bug fixes and new features should include tests and possibly docs.
+
+感谢您贡献代码。请确认下列 checklist 的完成情况。
+Bug 修复和新功能必须包含测试，必要时请附上文档。
+-->
+
+## Checklist
+
+<!-- Remove items that do not apply. For completed items, change [ ] to [x]. -->
+
+* [ ] `npm test` passes
+* [ ] tests are included
+* [ ] documentation is changed or added
+* [ ] commit message follows commit guidelines
+
+## Affected feature(s)
+
+
+## Description of change
+
+<!-- Provide a description of the change below this comment. -->