{"id":2147,"date":"2019-06-14T08:37:42","date_gmt":"2019-06-14T16:37:42","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=2147"},"modified":"2019-06-24T08:30:16","modified_gmt":"2019-06-24T16:30:16","slug":"how-to-upgrade-to-typescript-without-anybody-noticing-part-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/how-to-upgrade-to-typescript-without-anybody-noticing-part-1\/","title":{"rendered":"How to Upgrade to TypeScript Without Anybody Noticing, Part 1"},"content":{"rendered":"

This guide will show you how to upgrade to TypeScript without anybody noticing. Well, people might<\/em> notice \u2014 what I really mean is that you won\u2019t have to change your build at all. You\u2019ll have the ability to get errors and completions in supported editors<\/a> and to get errors on the command line from tsc<\/code>, the TypeScript compiler, but you won\u2019t have to integrate TypeScript into your build.<\/p>\n

Here\u2019s what you\u2019ll actually need to check in to source control:<\/p>\n

    \n
  1. A TypeScript configuration file, tsconfig.json<\/code>.<\/li>\n
  2. New dev dependencies from the @types<\/code> package.<\/li>\n
  3. A TypeScript declaration file to hold miscellaneous types.<\/li>\n<\/ol>\n

    How can you upgrade with so little change? Well, the secret is that you\u2019re not using TypeScript<\/em>. The TypeScript compiler can check Javascript just fine, so you can stick with Javascript and use JSDoc to provide type information. This is less convenient than TypeScript\u2019s syntax for types, but it means that your files stay plain old Javascript and your build (if any) doesn\u2019t change at all.<\/p>\n

    Let\u2019s use TypeScript-eslint-parser<\/a> as an example package so you can follow along if you want. Confusingly, even though the name includes \u201cTypeScript\u201d, the parser is actually written in Javascript, although it has since been merged into a larger project that is written in TypeScript<\/a>.<\/p>\n

    This guide assumes that you have used TypeScript enough to:<\/p>\n

      \n
    1. Have an editor set up to work with TypeScript<\/a>.<\/li>\n
    2. Have used npm to install a package.<\/li>\n
    3. Know the basic syntax of type annotations<\/a> \u2014 number<\/code>, { x: any }<\/code>, etc.<\/li>\n<\/ol>\n

      If you want to look at the package after the upgrade, you can run the following commands, or take a look at the branch on github<\/a>:<\/p>\n

      \n
      \n
      git clone https:\/\/github.com\/sandersn\/TypeScript-eslint-parser\r\ncd <\/span>TypeScript-eslint-parser\r\ngit checkout add-tsconfig\r\nnpm install\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n
      Also make sure that you have TypeScript installed on the command line:<\/p>\n
      \n
      \n
      \r\nnpm install -g TypeScript\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n
       <\/p>\n
      Add tsconfig<\/h2>\n
      Your first step is to start with tsc --init<\/code> and change the settings in the tsconfig.json<\/code> that it produces. There are other ways to get started, but this gives you the most control. Run this command from the root of the project:<\/p>\n
      \n
      \n
      tsc --init<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n
      Here is what you should end up with, skipping the lines you don\u2019t need to change:<\/p>\n
      \n
      \n
      \r\n{<\/span>\r\n  \"compilerOptions\"<\/span>:<\/span> {<\/span>\r\n    \"allowJs\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"checkJs\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noEmit\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"target\"<\/span>:<\/span> \"esnext\"<\/span>,<\/span>\r\n    \"module\"<\/span>:<\/span> \"commonjs\"<\/span>,<\/span>\r\n    \"resolveJsonModule\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"strict\"<\/span>:<\/span> false<\/span>\r\n  },<\/span>\r\n  \"exclude\"<\/span>:<\/span> [<\/span>\r\n    \"tests\/fixtures\/\"<\/span>,<\/span>\r\n    \"tests\/integration\/\"<\/span>\r\n  ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n
      For Javascript, your \u201ccompilerOptions\u201d will pretty much always look like this.<\/p>\n