An overview,

With the development of front-end technology, TypeScript(TS for short) has gradually replaced JavaScript(JS for short), especially with THE use of TS refactoring in Vue3, TS has become the main language for front-end framework writing.

  • When using TS, one of the biggest benefits is that you can give JS a variety of type constraints, so that JS can complete static code analysis, deduce the existence of type errors in the code or do type prompts
  • To complete type inference, TS needs to know the types of variables in advance. If we write code in TS and specify specific types for variables, TS can do the type inference job well
  • D.ts (d means declare), TS declaration file, is used to declare variables in JS files.

D. ts(TypeScript Declaration File)

What are “.d.ts “files

One of the most troubling issues in Typescript development is type definition. As a result, when compiling, you often see a series of hints that the type cannot be found. The “d.ts” file is used to provide TypeScript with type information about apis written in JavaScript. Js declaration files that you can call in TS.

The core of TS is static typing. We define a lot of types when we write TS, but the mainstream libraries are written in JS and do not support the type system.

At this point you can’t rewrite the mainstream library with TS. At this point you just need to write d.ts files that only contain type comments. From TS code, you can get the TS advantage of static type checking while still using pure JS libraries. During this time, the way of solving went through many changes, from DefinitelyTyped to typings. And finally, @types. After Typescript 2.0, the @types approach is recommended.

2.1 @ types

After Typescript 2.0, Typescript by default looks at the./node_modules/@types folder to automatically get the module’s type definition from there. Of course, you need to install the type definition separately.

By default, all @types packages are applied at compile time, and any layer of node_modules/@types is used, further, in./node_modules/@types/,.. /node_modules/@types/, .. /.. /node_modules/@types/ are both applied. If your type definition is not in this folder, you can configure it using typesRoot. Only packages in typeRoots are included as follows:

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

Now, this applies only to./typings, not./node_modules/@types. If types are configured, only listed packages are included.

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

This will only include./node_modules/@types/node,./node_modules/@types/lodash and./node_modules/@types/express, others will not be included. If configured to “types”: [] no packages are included.

2.2 relationship between *.d.ts and @types

@types is a branch of NPM used to store *.d.ts files. If the corresponding NPM package is stored in @types, it must be downloaded! If it is a native *.d.ts declaration file, it has nothing to do with @types!

3. Write the grammar

Basic types (string, number, Boolean, undefined, symbol) are divided into basic types (string, number, Boolean, undefined, symbol)

3.1 Global Types

  • variable
  • function
  • Declare functions with interfaces
  • class
  • object
  • Mixed type
  • Modularized global variables

3.2 Modular global variables

You need to import files when defining global variables

3.3 Modularity (CommonJS)

Introduce modular code through require

// d.ts declare module "ever" { export let a: number export function b(): number export namespace c{ let c: String} // cosnt ever = require('ever ') ever.a = 100 ever.b = function() {return 100 + 300}Copy the code

3.4 Modularization of ES6 (Import Export)

Export Declare LET A1:1 export Declare let A2:2 // Or declare let A1:1 declare let A2:2 export {A1, A2}Copy the code

3.5 UMD

There is code that can be accessed either through global variables or require.

 declare namespace ${
     let a:number
 }
  
 declare module "$" {
     export = $
 }
Copy the code

3.6 other

Sometimes we extend some of the built-in objects. Extend methods to Date’s built-in objects

 interface Date {
     format(f: string): string
 }
Copy the code

Four cases,

/ / Declare function People(w: number): number Declare function People(w: string): /** constructor */ constructor(name: string, age: number) constructor(id: Name: string age: number getName(): string getAge(): string getAge() */ static staticA(): number static aaa: Declare namespace People {export var ABC: number} / declare namespace People {export var ABC: number}Copy the code