My goal is to use the object literal pattern in TypeScript.
Here is an example of the object literal pattern in JavaScript.
I created a simple example of the object literal pattern in TypeScript. The only change I made compared to plain JavaScript was to declare an interface for the object literal.
See the full working example: Codepen
I'm curious to know if I'm missing out on any TypeScript features or not following any best practices.
interface square {
squares: NodeListOf<Element>;
squareColors: Array<string>;
squareSizer: (el: HTMLElement) => void;
squareColorChanger: (el: HTMLElement) => void;
doSquareClick: (element: HTMLElement, index: number, array: Array<HTMLElement>) => void;
init: () => void;
}
let squareWidget: square = {
squares: document.querySelectorAll(".square"),
squareColors: ["square-is-color-red", "square-is-color-orange", "square-is-color-green"],
squareSizer: function (el) {
if (el.dataset.enlarged === "false") {
el.classList.add("square-is-enlarged");
el.dataset.enlarged = "true";
} else if (el.dataset.enlarged === "true") {
el.classList.remove("square-is-enlarged");
el.dataset.enlarged = "false";
}
},
squareColorChanger: function (el) {
for (var i = 0; i < el.classList.length; i++) {
if (el.classList[i].indexOf("square-is-color") !== -1) {
el.classList.remove(el.classList[i]);
}
}
var randomColorIndex = Math.floor(Math.random() * (squareWidget.squareColors.length));
el.classList.add(squareWidget.squareColors[randomColorIndex]);
},
doSquareClick: function (element, index, array) {
element.addEventListener("click", function () {
squareWidget.squareSizer(element);
squareWidget.squareColorChanger(element);
});
},
init: function () {
Array.from(squareWidget.squares).forEach(squareWidget.doSquareClick);
}
}
class
is an ECMAScript feature and TypeScript's type system is actually as attuned to functional language constructs as OO ones if not more so. \$\endgroup\$let squareWidget: square = { listOfFunctions }
. How is it different from a [static] class with static methods? How does my proposal make the code less functional (this is a case where OOP does not replace FP, but adds to it)? And again, why use the object-literal thing if there are classes which are more natural for most developers when it comes to OOP especially when language provide classes as a concept? \$\endgroup\$class
does not come from TypeScript and, more importantly, that OOP and TypeScript are orthogonal. Also, a class with static methods is more complex than an object literal. Classes with onlystatic
members in TS/JS are pointless complexity. I agree that a class is not necessarily less functional. Ironically, I prefer factories as they allow for proper encapsulation. Seeing class as the natural way to write TypeScript or JavaScript suggests an over exposure to Angular. Angular is a poor example of TypeScript. \$\endgroup\$does not come from TypeScript
so what?class
is available in TypeScript anyway...My point is that OOP and TypeScript are orthogonal.
-- Totally agree.Also, a class with static methods is more complex than an object literal.
-- more complex in which way, and when compared against which definition of complexity? \$\endgroup\$