Tips for successfully typing the backtick character when transitioning to Typescript:

Question

Tips for successfully typing the backtick character when transitioning to Typescript:

I am currently working on a Typescript Vue project involving Leaflet. I came across some code for lazy-loading map markers, but it was written in Javascript. Although the code works fine, I keep receiving errors and warnings from VSCode because this is not properly typed. How can I add type annotations to this?

Update 1: With @aplet123's suggestion, I managed to resolve the first type issue. However, I am stuck with the second one related to this._updateIconVisibility. It seems that this problem arises because I am extending existing functionality (i.e., _updateIconVisibility does not actually exist as a type). What should be my next step? I assume it might be best practice to create a custom class with the necessary methods, but I am unsure if using an anonymous object or another approach is more common...

L.Marker.addInitHook(function (this: L.Marker) {
    this.on(
        'add',
        function () {
            this._updateIconVisibility = function () {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent

                // remember parent of icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode
                }

                // add/remove from DOM on change
                if (isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon)
                        if (shadow) {
                            shadowParent.appendChild(shadow)
                        }
                    } else {
                        iconParent.removeChild(icon)
                        if (shadow) {
                            shadowParent.removeChild(shadow)
                        }
                    }

                    this._wasVisible = isVisible
                }
            }

            // on map size change, remove/add icon from/to DOM
            this._map.on(
                'resize moveend zoomend',
                this._updateIconVisibility,
                this
            )
            this._updateIconVisibility()
        },
        this
    )
})

typescript vue.js

Answer 1

Answer №1

I have put together a solution for your code that addresses the errors and provides guidance on moving forward. While I may not be well-versed in your environment (Vue, etc.), this file serves as scaffolding to help you understand the process.

The key lies in accurately defining your this types at each stage. By creating a structure, implementing a type called MyObject, and specifying this as type MyObject where necessary, we can resolve the issues.

Please review the modified code below and feel free to ask if there are any unclear areas.

//  Additional setup to accommodate environmental requirements
namespace L {
    type handler = () => void

    type target = object;

    export type on = (types: string, handler: handler, target: target) => void

    export interface Marker {
        on: on
    }
}

const L = {
    Marker: {
        addInitHook: function(f: (this: L.Marker) => void) {
            //  Placeholder instruction based on code input
        }
    }
}

//  Introduced type for integration into your code
namespace L {
    export type MyObject = {
        _updateIconVisibility: () => void,
        _map: {
            on: on
        }
    }
}

//  Your existing code with TypeScript compiler compliance
L.Marker.addInitHook(function (this: L.Marker) {
    this.on(
        'add',
        function (this: L.MyObject) {
            this._updateIconVisibility = function () {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent

                // Retain parent of icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode
                }

                // Add/remove from DOM based on changes
                if (isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon)
                        if (shadow) {
                            shadowParent.appendChild(shadow)
                        }
                    } else {
                        iconParent.removeChild(icon)
                        if (shadow) {
                            shadowParent.removeChild(shadow)
                        }
                    }

                    this._wasVisible = isVisible
                }
            }

            // Update visibility of icon in DOM upon map size change
            this._map.on(
                'resize moveend zoomend',
                this._updateIconVisibility,
                this
            )
            this._updateIconVisibility()
        },
        this
    )
})

Answer 2

I have put together a solution for your code that addresses the errors and provides guidance on moving forward. While I may not be well-versed in your environment (Vue, etc.), this file serves as scaffolding to help you understand the process.

The key lies in accurately defining your this types at each stage. By creating a structure, implementing a type called MyObject, and specifying this as type MyObject where necessary, we can resolve the issues.

Please review the modified code below and feel free to ask if there are any unclear areas.

//  Additional setup to accommodate environmental requirements
namespace L {
    type handler = () => void

    type target = object;

    export type on = (types: string, handler: handler, target: target) => void

    export interface Marker {
        on: on
    }
}

const L = {
    Marker: {
        addInitHook: function(f: (this: L.Marker) => void) {
            //  Placeholder instruction based on code input
        }
    }
}

//  Introduced type for integration into your code
namespace L {
    export type MyObject = {
        _updateIconVisibility: () => void,
        _map: {
            on: on
        }
    }
}

