This is the 14th day of my participation in the August Text Challenge.More challenges in August

As Typescript continues to grow in popularity, let’s share some common knowledge about TS. Let’s learn and communicate about Typescript.

Global declaration file

Because the declaration file is more, so share separately

1. Sometimes we use some third-party js libraries, but if there is no declaration file, TS will not have intelligent hints or parameter conventions, etc.

2. Because when we import libraries, there are two types of libraries

1. Global introduction, which will change the global variable, so the definition declaration file also needs to be defined in a global way

2. Module introduction. This method is to import the library in the way of import, so the declaration file also needs to export in the way of export

1. Declare the global variable method class enumeration

// Declare global variables
declare var a1: string;
declare const a2: string;
declare let a3: string;
a1.split("");
a2.split("");
a3.split("");

// Declare a global method
declare function getName(id: string) :string;
getName("id");

// Declare the global class
declare class Person {
  constructor(name: string);
}
const p = new Person("Tom");

// Declare enumeration
declare enum COLOR {
  Red,
  Blue,
}

COLOR.Blue;
Copy the code

2. Declare the global namespace

// Do not use the DECLARE field in the namespace
declare namespace Aoo {
  const version: string;
  function getAge(id: string) :number;
  class Person {}
  enum COLOR {
    Red,
    Blue,
  }

  // Namespaces support nesting
  namespace Boo {
    function getName(id: string) :void;
    function getGender(id: string) :void;
  }
}

Aoo.COLOR.Blue;
const person = new Aoo.Person();
Aoo.getAge("id");
Aoo.version;
Aoo.Boo.getName("id");

// You can define nested namespaces directly
declare namespace Coo.Doo {
  function getTime() :void;
  function getTime2() :void;
}

Coo.Doo.getTime2();

// Do not use declare for interface and type
interface AA {
  name: string;
}
let aa: AA = { name: "name" };

type BB = {
  age: number;
};
let bb: BB = { age: 11 };

Different declarations with the same name are merged together
declare namespace C {
  function getTime(time: string) :void;
}
declare function C(name: string) :void;

C.getTime("1990");
C("tom");
Copy the code

Module reference

Modules can be referenced in three ways

1. Export and import es6

2.common.js (this is only suitable for NPM packages)

3. Introduction of umD (which can be loaded by script or imported by import)

1. Es6 import and export

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =export= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =// Export the default variable namespace and commonJS export
export const gender: string;
export function getAge() :number;
export class Fish {}
export enum ClassRoom {
  Window,
  Seat,
  Teacher,
  Student,
}

export interface Page {
  pageNo: number;
  pageIndex: number;
  pageSize: number;
}

// export +declare, declare first then export
declare const address: string;
declare function getAdd() :string;
declare class Address {}

export { address, getAdd, Address };


// Only function class and interface can be exported by default
export default function getClass(a:string,b:string) :void= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =import= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / / introductionexportThe content of theimport { gender, getAge, Fish, Page, ClassRoom } from "foo";

console.log("gender", gender);
getAge();
const fish = new Fish();
let page: Page = { pageIndex: 1.pageNo: 1.pageSize: 20 };
console.log(ClassRoom.Student);
console.log(ClassRoom.Teacher);

// Import export + DECLARE definition

import { address, getAdd, Address } from "foo";

// Import export default

import getCls from "foo";
getCls("1"."2");
}
Copy the code

2. The introduction of common. Js

Since some third-party libraries are common. Js compliant, there are two import methods as follows. For the following methods, you must use commonJS export method *

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =export= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =// The commonjs declaration file requires export
// The bar cannot be exported separately with export =, so namespace is used to merge the bar
export = eoo;

declare function eoo() :string;
declare namespace eoo {
    const bar: number; } = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =import= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =Import * as XXX from XXX
import * as eoo from 'eoo';

// import require
import eoo = require('eoo');
Copy the code

3. Declaration file of UMD library

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =export= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =// Extend NPM library variables
export as namespacedoo; Export = doo; // export default doo; declare function doo(a:string):void; declarenamespace doo {
     const dooo: number;
}


/* Declare global variables in NPM and UMD */
declare global {
     interface String {
         prependHello(): string; }} = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =import= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =// UMD library declaration file
import * as doo from 'doo';

// Declare global variables in umD or commonJS
'bar'.prependHello()

Copy the code

4. Declare Module Can define declarations for multiple modules

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =export= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =declare module 'voo' {
    export interface Foo {
        foo: string; }}declare module 'xar' {
    export function bar() :string; } = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =import= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =// Import foo
import { Foo } from 'voo';

// Import bar
import * as bar from 'xar';

Copy the code

Application of three slashes in global files

/* 1. It is not possible to add import or export to the NPM umD package, so triple slash 2 must be used. The triple slash introduces types, 1. Types is a dependency on another library 2. Path is a dependency on a file */

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery;

Copy the code

Automatically generate declaration files

If you want to automatically generate configurable tsconfig.json option: declaration is set totrueA directory declarationMap that generates.d.ts files for each.d.ts file Both generate the corresponding.d.ts (sourcemap) file emitDeclarationOnly generates.d.ts files, not.js filesCopy the code

Manually generate the declaration file

If a library does not have a declaration file, you need to manually add a declaration file search order as follows1.Types or typing in package.json2.Index.d.ts in the root directory of the library file3.Get the name from main in package.json and look for d.ts files with the same name4.Json to see if you can find configuration files such as foo/index.d.ts or foo.d.tsCopy the code

The relevant data

  • The TypeScript’s official website
  • www.cnblogs.com/cangqinglan…

Check out my TypeScript column if you like. I will try to keep it updated every night. If you like it, please give me a thumbs up

If you like “algorithm”, you can have a look at another column I share (front-end algorithm) there are more about the topic of the algorithm to share, I hope to help you a deeper understanding of the algorithm

The purpose of this article is to study, discuss and share the experience in the process of learning TS. Some of the materials in this article are from the network. If there is any infringement, please contact us to delete [email protected]