role

Ts writes modules that are eventually compiled into JS when exposed (various third-party toolkits, component libraries..) Therefore, type hints are lost for external use. Declaration files can provide type hints for external use

The sample

Add declaration: true to the tsconfig.json configuration file when compiling the package

tsconfig.build.json

{
  "compilerOptions": {
    "outDir": "dist"."module": "esnext"."target": "es5"."declaration": true.// here
    "jsx": "react"."moduleResolution":"Node"."allowSyntheticDefaultImports": true."skipLibCheck": true
  },
  "include": [
    "src"]."exclude": [
    "src/**/*.test.tsx"."src/**/*.stories.tsx"."src/setupTests.ts"."stories/**/*.svg"."stories/**/*.mdx"]}Copy the code

Exam package. Json configuration

"scripts": {
    "build": "tsc -p tsconfig.build.json"
  },
Copy the code

This will do d.ts generation for all TS/TSX files, of course, we can also write declaration files manually.

In the need for type declaration file in the same directory to create the same d.ts and write, such as button.tsx corresponding to button.d.ts

Writing posture

Various ways of writing

// const dom:HTMLElement = jQuery('#id') √
// const dom:string = jQuery('#id') ×
let jQuery: (selector: string) = > HTMLElement; // Define existing variables (such as jquery introduced by NPM, but typing file is not included, so define it manually here, but typing file is generally included in packages nowadays)

// const fn:sayHello = (a:string) => return a + 'hello' √
type sayHello = (a: string) = > string;

/ / window. Ga ())
interface Window {
  ga: () = > void;
}

// const a = new Animal('jenson')√
// a.name = 'new name' √
// a.sayHi = ()=> 'hi' √
// const a = new Animal(10) ×
// a.name = 10 x
// a.sayHi = () => 10 × 
declare class Animal {
  name: string;
  constructor(name: string);
  sayHi(): string;
}

// const o:OO = (name: number) => return name √
interface OO {
  name: number;
}

// const o: n1.oo = (name: string) => return name √
namespace n1 {
  interface OO {
    name: string; }}Copy the code

Ps: The compiler automatically identifies whether the declare keyword is written or not

Write class library declarations

dist/env/index.js

var regExec = function (patt) {
    return patt.exec(userAgent);
};
/** * Get the APP version *@return {String} 4.3.0 * /
var getAppVersion = function () {
    var res = regExec(appVersionPatt);
    return res ? res[2] : "";
};
// Whether android APP is available
varisAndroid = !! regExec(androidPatt);// Whether the APP is iOS
varisIos = !! regExec(iosPatt);// Whether it is in APP
varisApp = !! regExec(isAppPatt);export default {
    getAppVersion: getAppVersion,
    isAndroid: isAndroid,
    isIos: isIos,
    isApp: isApp,
};
Copy the code

dist/env/index.d.ts

declare const env: {
    getAppVersion: () = >any; isAndroid: boolean; isIos: boolean; isApp: boolean; }; Or declare namespace env {function getAppVersion() :any;
  const isAndroid: boolean;
  const isIos: boolean;
  const isApp: boolean;
}

export default env;
Copy the code

Namespace and Module functions are the same, but TS recommends using namespace to avoid confusion with module of ES

__test__.ts

import env from "./dist/env";

let a0:boolean = env.isApp // ok
let a: string = env.isApp; // error
Copy the code

Extend the window global method

Sometimes we introduce some third-party packages such as wechat SDK, which exposes the object WX that is mounted on the Window. If you use it directly, you will be prompted to find the object

Add global.d.ts to the root directory (name it as you like)

declare interface Window {
  wx:any;
}
Copy the code

tsconfig.json

"compilerOptions": {
  "typeRoots": ["global.d.ts"]."include": ["src"."global.d.ts"] // This must include the directory of the declaration file
}
Copy the code