Getting Started

Get TypeSharp running in your project in under 2 minutes.

Requirements

Node.js v20 or later
TypeScript 7 or later (if using TypeScript)
.NET 8 SDK or later
ASP.NET Core project with C# model classes

1. Install attributes

Navigate to your C# backend project i.e. /CSharp/Project/MyApp.csproj, open in terminal and install TypeSharp controll attributes.

  dotnet add package TypeSharp.Attributes

Or use GUI nuget package manager Installation using GUI

2. Decorate your C# models

Use [TypeSharp] attribute on your C# classes, records, or enums to mark them for TypeScript generation.

UserDto.cs — typesharp

UserDto.cs

using TypeSharp.Attributes;
        
[TypeSharp]
public class UserDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string? Email { get; set; }
    public UserRole Role { get; set; }
    public List<string> Tags { get; set; }
}

⎇ main✓ Prettier

csharpUTF-8Ln 1, Col 1

Or use GUI nuget package manager Installation using GUI

3. Install the package

Navigate to your frontend project and install TypeSharp as a dev dependency.

  npm install -D @siyavuyachagi/typesharp

4. Create a configuration file

In your frontend project run the following script to scaffold a typesharp.config.ts file, which you can edit to point at your C# solution or project file.

  npx typesharp init

typesharp.config.ts — typesharp

typesharp.config.ts

import type { TypeSharpConfig } from '@siyavuyachagi/typesharp'
    
const config: TypeSharpConfig = {
    source: ['C:/Users/User/Desktop/MyApp/MyApp.slnx'],
    outputPath: './app/types',
    singleOutputFile: false,
    namingConvention: 'camel',
    fileSuffix: ''
}
    
export default config

⎇ main✓ Prettier

typescriptUTF-8Ln 1, Col 1

5. Generate types

Run the following command to generate types

  npx typesharp generate

userDto.ts — typesharp

userDto.ts

/**
* Auto-generated by TypeSharp
* Do not edit this file manually
*/

export interface UserDto {
id: number;
name: string;
email: string | null;
role: UserRole;
tags: string[];
}

⎇ main✓ Prettier

typescriptUTF-8Ln 1, Col 1

6. Use the output

Import generated types directly in your project components:

example.vue — typesharp

example.vue●

example.tsx

import type { UserDto } from '~/app/types/userDto.ts'

// Fully typed — no manual interface needed
const user = ref<UserDto | null>(null);

console.log(user.value?.name);

import type { UserDto } from './app/types/userDto.ts'

// Fully typed — no manual interface needed
const [user, setUser] = useState<UserDto | null>(null);

console.log(user?.name);

⎇ main✓ Prettier

typescriptUTF-8Ln 1, Col 1

Next steps

Configurations