Add typescript specific changes:

* Add "as" helper
* Fix vue/require-default-prop
* Fix vue/require-prop-types
* Allow to use export default (Vue as VueConstructor<Vue>).extend({ syntax
Fix issues: #564 #575

Author: armano2

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Mocha Tests",
+      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+      "args": [
+        "-u",
+        "tdd",
+        "--timeout",
+        "999999",
+        "--colors",
+        "${workspaceFolder}/tests/lib/**/*.js",
+        "--reporter",
+        "dot",
+        "--watch"
+      ],
+      "internalConsoleOptions": "openOnSessionStart"
+    }
+  ]
+}

lib/rules/require-default-prop.js

@@ -32,7 +32,7 @@ module.exports = {
      * @return {boolean}
      */
     function propIsRequired (prop) {
-      const propRequiredNode = prop.value.properties
+      const propRequiredNode = utils.unwrapTypes(prop.value).properties
         .find(p =>
           p.type === 'Property' &&
           p.key.name === 'required' &&
@@ -49,7 +49,7 @@ module.exports = {
      * @return {boolean}
      */
     function propHasDefault (prop) {
-      const propDefaultNode = prop.value.properties
+      const propDefaultNode = utils.unwrapTypes(prop.value).properties
         .find(p =>
           p.key &&
           (p.key.name === 'default' || p.key.value === 'default')
@@ -67,7 +67,7 @@ module.exports = {
       return propsNode.value.properties
         .filter(prop => prop.type === 'Property')
         .filter(prop => {
-          if (prop.value.type !== 'ObjectExpression') {
+          if (utils.unwrapTypes(prop.value).type !== 'ObjectExpression') {
             return true
           }
 
@@ -98,7 +98,7 @@ module.exports = {
      * @return {Boolean}
      */
     function isBooleanProp (prop) {
-      const value = prop.value
+      const value = utils.unwrapTypes(prop.value)
 
       return isValueNodeOfBooleanType(value) || (
         value.type === 'ObjectExpression' &&

lib/rules/require-prop-types.js

@@ -48,11 +48,13 @@ module.exports = {
           return
         }
         let hasType = true
-        if (cp.value.type === 'ObjectExpression') { // foo: {
-          hasType = objectHasType(cp.value)
-        } else if (cp.value.type === 'ArrayExpression') { // foo: [
-          hasType = cp.value.elements.length > 0
-        } else if (cp.value.type === 'FunctionExpression' || cp.value.type === 'ArrowFunctionExpression') {
+        const cpValue = utils.unwrapTypes(cp.value)
+
+        if (cpValue.type === 'ObjectExpression') { // foo: {
+          hasType = objectHasType(cpValue)
+        } else if (cpValue.type === 'ArrayExpression') { // foo: [
+          hasType = cpValue.elements.length > 0
+        } else if (cpValue.type === 'FunctionExpression' || cpValue.type === 'ArrowFunctionExpression') {
           hasType = false
         }
         if (!hasType) {

lib/utils/index.js

@@ -426,24 +426,32 @@ module.exports = {
    * @returns {boolean}
    */
   isVueComponent (node) {
-    const callee = node.callee
+    if (node.type === 'CallExpression') {
+      const callee = node.callee
 
-    const isFullVueComponent = node.type === 'CallExpression' &&
-      callee.type === 'MemberExpression' &&
-      callee.object.type === 'Identifier' &&
-      callee.object.name === 'Vue' &&
-      callee.property.type === 'Identifier' &&
-      ['component', 'mixin', 'extend'].indexOf(callee.property.name) > -1 &&
-      node.arguments.length >= 1 &&
-      node.arguments.slice(-1)[0].type === 'ObjectExpression'
+      if (callee.type === 'MemberExpression') {
+        const calleeObject = this.unwrapTypes(callee.object)
 
-    const isDestructedVueComponent = node.type === 'CallExpression' &&
-      callee.type === 'Identifier' &&
-      callee.name === 'component' &&
-      node.arguments.length >= 1 &&
-      node.arguments.slice(-1)[0].type === 'ObjectExpression'
+        const isFullVueComponent = calleeObject.type === 'Identifier' &&
+          calleeObject.name === 'Vue' &&
+          callee.property.type === 'Identifier' &&
+          ['component', 'mixin', 'extend'].indexOf(callee.property.name) > -1 &&
+          node.arguments.length >= 1 &&
+          node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+        return isFullVueComponent
+      }
 
-    return isFullVueComponent || isDestructedVueComponent
+      if (callee.type === 'Identifier') {
+        const isDestructedVueComponent = callee.name === 'component' &&
+          node.arguments.length >= 1 &&
+          node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+        return isDestructedVueComponent
+      }
+    }
+
+    return false
   },
 
   /**
@@ -671,7 +679,7 @@ module.exports = {
   /**
    * Parse CallExpression or MemberExpression to get simplified version without arguments
    *
-   * @param  {Object} node The node to parse (MemberExpression | CallExpression)
+   * @param  {ASTNode} node The node to parse (MemberExpression | CallExpression)
    * @return {String} eg. 'this.asd.qwe().map().filter().test.reduce()'
    */
   parseMemberOrCallExpression (node) {
@@ -703,5 +711,14 @@ module.exports = {
     }
 
     return parsedCallee.reverse().join('.').replace(/\.\[/g, '[')
+  },
+
+  /**
+   * Unwrap typescript types like "X as F"
+   * @param {ASTNode} node
+   * @return {ASTNode}
+   */
+  unwrapTypes (node) {
+    return node.type === 'TSAsExpression' ? node.expression : node
   }
 }

package.json

@@ -56,6 +56,8 @@
     "eslint-plugin-vue-libs": "^3.0.0",
     "lodash": "^4.17.4",
     "mocha": "^5.2.0",
-    "nyc": "^12.0.2"
+    "nyc": "^12.0.2",
+    "typescript": "^3.1.3",
+    "typescript-eslint-parser": "^20.0.0"
   }
 }

tests/lib/rules/require-default-prop.js

@@ -113,6 +113,34 @@ ruleTester.run('require-default-prop', rule, {
           }
         }
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default (Vue as VueConstructor<Vue>).extend({
+          props: {
+            a: {
+              type: String,
+              required: true
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parser: 'typescript-eslint-parser'
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default Vue.extend({
+          props: {
+            a: {
+              type: String,
+              required: true
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parser: 'typescript-eslint-parser'
     }
   ],
 
@@ -157,6 +185,40 @@ ruleTester.run('require-default-prop', rule, {
         message: `Prop 'f' requires default value to be set.`,
         line: 14
       }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default (Vue as VueConstructor<Vue>).extend({
+          props: {
+            a: {
+              type: String
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parser: 'typescript-eslint-parser',
+      errors: [{
+        message: `Prop 'a' requires default value to be set.`,
+        line: 4
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default Vue.extend({
+          props: {
+            a: {
+              type: String
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parser: 'typescript-eslint-parser',
+      errors: [{
+        message: `Prop 'a' requires default value to be set.`,
+        line: 4
+      }]
     }
   ]
 })

tests/lib/rules/require-prop-types.js

@@ -113,6 +113,34 @@ ruleTester.run('require-prop-types', rule, {
         }
       `,
       parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default (Vue as VueConstructor<Vue>).extend({
+          props: {
+            foo: {
+              type: String
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      parser: 'typescript-eslint-parser'
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default Vue.extend({
+          props: {
+            foo: {
+              type: String
+            } as PropOptions<string>
+          }
+        });
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      parser: 'typescript-eslint-parser'
     }
   ],
 
@@ -190,6 +218,38 @@ ruleTester.run('require-prop-types', rule, {
         message: 'Prop "foo" should define at least its type.',
         line: 4
       }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default Vue.extend({
+          props: {
+            foo: {} as PropOptions<string>
+          }
+        });
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      parser: 'typescript-eslint-parser',
+      errors: [{
+        message: 'Prop "foo" should define at least its type.',
+        line: 4
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default (Vue as VueConstructor<Vue>).extend({
+          props: {
+            foo: {} as PropOptions<string>
+          }
+        });
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      parser: 'typescript-eslint-parser',
+      errors: [{
+        message: 'Prop "foo" should define at least its type.',
+        line: 4
+      }]
     }
   ]
 })