Retrieving the type of a mapped property using the TypeScript compiler API

Question

Retrieving the type of a mapped property using the TypeScript compiler API

If I have a

type Mapping = Record<'success' | 'error', React.ReactNode>

, how can I extract the TypeScript type using the compiler API?

While the symbol for Mapping has the expected two properties, the symbol for each property does not have a type specified.

For a structure like { success: React.ReactNode, error: React.ReactNode }, you can typically use

checker.getTypeOfSymbolAtLocation(symbol, symbol.declarations[0])

to access the type of each property. However, this approach does not seem to work for mapped types.

typescript typescript-compiler-api

Answer 1

Answer №1

If you provide either the name or type node of the type alias for the argument node in

TypeChecker#getTypeOfSymbolAtLocation(symbol, node)

, this approach works:

const mappingDec = sourceFile.statements[0] as ts.TypeAliasDeclaration;
const mappingType = typeChecker.getTypeAtLocation(mappingDec.name);

// Example usage case...
for (const prop of mappingType.getProperties()) {
    const name = prop.getName();
    const type = typeChecker.getTypeOfSymbolAtLocation(prop, mappingDec.name)
}

Answer 2

If you provide either the name or type node of the type alias for the argument node in

TypeChecker#getTypeOfSymbolAtLocation(symbol, node)

, this approach works:

const mappingDec = sourceFile.statements[0] as ts.TypeAliasDeclaration;
const mappingType = typeChecker.getTypeAtLocation(mappingDec.name);

// Example usage case...
for (const prop of mappingType.getProperties()) {
    const name = prop.getName();
    const type = typeChecker.getTypeOfSymbolAtLocation(prop, mappingDec.name)
}

Retrieving the type of a mapped property using the TypeScript compiler API

Answer №1

Similar questions

Can you explain the true meaning behind this specific type definition?

Ensure your TypeScript class includes functionality to throw an error if the constructor parameter is passed as undefined

retrieving information from an array nested within a JSON object in an Angular application

In React-Redux, attempting to assign a value to an empty string is not permitted

Organize various base arrangements within Angular version 2

Adjusting the interface of a third-party TypeScript library

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Integration of Mocha with WebStorm

Converting md ElementRef to HtmlElement in Angular 2+: A Step-by-Step Guide

Using an array of strings as a key in React with TypeScript to access values from state

Enhancing ES6 capabilities with Angular polyfills

Describing the implementation of UNO out parameters within definitions

Count duplicated values in an array of objects using JavaScript ES6

Passing properties from the parent component to the child component in Vue3JS using TypeScript

What is the method for implementing two-way binding on a checkbox in Angular?

Is there a way for a function to be executed without being detected by surveillance?

Obtain values from a specific set, and then filter out values from an array that correspond to the index of that set into distinct arrays

Updating a component in Angular 4.3.1 from within an observable callback

Assigning dynamic key value pairs in Angular 4 using Typescript

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime