TypeScript Function Type Extractor - User Guide

A VS Code extension that automatically transforms TypeScript functions into typed function expressions with type aliases for better type safety and code organization.

Installation

1. Install the extension from VS Code marketplace (or install .vsix file)
2. Restart VS Code
3. The extension is ready to use!

How to Use

Basic Usage

1. Place cursor on any function name
2. Press Ctrl+Shift+T (Windows/Linux) or Cmd+Shift+T (Mac)
3. Function transforms automatically

Supported Function Types

Function Declarations

// Before
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// After (Ctrl+Shift+T)
type TGreetFunction = (name: string) => string;

const greet: TGreetFunction = function(name: string) {
    return `Hello, ${name}!`;
}

Arrow Functions

// Before
const add = (a: number, b: number): number => a + b;

// After (Ctrl+Shift+T)
type TAddFunction = (a: number, b: number) => number;

const add: TAddFunction = (a: number, b: number) => a + b;

Function Expressions

// Before
const multiply = function(x: number, y: number): number {
    return x * y;
};

// After (Ctrl+Shift+T)
type TMultiplyFunction = (x: number, y: number) => number;

const multiply: TMultiplyFunction = function(x: number, y: number) {
    return x * y;
};

Exported Functions

// Before
export function validateEmail(email: string): boolean {
    return email.includes('@');
}

// After (Ctrl+Shift+T)
export type TValidateEmailFunction = (email: string) => boolean;

export const validateEmail: TValidateEmailFunction = function(email: string) {
    return email.includes('@');
};

Advanced Features

Optional Parameters

Parameters with default values become optional in the type alias:

// Before
function processData(data: string[], limit: number = 10): string[] {
    return data.slice(0, limit);
}

// After
type TProcessDataFunction = (data: string[], limit?: number) => string[];

const processData: TProcessDataFunction = function(data: string[], limit: number = 10) {
    return data.slice(0, limit);
}

Destructured Parameters

Maintains destructuring structure while removing redundant type annotations:

// Before
function configure({ host, port, ssl }: { host: string; port: number; ssl: boolean }): Config {
    return { host, port, ssl };
}

// After
type TConfigureFunction = ({ host, port, ssl }: { host: string; port: number; ssl: boolean }) => Config;

const configure: TConfigureFunction = function({ host, port, ssl }) {
    return { host, port, ssl };
}

Async Functions

// Before
async function fetchUser(id: string): Promise<User> {
    const response = await fetch(`/users/${id}`);
    return response.json();
}

// After
type TFetchUserFunction = (id: string) => Promise<User>;

const fetchUser: TFetchUserFunction = async function(id: string) {
    const response = await fetch(`/users/${id}`);
    return response.json();
}

Generic Functions

// Before
function identity<T>(value: T): T {
    return value;
}

// After
type TIdentityFunction = <T>(value: T) => T;

const identity: TIdentityFunction = function<T>(value: T) {
    return value;
}

Benefits

✅ Type Safety

• Explicit type aliases provide better IntelliSense
• Easier to catch type errors at compile time
• Clear separation between type definition and implementation

✅ Code Organization

• Type definitions are clearly visible at the top
• Consistent typing patterns across your codebase
• Better code documentation through types

✅ Reusability

• Type aliases can be exported and reused
• Share function signatures between modules
• Create consistent API contracts

✅ Refactoring

• Easier to modify function signatures
• Type changes propagate automatically
• Better IDE support for refactoring

Keyboard Shortcuts

File Support

• .ts (TypeScript files)
• .tsx (TypeScript React files)

Type Alias Naming

The extension automatically generates type alias names using this pattern:

• Prefix: T
• Function name in PascalCase
• Suffix: Function

Examples:

• parseData → TParseDataFunction
• validateUser → TValidateUserFunction
• fetchApiData → TFetchApiDataFunction

Tips

1. Place cursor on function name for best results
2. Works with any function type - declarations, expressions, arrows
3. Preserves all modifiers - async, export, etc.
4. Maintains function body exactly as written
5. Handles complex types including generics and unions

Troubleshooting

"No function found at cursor position"

• Make sure cursor is on the function name
• Check that file is a TypeScript file (.ts or .tsx)
• Ensure there are no syntax errors in the code

Generated types look wrong

• Verify function has proper type annotations
• Check that all imported types are available
• Make sure TypeScript compilation works correctly

Happy coding with better type safety! 🚀