打字稿成員變量類類型更改

Question

我包裝了jquery的datepicker以在angular2中使用，並且遇到了成員變量的類以某種方式更改的情況。 供參考，我是這里的初學者。

首先，下面是代碼（基於http://www.radzen.com/blog/jquery-plugins-and-angular/的示例）：

import { forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef, AfterViewInit, OnDestroy, Component} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import * as $ from "jquery";
import 'jqueryui';

const DATE_PICKER_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DatePickerComponent),
    multi: true
};

@Component({
    selector: 'qnet-datepicker',
    template: `<input #input type="text">`,
    providers: [DATE_PICKER_VALUE_ACCESSOR]
})
export class DatePickerComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
    private onTouched = () => {};
    private onChange: (date: Date) => void = () => {};

    @Input() date: Date;
    @Input() options: any = {};
    @Output() dateChange = new EventEmitter();

    @ViewChild('input') input: ElementRef;

    constructor() {
        this.date = new Date();
    }

    writeValue(date: Date) {
        if(!date) {
            return;
        }
        this.date = date;
        $(this.input.nativeElement).datepicker('setDate', this.date)
    }

    registerOnChange(fn: any) {
        this.onChange = fn;
    }

    registerOnTouched(fn: any) {
        this.onTouched = fn;
    }

    ngAfterViewInit() {
        $(this.input.nativeElement).datepicker(Object.assign({}, this.options, {
            onSelect: (dateStr: string) => {
//              this.date = $(this.input.nativeElement).datepicker('getDate');
//              this.onChange(this.date);
                this.onTouched();
                this.dateChange.next(this.date);
            }
        }))
console.log('date is ' + this.date)
        $(this.input.nativeElement).datepicker('setDate', this.date)
    }

    ngOnDestroy() {
        $(this.input.nativeElement).datepicker('destroy');
    }
}

在構造函數中，this.date的類型為“ Date”，但到了ngAfterViewInit時，類型已更改為“ DatePickerComponent”。 怎么會這樣

編輯

附加信息：使用datepicker的html類似於

<qnet-datepicker #startDate [date]="startDate" (dateChange)="updateStart(startDate.date, startTime.value)"></qnet-datepicker>

正如艾哈邁德（ahmed）在回答中描述的那樣，這最終意外地將成員變量綁定到元素而不是日期。 我的部分困惑是依賴於強類型的打字稿，但是html和邏輯之間的連接是通過javascript完成的，因此不再具有“強類型”的屬性。

Answer 1

在查看github repo之后 ，問題是這樣的：

daterangepicker.component.ts第12行<qnet-datepicker #startDate [date]="startDate" (dateChange)="updateStart(startDate.date, startTime.value)"></qnet-datepicker>

input [date]通過模板引用變量#startDate引用了組件本身

刪除即可解決問題。