An introduction to TypeScript and a good essay on TypeScript

TypeScript is a strongly typed programming language built on top of JavaScript that provides excellent development tools and a great development experience for projects of any size.

Here are some excellent articles from the community:

Semantic Representation: Building Type-first Interaction Systems

A Rare TS Study Guide (1.8W words)

The demo code for the content of this article will be put into Swagger2TS after improvement

Intelligent interface hints and validation via TypeScript function overloading extended request library

Different request interfaces are declared in TypeScript.

// requsetTs.ts
import requestImplementation from "./request";

function get(
    url: "/api/1", config: { params: { a? :string; b: number };
    }
) :Promise<{
    list: ArrayThe < {id: number; name: string} >. current:number;
    total: number; } >.function get(
    url: "/api/3",
    config: {
        params: { aaa: string };
    }
) :Promise<{
    list: ArrayThe < {id: number; name: string} >. current:number;
    total: number; } >.function get(url: string, config: any) {
    return requestImplementation(url, "get", config);
}

function post(
    url: "/api/1",
    config: {
        data: { a: string; b: number };
    }
) :Promise<{
    id: string;
    a: string;
    b: number; } >.function post(
    url: "/api/2",
    config: {
        data: { a: number; b: string };
    }
) :Promise<{ id: string; a: number; b: string} >.function post(url: string, config: any) {
    return requestImplementation(url, "post", config);
}

export { get, post };
Copy the code

With the excellent TypeScript support in the vscode editor, you can see the parameters and configuration required for the interface directly as you write code. As shown below:

Request to get the data, can also be directly prompted

When a parameter is wrong, it is verified by typescript, and verified at git commit to prevent the error code from being committed to a remote repository.

Convert Swagger documents to TypeScript files using code

The Swagger JSON document file is found to be formalized by observation, so it can be converted into the type file we need through code. For example, a conversion of the following format:

{
    "paths": {
        "/order/{id}/issue": {
            "parameters": [{"in": "path"."name": "id"."required": true."type": "string"."format": "compassdigital.id"."description": "The order ID"}]."get": {
                "operationId": "create_order_issue"."summary": "Create an issue with an order"."tags": ["order"]."security": [{ "bearerAuth": []}],"parameters": [{"in": "query"."name": "lang"."description": "The language of the user ex en, fr"."required": false."type": "string"}]."responses": {
                    "200": {
                        "description": "Order issue response"."schema": { "$ref": "#/definitions/Issue"}},"400": {
                        "description": "Unknown error"."schema": { "$ref": "#/definitions/Error"}}}}}},"definitions": {
        "Error": {
            "type": "object"."properties": { "error": { "type": "string" }, "code": { "type": "number"}}},"Issue": {
            "type": "object"."properties": {
                "id": { "type": "string"."format": "compassdigital.id"."description": "issue" },
                "type": { "type": "string" },
                "items": {
                    "description": "Array of Items with issues"."type": "array"."items": { "$ref": "#/definitions/ItemsWithIssue"}},"reason": { "type": "string"."description": "Reason for dispute"."x-deprecated": true },
                "meta": { "type": "object"."additionalProperties": true}}},"ItemsWithIssue": { "type": "string"."format": "compassdigital.id"."description": "issue"}}}Copy the code

Convert to the following interface types:

function get(
    url: "/order/{id}/issue",
    config: {
        params: { id: string}; query: { lang? :string };
    }
) :Promise<{
    id: string;
    type: string;
    items: Array<string>;
    reason: string;
    meta: object; } >.Copy the code

For swagger2ts, see Swagger-typescript

4. Implement Git commit or run CI/CD pipeline to verify type and code quality

Type validation can be performed using recommended type validation tools based on project configuration, such as ESLint, VuedX (for VUE3), etc., and then verified by Lint-staged Git COMMIT with HusKY. When CI/CD is run, This can be verified or built by running the NPM script script. You can configure a TypeScript project from scratch

Reference documentation

1. TypeScript Documents

2. Semantic Expression — Building type-First Interaction Systems

3. A Rare TS Study Guide (1.8W words)

4. Configure TypeScript Projects from Scratch

Reference implementation

1.swagger-typescript