Vuong Dang's Blog

Vuong Dang's Blog

Generate Typescript from Java

If you develop the backend with Java and the frontend with TypeScript, chances are you might need to have the same DTO classes/interfaces on both ends.

In this case, wouldn't it be great if we can define the DTO classes on the backend, and generate Typescript classes automatically.

Thanks to typescript-generator, we just have to configure the maven plugin or create a Gradle task.

For Maven

Add the following plugin to your pom file

<plugin>
    <groupId>cz.habarta.typescript-generator</groupId>
    <artifactId>typescript-generator-maven-plugin</artifactId>
    <version>2.24.612</version>
    <executions>
        <execution>
            <id>generate</id>
            <goals>
                <goal>generate</goal>
            </goals>
            <phase>process-classes</phase>
        </execution>
    </executions>
    <configuration>
        <jsonLibrary>jackson2</jsonLibrary>
        <classes>
            <class>com.example.demo.dto.CompanyDto</class>
        </classes>
        <outputFile>target/company.ts</outputFile>
        <outputKind>module</outputKind>
        <outputFileType>implementationFile</outputFileType>
        <mapClasses>asClasses</mapClasses>
        <mapEnum>asEnum</mapEnum>
        <nonConstEnums>true</nonConstEnums>
        <optionalProperties>useLibraryDefinition</optionalProperties>
    </configuration>
</plugin>

When you run ./mvnw clean install, the generated TypeScript file will be available under target/company.ts

For Gradle

Configure the plugin and Create the task with the exact name generateTypeScript

apply plugin: 'cz.habarta.typescript-generator'
buildscript {
    repositories {
        mavenCentral()
           jcenter()
    }
    dependencies {
        classpath group: 'cz.habarta.typescript-generator', name: 'typescript-generator-gradle-plugin', version: '2.24.612'
    }
}

generateTypeScript {
    jsonLibrary = 'jackson2'
    classes = [
            'com.example.demo.dto.CompanyDto'
              ]
    outputFile = 'build/company.ts'
    outputKind = 'module'
    outputFileType = 'implementationFile'
    mapClasses = 'asClasses'
    mapEnum = 'asEnum'
    nonConstEnums = true
    optionalProperties = 'useLibraryDefinition'
}

You can run the Gradle task manually: ./gradlew generateTypeScript or make another task in your build chain depends on it. [1]

In the above example, I added the following configurations to override the default behavior.

  • outputFile: Path and name of generated TypeScript file.
  • outputFileType: Output file format, can be:
    • declarationFile (.d.ts)
    • implementationFile (.ts)
  • mapClasses: Specifies whether Java classes will be mapped to TypeScript classes or interfaces. Supported values are:
    • asInterfaces
    • asClasses
  • mapEnum: Specifies how enums will be mapped. Supported values are:
    • asUnion - creates type alias to union of string enum values
    • asInlineUnion - creates union of enum values on places where the enum is used
    • asEnum - creates string enum. Requires TypeScript 2.4
    • asNumberBasedEnum - creates enum of named number values
  • nonConstEnums: If true generated enums will not have const keyword. This can be used only in implementation files
  • optionalProperties: Specifies how properties are defined to be optional. Supported values are:
    • useSpecifiedAnnotations - annotations specified using optionalAnnotations or requiredAnnotations parameter
    • useLibraryDefinition - examples: @JsonProperty(required = false) when using jackson2 library or @XmlElement(required = false) when using jaxb library
    • all - all properties are optional

Learn more about configuring typescript-generator-maven-plugin plugin in the Configuration Documentation

The example with maven can be found here on GitHub.

 
Share this