FullCalendar API main.js 타입스크립트 컴파일엔진 형태

FullCalendar API에서 지원하는 main.js 스크립트 파일에는 Calendar를 그려주는 기능과 다양한 옵션 기능들이 구현되어있다.

ListView 목록보기 기능에서 기본 DESC 내림차순 정렬이 되어있다 

 ASC 오름차순 기능으로 날짜를 역순으로 출력하던 도중 오버라이딩을 하여 코드를 수정하기 위해 main.js 파일의 문법 형태를 파악하였는데,

생성자 함수를 var 함수명 = (function () {})(); 와 같이 선언된 형태를 처음 접하게되어 구글링과 책을통해 이리저리 검색해보니 자바스크립트 컴파일 엔진을 통해 다른 언어로 작성된 코드를 변환한 형태인 것을 확인할 수 있었다.

(아닐수도 있음)

 

해당 형태는 타입스크립트 엔진을 통해 변환된 형태인것으로 추측된다.

 

변환 전 코드

class Fullcalendar {

	class ListView {
		public ListView () {
			var _this = _super !== null && _super.apply(this, arguments) || this;
			_this.computeDateVars = memoize(computeDateVars);
			_this.eventStoreToSegs = memoize(_this._eventStoreToSegs);
			_this.state = {
					timeHeaderId: getUniqueDomId(),
					eventHeaderId: getUniqueDomId(),
					dateHeaderIdRoot: getUniqueDomId(),
			};
			_this.setRootEl = function (rootEl) {
					if (rootEl) {
						_this.context.registerInteractiveComponent(_this, {
							el: rootEl,
						});
					}
					else {
						_this.context.unregisterInteractiveComponent(_this);
					}
			};
			return _this;
		}
		
		public renderSegList(allSegs, datDates) {
			var _a = this.context, theme = _a.theme, options = _a.options;
			var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot;
			var segsByDay = groupSegsByDay(allSegs); 
			return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) {
			
				var innerNodes = [];
				
				for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
					var daySegs = segsByDay[dayIndex];
					if (daySegs) { 
						var dayStr = formatDayString(dayDates[dayIndex]);
						var dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
						innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
						daySegs = sortEventSegs(daySegs, options.eventOrder);
						for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
							var seg = daySegs_1[_i];
							innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getSegMeta(seg, todayRange, nowDate))));
						}
					}
				}
				
				return (
						  createElement("table", { className: 'fc-list-table ' + theme.getClass('table') }
						, createElement("thead", null
						, createElement("tr", null
						, createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint)
						, createElement("th", { scope: "col", "aria-hidden": true })
						, createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint)))
						, createElement("tbody", null, innerNodes))
				);
			}));
		}
	}
}
var ListView = new ListView(_super);
var Fullcalendar = new Fullcalendar(exports);

 

 

변환 후 코드

var Fullcalendar = (function (exports) {
	var ListView = /** @class */ (function (_super) {
		ListView.prototype.renderSegList = function (allSegs, dayDates) {
            var _a = this.context, theme = _a.theme, options = _a.options;
            var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot;
            var segsByDay = groupSegsByDay(allSegs); // sparse array
            return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) {
                var innerNodes = [];
                for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
                    var daySegs = segsByDay[dayIndex];
                    if (daySegs) { // sparse array, so might be undefined
                        var dayStr = formatDayString(dayDates[dayIndex]);
                        var dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
                        // append a day header
                        innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
                        daySegs = sortEventSegs(daySegs, options.eventOrder);
                        for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
                            var seg = daySegs_1[_i];
                            innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, getSegMeta(seg, todayRange, nowDate))));
                        }
                    }
                }
                return (createElement("table", { className: 'fc-list-table ' + theme.getClass('table') },
                    createElement("thead", null,
                        createElement("tr", null,
                            createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
                            createElement("th", { scope: "col", "aria-hidden": true }),
                            createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint))),
                    createElement("tbody", null, innerNodes)));
            }));
        };
	}(DateComponent));
}({}));

 

오버라이딩 하기 위해서는 타입스크립트의 문법을 공부해야한다.