TS type declaration

Type declaration declare
1、 overview
1.1 declare What is it?

1. Premise ： If there is a door to use now Typescript The library of writing , Want to be used by other developers , There are two ways
   The way 1 pack ts Source file （ for ts The user to use ） And compiled js file （ for js The user to use ）
   The way 2 Provide compiled js Documents and supplies ts The type declaration used by the user
   The advantages of the latter method ： Small file size , It is very clear that the import declaration , And omit ts Time for further compilation

2. Type declaration definition ：
   Everything is not always going well , Code does not always have static types
   The extended name of the type declaration file is .d.ts, It is untyped js Code attach ts Type of a way

• If there is a corresponding js file , extension .d.ts, Otherwise use .ts Extension
• Type declarations can only contain types , No value
• have access to declare Keyword declaration js A value is defined in the code
• It can be understood as ：“ by my troth , I wrote it js The code exports the value of this type ”

Take a chestnut ：

import {Subscribe} from './subscribe'
export declare class Observe impelement Subscribabel{
    public_isScalar:boolean = false
    constructor (subscribe?:string){
        this.subscribe = subscribe
    }
    subscribe(observe?:paetialObserver):Subscription{
        // xxxxx
    }
}

/*   Use TSC compile ,tsc -d Observabel.ts  will i Get the type declaration file Observabel.d.ts, You can see , Only the type is preserved , No value , There is no specific content of any function  */
import {Subscribe} from './subscribe'
export declare class Observe impelement Subscribabel{
    _isScalar:boolean
    constructor (subscribe?:string);
    subscribe(observe?:paetialObserver):Subscription
}

1.2 declare The role of

1. ts Users are using other people's compiled ts Code ,TSC Will look for and js File corresponding .d.ts file , Give Way ts Know what types are involved in the project , And code type prompt , No need to recompile ts Code , Greatly reduce compilation time
2. Define global types that can be used anywhere in the project , You can use without importing （ External parameter type declaration , It needs to be distinguished from variable declaration ）
3. The description passes npm Third party modules installed （ External parameter module declaration ）

1.2.1 External parameter variable declaration
stay ts among , Want to not add var Keyword defining a global variable will trigger an alarm , The correct way is to first forward typescript Statement , There are some global variables process

declare let process :{
    env : {
      NODE_ENV :'production' | 'development'
    }
}
process = {
    env ： {
      NODE_ENV :'production'
    }
}

1.2.2 External parameter module declaration

1. Definition ： Put regular type declarations into special syntax declare module among

declare module ' Module name '{
   export type MyType = number
   export default MyType
}

• When used import Import ' Module name ’ after ,ts Get the information provided by the external parameter module declaration
• If you just want to tell ts, I want to import this module , The specific type will be determined later . Now let's assume any, Then keep only the head , Omit the declaration

 declare module '@mc/error-boundary'
      
      // It's just that some security will be missing when using 
    eg: import {x} from from '@mc/error-boundary'
    x //an

• The module declaration supports wildcard import , This allows you to declare the type for any import path that matches the specified pattern , The import path uses wildcards * To match

    import b from './test.json'
    b // object