What is JSON to ArkTS Type Generator?
ArkTS is the primary language for HarmonyOS application development — a statically-typed superset of TypeScript that enforces stricter rules to improve runtime safety and rendering performance. Unlike standard TypeScript, ArkTS prohibits the `any` type, restricts dynamic property access, and requires explicit type annotations on all class members. This generator inspects your JSON payload, infers the correct ArkTS type for each field, and produces either `export interface` definitions or `export class` definitions with constructors. When you enable the `@ObservedV2` decorator, the generator also adds `@Trace` to every property, enabling HarmonyOS's reactive state-tracking mechanism — any change to a traced property automatically triggers a UI re-render in the declarative ArkUI framework. Null values can be expressed as optional fields (`field?: Type`) or union types (`field: Type | null`), depending on your project's coding conventions.
How to Use
- Choose between interface output (lightweight, type-checking only) and class output (includes constructor and optional reactive decorators)
- Toggle @ObservedV2 to add reactive state decorators for ArkUI components that need automatic re-rendering on data changes
- Enable the JSON parse helper to generate a typed parse function that casts JSON strings into your ArkTS types
- Paste a representative JSON response from your HarmonyOS backend and click "Generate ArkTS Code"
- Copy the output into your .ets source files and import the types in your page or component
Why Use This Tool?
Tips & Best Practices
- ArkTS does not allow the any type — if your JSON contains null values, use the "Optional fields for null" option to emit field?: Type instead of field: any
- When using @ObservedV2, only apply it to classes that are bound to @Component state. Plain data-transfer objects should stay as interfaces to avoid unnecessary reactivity overhead
- ArkTS restricts indexed access like obj[key] — the generated parse helper uses type assertion (as T) instead, which is compliant with ArkTS constraints
- For arrays of objects, the generator creates a separate class/interface for the item type. Reference it with the array syntax in your component state declarations
- DevEco Studio may flag trailing commas in object literals — the generated code omits them to stay compatible with ArkTS linting rules
Frequently Asked Questions
How does JSON map to ArkTS types?
JSON strings map to string, integers and floats both map to number (ArkTS shares TypeScript's unified number type), booleans map to boolean, null maps to either Object (fallback) or an optional field (field?: Type) depending on your settings, arrays become T[], and nested objects become separate interface or class definitions with PascalCase names.
When should I avoid using this generator?
Do not use this tool if your JSON has deeply dynamic shapes like arbitrary key-value maps — ArkTS forbids index signatures and the any type, so such structures cannot be expressed. Also skip it if you are targeting standard TypeScript (not HarmonyOS), since the output follows ArkTS-specific conventions like Object instead of any for unknown types.
What is @ObservedV2 and when do I need it?
@ObservedV2 is an ArkTS decorator that enables reactive state tracking on class instances. When a property decorated with @Trace changes, ArkUI automatically re-renders the affected component. Use it for model classes bound to UI state. Skip it for plain DTOs, API response types, or data that never triggers visual updates.
Why does the class output include a constructor?
ArkTS requires explicit constructors for class instantiation with initial values. The generated constructor accepts all fields as parameters with proper types, making it straightforward to create instances from parsed JSON data: const user = new User("Alice", "[email protected]", true).
Can I use the generated types with @State in ArkUI?
Yes. For interface output, declare @State user: User = {} as User and assign the parsed object. For class output with @ObservedV2, use @ObjectLink user: User in the component to enable deep observation of property changes within the object.
Is my data sent to a server?
No. All type inference and code generation execute entirely in your browser. Your JSON data never leaves your device — there are no network calls, no server logs, and no data persistence.
Real-world Examples
HarmonyOS weather app model
Generate ArkTS types for a weather API response, using @ObservedV2 so the UI refreshes when the forecast data updates.
{
"city": "Shanghai",
"temperature": 28.5,
"humidity": 65,
"isRaining": false,
"forecast": [
{ "day": "Mon", "high": 30, "low": 22 }
]
}@ObservedV2
export class Forecast {
@Trace
day: string;
@Trace
high: number;
@Trace
low: number;
constructor(day: string, high: number, low: number) {
this.day = day;
this.high = high;
this.low = low;
}
}
@ObservedV2
export class Weather {
@Trace
city: string;
@Trace
temperature: number;
@Trace
humidity: number;
@Trace
isRaining: boolean;
@Trace
forecast: Forecast[];
// ... constructor
}User profile DTO for a HarmonyOS social app
Create an interface-only type definition for a user profile API response, without reactive decorators since it is only used for data transfer.
{
"userId": 1001,
"nickname": "CloudWalker",
"avatar": "https://cdn.example.com/u/1001.jpg",
"isVip": true,
"bio": null
}export interface UserProfile {
userId: number;
nickname: string;
avatar: string;
isVip: boolean;
bio?: Object;
}
export function parseUserProfile(json: string): UserProfile {
const obj: UserProfile = JSON.parse(json) as UserProfile;
return obj;
}