[build] add typescript compiler (#2697)

babel.config.js

@@ -18,7 +18,8 @@ module.exports = function (api) {
         {
           functional: false
         }
-      ]
+      ],
+      '@babel/preset-typescript'
     ],
     plugins: [
       [

build/build-components.js

@@ -14,9 +14,10 @@ const babelConfig = {
   configFile: path.join(__dirname, '../babel.config.js')
 };
 
+const scriptRegExp = /\.(js|ts|tsx)$/;
 const isDir = dir => fs.lstatSync(dir).isDirectory();
-const isJs = path => /\.js$/.test(path);
 const isCode = path => !/(demo|test|\.md)$/.test(path);
+const isScript = path => scriptRegExp.test(path);
 
 function compile(dir) {
   const files = fs.readdirSync(dir);
@@ -34,10 +35,11 @@ function compile(dir) {
       return compile(filePath);
     }
 
-    // compile js
-    if (isJs(file)) {
+    // compile js or ts
+    if (isScript(file)) {
       const { code } = babel.transformFileSync(filePath, babelConfig);
-      fs.outputFileSync(filePath, code);
+      fs.removeSync(filePath);
+      fs.outputFileSync(filePath.replace(scriptRegExp, '.js'), code);
     }
   });
 }

build/webpack.dev.js

@@ -30,7 +30,7 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.vue', '.css'],
+    extensions: ['.js', '.ts', '.tsx', '.vue', '.css'],
     alias: {
       packages: path.join(__dirname, '../packages')
     }
@@ -51,7 +51,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.js$/,
+        test: /\.(js|ts|tsx)$/,
         exclude: /node_modules/,
         use: 'babel-loader'
       },

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
+  preset: 'ts-jest',
   setupFiles: ['<rootDir>/test/jest.init.js'],
-  moduleFileExtensions: ['js', 'vue'],
+  moduleFileExtensions: ['js', 'vue', 'ts', 'tsx'],
   transform: {
     '^.+\\.js$': '<rootDir>/test/jest.transform.js',
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'

package.json

@@ -74,6 +74,7 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
+    "@babel/preset-typescript": "^7.1.0",
     "@vant/doc": "^1.0.23",
     "@vant/eslint-config": "^1.0.8",
     "@vant/markdown-loader": "^1.0.3",
@@ -111,6 +112,8 @@
     "style-loader": "^0.23.1",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.4",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.1.2",
     "vue": "2.6.2",

packages/utils/use/bem.ts

@@ -10,9 +10,9 @@
 const ELEMENT = '__';
 const MODS = '--';
 
-const join = (name, el, symbol) => (el ? name + symbol + el : name);
+const join = (name: string, el: string, symbol: string) => (el ? name + symbol + el : name);
 
-const prefix = (name, mods) => {
+const prefix = (name: string, mods: any): any => {
   if (typeof mods === 'string') {
     return join(name, mods, MODS);
   }
@@ -21,7 +21,7 @@ const prefix = (name, mods) => {
     return mods.map(item => prefix(name, item));
   }
 
-  const ret = {};
+  const ret: { [key: string]: any } = {};
   if (mods) {
     Object.keys(mods).forEach(key => {
       ret[name + MODS + key] = mods[key];
@@ -31,7 +31,7 @@ const prefix = (name, mods) => {
   return ret;
 };
 
-export default name => (el, mods) => {
+export default (name: string) => (el: any, mods?: any) => {
   if (el && typeof el !== 'string') {
     mods = el;
     el = '';

packages/utils/use/i18n.ts

@@ -1,9 +1,9 @@
 import { get, camelize } from '..';
 import { lang, messages } from '../../locale';
 
-export default name => {
+export default (name: string) => {
   const prefix = camelize(name) + '.';
-  return (path, ...args) => {
+  return (path: string, ...args: any[]): string => {
     const message = get(messages[lang], prefix + path) || get(messages[lang], path);
     return typeof message === 'function' ? message(...args) : message;
   };

packages/utils/use/index.ts

@@ -2,7 +2,13 @@ import useBem from './bem';
 import useSfc from './sfc';
 import useI18n from './i18n';
 
-export function use(name) {
+type UseReturn = [
+  ReturnType<typeof useSfc>,
+  ReturnType<typeof useBem>,
+  ReturnType<typeof useI18n>
+];
+
+export function use(name: string): UseReturn {
   name = 'van-' + name;
   return [useSfc(name), useBem(name), useI18n(name)];
 }

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "allowJs": true,
+    "noImplicitThis": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "types/**/*",
+    "packages/**/*",
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.spec.js",
+    "node_modules"
+  ]
+}

types/jsx.d.ts

@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

yarn.lock

@@ -313,6 +313,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-typescript@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.2.0.tgz#55d240536bd314dcbbec70fd949c5cabaed1de29"
+  integrity sha512-WhKr6yu6yGpGcNMVgIBuI9MkredpVc7Y3YR4UzEZmDztHoL6wV56YBHLhWnjO1EvId1B32HrD3DRFc+zSoKI1g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-arrow-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -543,6 +550,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-typescript@^7.1.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.2.0.tgz#bce7c06300434de6a860ae8acf6a442ef74a99d1"
+  integrity sha512-EnI7i2/gJ7ZNr2MuyvN2Hu+BHJENlxWte5XygPvfj/MbvtOkWor9zcnHpMMQL2YYaaCcqtIvJUyJ7QVfoGs7ew==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-typescript" "^7.2.0"
+
 "@babel/plugin-transform-unicode-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.2.0.tgz#4eb8db16f972f8abb5062c161b8b115546ade08b"
@@ -609,6 +624,14 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
+"@babel/preset-typescript@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.1.0.tgz#49ad6e2084ff0bfb5f1f7fb3b5e76c434d442c7f"
+  integrity sha512-LYveByuF9AOM8WrsNne5+N79k1YxjNB6gmpCQsnuSBAcV8QUeB+ZUxQzL7Rz7HksPbahymKkq2qBR+o36ggFZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.1.0"
+
 "@babel/runtime@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
@@ -9817,7 +9840,7 @@ typescript@^3.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
   integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==
 
-typescript@^3.2.1:
+typescript@^3.2.1, typescript@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
   integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==