René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"The inferred type of `this` is wrong","articleBody":"On this file\n\n``` ts\ndeclare var require:any;\n\nvar HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');\n\n// Populate property map with ReactJS's attribute and property mappings\n// TODO handle/use .Properties value eg: MUST_USE_PROPERTY is not HTML attr\nfor (var propname in HTMLDOMPropertyConfig.Properties) {\n  if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)) {\n    continue;\n  }\n\n  var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase();\n}\n\n/**\n * Repeats a string a certain number of times.\n * Also: the future is bright and consists of native string repetition:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat\n *\n * @param {string} string  String to repeat\n * @param {number} times   Number of times to repeat string. Integer.\n * @see http://jsperf.com/string-repeater/2\n */\nfunction repeatString(string, times) {\n  if (times === 1) {\n    return string;\n  }\n  if (times \u003c 0) { throw new Error(); }\n  var repeated = '';\n  while (times) {\n    if (times \u0026 1) {\n      repeated += string;\n    }\n    if (times \u003e\u003e= 1) {\n      string += string;\n    }\n  }\n  return repeated;\n}\n\n/**\n * Determine if the string ends with the specified substring.\n *\n * @param {string} haystack String to search in\n * @param {string} needle   String to search for\n * @return {boolean}\n */\nfunction endsWith(haystack, needle) {\n  return haystack.slice(-needle.length) === needle;\n}\n\n/**\n * Trim the specified substring off the string. If the string does not end\n * with the specified substring, this is a no-op.\n *\n * @param {string} haystack String to search in\n * @param {string} needle   String to search for\n * @return {string}\n */\nfunction trimEnd(haystack, needle) {\n  return endsWith(haystack, needle)\n    ? haystack.slice(0, -needle.length)\n    : haystack;\n}\n\n/**\n * Convert a hyphenated string to camelCase.\n */\nfunction hyphenToCamelCase(string) {\n  return string.replace(/-(.)/g, function(match, chr) {\n    return chr.toUpperCase();\n  });\n}\n\n/**\n * Determines if the specified string consists entirely of whitespace.\n */\nfunction isEmpty(string) {\n   return !/[^\\s]/.test(string);\n}\n\n/**\n * Determines if the CSS value can be converted from a\n * 'px' suffixed string to a numeric value\n *\n * @param {string} value CSS property value\n * @return {boolean}\n */\nfunction isConvertiblePixelValue(value) {\n  return /^\\d+px$/.test(value);\n}\n\nexport class HTMLtoJSX {\n    private output: string;\n    private level: number;\n    private _inPreTag: boolean;\n\n\n  /**\n   * Handles processing of the specified text node\n   *\n   * @param {TextNode} node\n   */\n  _visitText = (node) =\u003e {\n    var parentTag = node.parentNode \u0026\u0026 node.parentNode.tagName.toLowerCase();\n    if (parentTag === 'textarea' || parentTag === 'style') {\n      // Ignore text content of textareas and styles, as it will have already been moved\n      // to a \"defaultValue\" attribute and \"dangerouslySetInnerHTML\" attribute respectively.\n      return;\n    }\n\n    var text = ''\n\n    if (this._inPreTag) {\n      // If this text is contained within a \u003cpre\u003e, we need to ensure the JSX\n      // whitespace coalescing rules don't eat the whitespace. This means\n      // wrapping newlines and sequences of two or more spaces in variables.\n      text = text\n        .replace(/\\r/g, '')\n        .replace(/( {2,}|\\n|\\t|\\{|\\})/g, function(whitespace) {\n          return '{' + JSON.stringify(whitespace) + '}';\n        });\n    } else {\n      // If there's a newline in the text, adjust the indent level\n      if (text.indexOf('\\n') \u003e -1) {\n      }\n    }\n    this.output += text;\n  }\n\n\n\n};\n\n/**\n * Handles parsing of inline styles\n */\nexport class StyleParser {\n  styles = {};\n  toJSXString = () =\u003e {\n    for (var key in this.styles) {\n      if (!this.styles.hasOwnProperty(key)) {\n      }\n    }\n  }\n}\n```\n\n\u003e which is actually a part of a larger file [here](https://github.com/alm-tools/alm/blob/master/src/app/htmlToJsx/htmlToJsx.ts)\n\nWith TypeScript nightly we get the following errors: \n\n```\nC:/repos/alm/tests/success/simple/bas.tsx:141 Property 'styles' does not exist on type 'HTMLtoJSX'.\nC:/repos/alm/tests/success/simple/bas.tsx:142 Property 'styles' does not exist on type 'HTMLtoJSX'.\n```\n\nBasically `this` in the class function isn't inferring to `StyleParser` and instead inferring to `HTMLtoJSX`\n\n``` ts\nexport class StyleParser {\n  styles = {};\n  toJSXString = () =\u003e {\n    for (var key in this.styles) {\n      if (!this.styles.hasOwnProperty(key)) {\n      }\n    }\n  }\n}\n```\n\nSorry for not being able to narrow it down, deleting portions of the file (e.g. the `HTMLtoJSX._visitText` method) makes the error go away. Note that this error only appeared in the last 10 days :rose: \n","author":{"url":"https://github.com/basarat","@type":"Person","name":"basarat"},"datePublished":"2016-06-01T06:57:06.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4},"url":"https://github.com/8913/TypeScript/issues/8913"}