TypeScript trampling tour

The premise

Recently, I was working on a TypeScript NPM third-party library and saw a simple build process online, so I decided to translate it. When following the steps in the article, I stepped on some pits, and recorded them here. I am new to TypeScript, please feel free to comment on 👏 if you don’t understand.

Problem description

When the NPM run build is executed for the first time, it will run normally. NPM run build failed to download jest

TSC node_modules / @ types/babel__template/index, which s: then - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later. 16 placeholderWhitelist? : Set; Found 1 error.Copy the code

My node, NPM, TSC versions are:

Node -v // v8.12.0 NPM -v // v6.4.1 Tsc-v // v3.4.5Copy the code

Project code: github.com/irenetang19…

Q1: Why do I exclude node_modules in tsconfig.json? TSC still executes node_modules/@types?

Q2: Why does a new index.d.ts declaration file in the SRC directory not compile?

answer

• Let’s review tsconfig.json

  {
   "compilerOptions": {
     "target": "es5"."module": "commonjs"."declaration": true."outDir": "./lib"."strict": true
  },
   "include": ["./src"]."exclude": ["node_modules"."**/__tests__/*"]}Copy the code

• Answer 1

  Exclude: [“node_modules”] does not prevent TSC from compiling./node_modules/@types based on the configuration above. The reason for this is typescript-types and typeRoots:

  By default all visible @types packages are included during compilation. All packages under the./node_modules/@types folder and their subfolders are visible. That is,./node_modules/@types/,.. / node_modules / @ types and.. /.. / node_modules / @ types and so on.

  If typeRoots is specified, only packages under typeRoots will be included. Such as:

  {
    "compilerOptions": {
        "typeRoots" : ["./typings"]}}Copy the code

  This configuration file will contain all packages under./typings, but not./node_modules/@types.

  If types are specified, only listed packages are included. Such as:

  {
    "compilerOptions": {
         "types" : ["node"."lodash"."express"]}}Copy the code

  The tsconfig.json file will only contain./node_modules/@types/node,./node_modules/@types/lodash and./node_modules/@types/express. Other packages in./node_modules/@types/* are not imported.

  Specify “types”: [] to disable automatic introduction of the @types package.

  Note that auto-import is only important if you use global declarations (as opposed to modules). If you use the import “foo” statement, TypeScript still looks for the node_modules and node_modules/@types folders to get the foo package.

Cannot find name ‘Set’ Json configuration./node_modules/@types declarations are compiled when running TSC. Can not find name ‘Set’ Can not find name ‘Set’ because Set is a syntactic feature of ES6. “Es5”, and if no lib is specified, the default lib is DOM, es5, ScriptHost, so TSC cannot compile Set correctly.

One easy way to resolve this error is to specify “target”: “es6” or lib plus ES6. However, I don’t think you should change tsconfig.json in your project because a third party library is missing a declaration, so the second option is to add a declaration file to your project, which results in Q2 again.

• Answer 2

  Take a look at the SRC folder:

  

  Index. ts is a plain.ts file,testsHere are some test files. Index. d.ts is the declaration file I added, which reads as follows:

  declare interface Set<T> {}
  Copy the code

  Json, so index.d.ts should compile, but it doesn’t; If you change the file name to test.d.ts, it will compile, amazing!!

  Then I found this quote on the official website:

  Note that the compiler does not import files that might be output; For example, if we include index.ts, then index.d.ts and index.js will be excluded. In general, it is not recommended that only the extension distinguish files in the same directory.

  That is, since I already have index.ts under SRC, index.d.ts is excluded; It was included again when I changed the file name to test.d.ts.

other

• Whether TSC uses tsconfig.json

  • When you call TSC without any input files, the compiler looks for the tsconfig.json file starting in the current directory and working its way up the parent directory.

  • Call TSC without any input files, and specify a directory containing the tsconfig.json file using the command-line argument –project (or -p).

  • The tsconfig.json file is ignored when an input file is specified on the command line.

• tsconfig.json – target & lib

  • If the.ts file uses some syntax features that are higher than those specified by target, you need to specify the ES version of those syntax features in lib. For example, if the target specified in tsconfig.json is “ES5”, the following error is displayed if the Set of ES2015 is used in the index.ts file: error TS2583: Cannot find name ‘Set’. There are three ways to resolve this error:

  • Add “es6” to lib

    {
      target: "es5",
      compilerOptions: {
        "lib": ["es6"]}}Copy the code

  • Change target to ES6

    {
      target: "es6"
    }
    Copy the code

  • Add a declaration file. If the Set declaration is missing, write the Set declaration to the declaration file. Note the name of the file name, do not step on the pit mentioned above.

    declare interface Set<T> {}
    Copy the code

Links to other articles

TypeScript trampling tour

[例 句] Build and publish a TypeScript NPM package step by step

NPM install package-lock.json update policy

Browser language preferences

Date.prototype.toLocaleString()