typescriptメンバ変数のクラス型の変更

Question

私は、angle2で使用するjqueryのdatepickerをラップしています。メンバ変数のクラスが何らかの形で変化している状況に陥っています。参考までに、私は初心者です。

まず、ここでは（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のタイプは「日」ですが、時間によって、私は種類をngAfterViewInitするために取得しています何とか 'DatePickerComponent'に変更されました。これはどうしたらできますか？

編集

追加情報：アハメドは、彼の答えで説明したよう日付ピッカーを使用してHTMLを

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

のようなものだった、これは偶然の代わりの要素にメンバ変数を結合終わりました日付。私の混乱の一部はtypescriptが強く型付けされていることに依存していましたが、htmlとロジックの間の接続はjavascriptを介して行われ、強くtype'dプロパティを持たなくなりました。

Answer 1

github repoを見た後に、問題はこれです：

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

input

[date]テンプレートリファレンスを介して可変#startDate

のコンポーネント自体への参照を取っています

これを削除すると、問題が解決されます。