[BUG][typescript-angular] allow colons in TS interface property names

[Swahjak]

Bug Report Checklist

• Have you provided a full/minimal spec to reproduce the issue?
• Have you validated the input using an OpenAPI validator (example)?
• What's the version of OpenAPI Generator used?
• Have you search for related issues/PRs?
• What's the actual output vs expected output?
• [Optional] Bounty to sponsor the fix (example)

Description

Original issue #1080. Was addressed in #1152 but seems to have been 'undone' in ced6e05#diff-328108658e03bbcf6cc8b931ffa7a63e (by only allowing alphanumeric characters).

When generating from openapi documentation that contains colons the typescript generator will remove these colons. The specific case is generating a schema that's build using https://www.hydra-cg.com/spec/latest/core/.

openapi-generator version

4.3.1, not a regression (although it was fixed, it seems to have been 'undone' before reaching a release).

OpenAPI declaration file content or url

Schema:

  /api/v2/products:
    get:
      tags:
        - Product
      operationId: getProductCollection
      summary: Retrieves the collection of Product resources.
      responses:
        '200':
          description: Product collection response
          content:
            application/ld+json:
              schema:
                type: object
                properties:
                  'hydra:member':
                    type: array
                    items:
                      $ref: '#/components/schemas/Product.jsonld-get_product_list'
                  'hydra:totalItems':
                    type: integer
                    minimum: 0
                  'hydra:view':
                    type: object
                    properties:
                      '@id':
                        type: string
                        format: iri-reference
                      '@type':
                        type: string
                      'hydra:first':
                        type: string
                        format: iri-reference
                      'hydra:last':
                        type: string
                        format: iri-reference
                      'hydra:next':
                        type: string
                        format: iri-reference
                  'hydra:search':
                    type: object
                    properties:
                      '@type':
                        type: string
                      'hydra:template':
                        type: string
                      'hydra:variableRepresentation':
                        type: string
                      'hydra:mapping':
                        type: array
                        items:
                          type: object
                          properties:
                            '@type':
                              type: string
                            variable:
                              type: string
                            property:
                              type: string
                            required:
                              type: boolean
                required:
                  - 'hydra:member'

Response example:

{
    "@context": "/api/v2/contexts/Product",
    "@id": "/api/v2/products",
    "@type": "hydra:Collection",
    "hydra:member": [
        {
            "@id": "/api/v2/products/1",
            "@type": "Product",
            "image": null,
            "id": 1,
            "name": "Filtratiekast (technische ruimte) - 120cm",
            "stock": {
                "@id": "/api/v2/stocks/1",
                "@type": "Stock",
                "id": 1,
                "qty": 0,
                "qtyAvailable": 0,
                "qtyExpected": 0,
                "qtyReserved": 0
            },
            "imageUrl": "https://cdn.stocky.toppy-dev.nl//images/product/1/"
        }
    ],
    "hydra:totalItems": 11193,
    "hydra:view": {
        "@id": "/api/v2/products?page=1",
        "@type": "hydra:PartialCollectionView",
        "hydra:first": "/api/v2/products?page=1",
        "hydra:last": "/api/v2/products?page=224",
        "hydra:next": "/api/v2/products?page=2"
    },
    "hydra:search": {
        "@type": "hydra:IriTemplate",
        "hydra:template": "/api/v2/products{?search_name,barcodes.barcode,barcodes.barcode[],id,id[]}",
        "hydra:variableRepresentation": "BasicRepresentation",
        "hydra:mapping": [
            {
                "@type": "IriTemplateMapping",
                "variable": "search_name",
                "property": "name",
                "required": false
            },
            {
                "@type": "IriTemplateMapping",
                "variable": "barcodes.barcode",
                "property": "barcodes.barcode",
                "required": false
            },
            {
                "@type": "IriTemplateMapping",
                "variable": "barcodes.barcode[]",
                "property": "barcodes.barcode",
                "required": false
            },
            {
                "@type": "IriTemplateMapping",
                "variable": "id",
                "property": "id",
                "required": false
            },
            {
                "@type": "IriTemplateMapping",
                "variable": "id[]",
                "property": "id",
                "required": false
            }
        ]
    }
}

Generated typescript:

export interface InlineResponse2001 { 
    hydramember: Array<ProductJsonldGetProductList>;
    hydratotalItems?: number;
    hydraview?: InlineResponse200HydraView;
    hydrasearch?: InlineResponse200HydraSearch;
}

Command line used for generation

java -jar openapi-generator-cli.jar generate -i schema.json -g typescript-angular -o ./api

Steps to reproduce

1. See schema & command used for generation

Related issues/PRs

#1080 #1152 ced6e05#diff-328108658e03bbcf6cc8b931ffa7a63e (api-platform/api-platform#1493)

Suggest a fix

[auto-labeler]

👍 Thanks for opening this issue!
🏷 I have applied any labels matching special text in your issue.

The team will review the labels and make any necessary changes.

[bkstorm]

I have the same issue, I can't change the property name because it's defined by wordpress.
It happens when I use typescript-axios generator.
typescript-fetch is ok, but it does not support nodejs so I have to use typescript-axios.

[adiopek]

Same here :/ with typescript-angular. Very annoying while I'm using TS Lint. I use a bash script after generate command as a workaround:

find ./build/openapi -type f -exec sed -i '' -e '' -e "s/hydramember/['hydra:member']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e '' -e "s/hydratotalItems/['hydra:totalItems']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydraview/['hydra:view']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydrasearch/['hydra:search']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydratemplate/['hydra:template']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydravariableRepresentation/['hydra:variableRepresentation']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydramapping/['hydra:mapping']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydrafirst/['hydra:first']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydralast/['hydra:last']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydranext/['hydra:next']/g" {} ;
find ./build/openapi -type f -exec sed -i '' -e "s/hydraprevious/['hydra:previous']/g" {} ;

[carloslabradornetkia]

Same

[moritz-baumgart]

Is there any update on this? I am now also using a script that replaces the names as a workaround, but this is very tedious...

[carloslabradornetkia]

Is there any update on this? I am now also using a script that replaces the names as a workaround, but this is very tedious...

#13999 (comment)