Today’s lecture is a series. It’s a way of stringing together previous knowledge to pick up the key points.

Again, Typescript is about handling static types. In real project development, writing Typescript defines types.

Type declaration file

interface UserModel {
    showName(name: string[] | null): object;
}

class User implements UserModel {
    name: string.constructor(name: string) {this.name = name; }}Copy the code

This is a very common definition of Typescript’s static type file, a brief history of Typescript’s definition of static types

  • TSD (Obsolete)
  • Typings (or obsolete)
  • DefinitelyTyped (Typescript 2.0 retyped)

DefinitelyTyped

DefinitelyTyped works by publishing ** type declaration files (xxx.d.ts)** to the NPM community (which can be detected on locally developed editors).

With that said, here’s a classic jQuery type declaration file

// types/JQuery.d.ts
// Define the type namespace
declare namespace JQuery {
    type Selector = string;
    type TheTypeOrArray <T> = T | T[];
    type htmlString = string;
} 

// Define the interface
interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
    length: number;
    
    / / overloaded
    add(select: JQuery.Selector, context: Element): this;
    add(select: JQuery.Selector | JQuery.TheTypeOrArray<Element> | JQuery.htmlString | JQuery): this; children(selector? : JQuery.Selector):this;
    css(propertyName: string) :string;
    html(): string;
    empty(): this;
    end(): this;
    eq(index: number) :this;
}

/ / export
export default JQuery;
Copy the code

JQuery type declaration file source code is not so simple, there is a simplification to use.

The type definition

Type declaration file (*.d.ts), we write the type definition, can use type, class and interface.

type

// type.ts
/ / basic
type FirstName = string;
/ / assignment
type LastName = FirstName;
/ / object
type Developer = {
    name: string;
    age: number;
}
/ / method
type showName = (name: string) = > string;
Copy the code

class

// class.ts
/ / class
class Developer2 {
    name: string;
    age: number;
    showName: (name: string) = > string;
}
Copy the code

interface

// interface.ts
/ / interface
interface Option {
    init(): void;
    get(str: string): object;
}
Copy the code
  • type(orclass) Usage scenarios are when Typescript base types do not meet the requirements and new types are combined by defining custom types.
  • interfaceIs the external output interface,foreign;

declare

Create variables for XXX.d.ts, that is, define them at the top level.

// declare.ts
declare var age: number;
declare function showAge(age: number) :void;
declare class DeveloperClass {
    name: string;
}
declare namespace DeveloperNs {
    interface skills {
        code(): void; }}Copy the code

Combinatorial packaging definition

Dynamic property type

// 
{
    "basketball": {
        name: "Basketball",
        people: 5
    },
    "footerball": {
        name: "Football"
        people: 11}}Copy the code

Analyzing the data interface above, we can see that the property names Basketball and Footerball are dynamic, so

// dynamicAttributes.ts
interface BallAttr {
    name: string;
    people: number;
}
interface Ball {
    [ball: string]: BallAttr
}
Copy the code

Traverse type

// typeList.ts
type BallSelect = 'basketball' | 'footerball';
interface BallAttr {
    name: string;
    people: number;
}
type Ball2 = {
    [ball in BallSelect]: BallAttr
}
Copy the code

Publish and find

Simply looking at a package or checking to see if the package you’re sending has the same name, go to TypeSearch.

When it comes to publishing, there are usually two ways.

Built-in type declaration file

NPM is bundled with the NPM package, usually stored in the root directory of types, users download dependencies regret automatic detection and recognition of the type declaration file.

Publish separately to@ types of community

NPM install @types/ XXX –save-dev NPM install @types/ XXX –save-dev

If you want your type declaration package to be published to the @Types community, you can submit a pull Request at DefinitelyTyped. Packages under the @types community are automatically published from DefinitelyTyped, using the tool types-Publisher.

Local type declaration file style (common)

Types ├ ─ ─ A.D.T s ├ ─ ─ B.D.T s ├ ─ ─ XXX. Which s ├ ─ ─ the index, which s # entry module └ ─ ─ Z.D.T sCopy the code

Submodules don’t have to define namespaces, so external environments don’t get them (except for the types directory).

// a.d.ts
export interface AInterface {
    name: string;
}
// b.d.ts
export interface BInterface {
    name: string;
}
// xxx.d.ts
export interface XXXInterface {
    name: string;
}
// z.d.ts
export interface ZInterface {
    name: string;
}
Copy the code

Entry file (define namespace and export submodule)

// index.d.ts
import * as AModule from './a';
import * as BModule from './b';
import * as XXXModule from './xxx';
import * as ZModule from './z';

declare namespace Index {
    export type AInterface = AModule.AInterface;
    export type BInterface = BModule.BInterface;
    export type XXXInterface = XXXModule.XXXInterface;
    export type ZInterface = ZModule.ZInterface;
}
Copy the code

You can…

Previous article: Typescript declaration file writing

Contents: A primer to Typescript’s short book