//  Your existing code with TypeScript compiler compliance
L.Marker.addInitHook(function (this: L.Marker) {
    this.on(
        'add',
        function (this: L.MyObject) {
            this._updateIconVisibility = function () {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent

                // Retain parent of icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode
                }

                // Add/remove from DOM based on changes
                if (isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon)
                        if (shadow) {
                            shadowParent.appendChild(shadow)
                        }
                    } else {
                        iconParent.removeChild(icon)
                        if (shadow) {
                            shadowParent.removeChild(shadow)
                        }
                    }

                    this._wasVisible = isVisible
                }
            }

            // Update visibility of icon in DOM upon map size change
            this._map.on(
                'resize moveend zoomend',
                this._updateIconVisibility,
                this
            )
            this._updateIconVisibility()
        },
        this
    )
})

Answer 3

Answer №2

After listening to David's response, I decided to create an interface that includes elements for the enhanced functionality I needed. Here's how it turned out:

interface LazyMarker extends Marker {
    _wasVisible: boolean
    _icon: ((Node & ParentNode) | null) & Icon
    _iconParent: (Node & ParentNode) | null
    _shadowParent: (Node & ParentNode) | null
    _updateIconVisibility(): void
}

// By using this hook, the markers can lazy load which ultimately boosts the performance of map scrolling and moving.
L.Marker.addInitHook(function (this: LazyMarker) {
    this.on(
        'add',
        function (this: LazyMarker) {
            this._updateIconVisibility = function (this: LazyMarker) {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent

                // Storing the parent of the icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode
                }

                // Adding/removing from DOM based on changes
                if (iconParent != null && isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon)
                        if (shadowParent != null && shadow) {
                            shadowParent.appendChild(shadow)
                        }
                    } else {
                        iconParent.removeChild(icon)
                        if (shadowParent != null && shadow) {
                            shadowParent.removeChild(shadow)
                        }
                    }

                    this._wasVisible = isVisible
                }
            }

            // On map size change, remove/add icon from/to DOM
            this._map.on(
                'resize moveend zoomend',
                this._updateIconVisibility,
                this
            )
            this._updateIconVisibility()
        },
        this
    )
})

Answer 4

After listening to David's response, I decided to create an interface that includes elements for the enhanced functionality I needed. Here's how it turned out:

interface LazyMarker extends Marker {
    _wasVisible: boolean
    _icon: ((Node & ParentNode) | null) & Icon
    _iconParent: (Node & ParentNode) | null
    _shadowParent: (Node & ParentNode) | null
    _updateIconVisibility(): void
}

// By using this hook, the markers can lazy load which ultimately boosts the performance of map scrolling and moving.
L.Marker.addInitHook(function (this: LazyMarker) {
    this.on(
        'add',
        function (this: LazyMarker) {
            this._updateIconVisibility = function (this: LazyMarker) {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent

                // Storing the parent of the icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode
                }

                // Adding/removing from DOM based on changes
                if (iconParent != null && isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon)
                        if (shadowParent != null && shadow) {
                            shadowParent.appendChild(shadow)
                        }
                    } else {
                        iconParent.removeChild(icon)
                        if (shadowParent != null && shadow) {
                            shadowParent.removeChild(shadow)
                        }
                    }

                    this._wasVisible = isVisible
                }
            }

            // On map size change, remove/add icon from/to DOM
            this._map.on(
                'resize moveend zoomend',
                this._updateIconVisibility,
                this
            )
            this._updateIconVisibility()
        },
        this
    )
})

Tips for successfully typing the backtick character when transitioning to Typescript:

Answer №1

Answer №2

Similar questions

Transferring information from child to parent class in TypeScript

Issue with Nuxt.js generate freezing at 'generated' stage

Vue2 Component not displaying changes in data updates

Issue with Nuxt: Module needs to export a function: @turfhelpers [ERROR]

Retrieve the value of the target element when the Quasar q-checkbox is checked

Is there a way to replicate the tree structure of an array of objects into a different one while modifying the copied attributes?

The data type 'string' cannot be assigned to the data type 'Position'

Error: The Vue Class-Based module failed to parse due to an unexpected character '@'

Choose datetime datepicker formatting in ng-pick

Using Angular and Typescript to implement a switch case based on specific values

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

Trouble integrating PDF from REST API with Angular 2 application

What is the process for crafting a Vuejs controlled input form?

Creating an interceptor to customize default repository methods in loopback4

Setting timeouts during Vue-cli unit testing can help improve the efficiency and accuracy of your tests

Is there a method in Vuejs to choose a tab and update components simultaneously?

The parent component is failing to pass the form values to the child form group in CVA

My previously functioning TypeScript code suddenly ceased to work after I ran the yarn install command

Is `h` equal to `createVNode` function?

How can we combine two phone calls and display the outcomes using typeahead ngx-bootstrap?