Exploring Proxy to Achieve DOM Intellisense with TypeScript for Element Binding, Two Way Data Binding, Events, and More

Marc Clifton

Rate me:

5.00/5 (6 votes)

5 Jul 2020CPOL20 min read

8.4K

Learning about how the Proxy class can be used to, among other things, eliminate element ID string literals and with TypeScript, provide Intellisense for HTML elements

I have found it a useful exploration of how to leverage the Proxy type to bind class properties to HTML elements, achieve two way binding, subscribe to UI events, and so forth, all using actual "edit-time" types for type safety and Intellisense support - as in, eliminate literal strings for referencing DOM elements by their IDs.

Views

Daily Counts

Downloads

Weekly Counts

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Marc Clifton

Architect Interacx

United States

Blog: https://marcclifton.wordpress.com/
Home Page: http://www.marcclifton.com
Research: http://www.higherorderprogramming.com/
GitHub: https://github.com/cliftonm

All my life I have been passionate about architecture / software design, as this is the cornerstone to a maintainable and extensible application. As such, I have enjoyed exploring some crazy ideas and discovering that they are not so crazy after all. I also love writing about my ideas and seeing the community response. As a consultant, I've enjoyed working in a wide range of industries such as aerospace, boatyard management, remote sensing, emergency services / data management, and casino operations. I've done a variety of pro-bono work non-profit organizations related to nature conservancy, drug recovery and women's health.

Exploring Proxy to Achieve DOM Intellisense with TypeScript for Element Binding, Two Way Data Binding, Events, and More

Views

Downloads

License

Comments and Discussions