An overview,

With the continuous development of front-end technology, TypeScript(TS) has gradually replaced JavaScript(JS), especially after 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 various type constraints, allowing JS to complete static code analysis, infer type errors in the code, or make type hints
  • To do type inference, we need to know the type of the variable in advance. If we write code in TS and specify the type of the variable, then TS will do a good job of type inference
  • In this case, TS is not clear about the specific type of the variable in the imported JS file. In order to tell TS the type of the variable, there is. D.ts (d declare), TS declaration file.

TS is a superset of JS, so how to make these third-party libraries also be able to type deduction, naturally need to consider how to make JS libraries also be able to define static types. D. ts(TypeScript Declaration File), the static typing intersection of JavaScript and TypeScript, makes it easy for your JavaScript to support static typing.

What is a “.d.ts “file

The “d.ts” file is used to provide TypeScript with type information about apis written in JavaScript. In short, it is a js declaration file that you can call in ts. The core of TS is static typing. When we write TS, we define many types, 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 a D.ts file that only contains type comments, and from your TS code you can get the advantages of static type checking while still using the pure JS library.

Write grammar

From the point of view of type type, it can be divided into: the basic type (string, number, Boolean, undefined, symbol)

3.1 Global Types

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

3.2 Modular global variables

When defining global variables, you need to import files

3.3 Modularity (CommonJS)

Introduce modularized code in the form of require

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

3.4 Modular approach 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 a code that can be accessed either via global variables or via require.

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

3.6 other

Sometimes we extend some built-in objects. Extend the method to Date’s built-in object

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

Four cases,

/** use */ as a function
declare function People(w: number) :number
declare function People(w: string) :number

declare class People {/** constructor */constructor(name: string, age: number)
    constructor(id: number) // Instance properties and instance methodsname: string
    age: number
    getName() :string
    getAge() :number/** as an object, call a method or variable */ on the objectstatic staticA() :number
    static aaa: string} /** as an object, call a method or variable */ on the objectdeclare namespace People {
    export var abc: number
}
Copy the code

5. Reference of common tools

  • Github.com/SitePen/dts…
  • Github.com/DefinitelyT…
  • Ts.xcatliu.com/basics/decl…