A VS Code extension that automatically transforms TypeScript functions into typed function expressions with type aliases for better type safety and code organization.
Installation
- Install the extension from VS Code marketplace (or install
.vsix
file)
- Restart VS Code
- The extension is ready to use!
How to Use
Basic Usage
- Place cursor on any function name
- Press
Ctrl+Shift+T
(Windows/Linux) or Cmd+Shift+T
(Mac)
- 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
Platform |
Shortcut |
Windows/Linux |
Ctrl+Shift+T |
Mac |
Cmd+Shift+T |
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
- Place cursor on function name for best results
- Works with any function type - declarations, expressions, arrows
- Preserves all modifiers - async, export, etc.
- Maintains function body exactly as written
- 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! 🚀