KnockoutJSを使用したTypeScript

137

TypeScriptをKnockoutJSで使用するサンプルはありますか？彼らがどのように連携するのか私はただ興味がありますか？

編集する

これが私が持っているもので、うまくいくようです

declare var ko: any;
declare var $: any;
class ViewModel {
    x = ko.observable(10);
    y = ko.observable(10);

}

$(() => {
    ko.applyBindings(new ViewModel());
});

これにより、次のJavascriptが生成されます。

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});
knockout.js  typescript 
— CallumVass
ソース
6
仕様の環境宣言に関するセクションが見つかるまで、「var」と組み合わせて使用​​される「declare」キーワードに少し混乱していました。今完璧な理にかなって：typescriptlang.org/Content/...が。
— レックスミラー
2
Typescript 0.9には、入力されたオブザーバブルを提供するGenericsがありますko.observable<number>(10)。私はいくつかのより詳細な情報をブログ投稿を書きました：ideasof.andersaberg.com/idea/12/...
— アンダース

回答:

108

DefinitelyTypedを見てください。

「一般的なJavaScriptライブラリのTypeScriptタイプ定義リポジトリ」

— ジョージ・マブリサキス
ソース
3
これは馬鹿げた質問かもしれませんが、TypeScriptの型定義が正確に何であるか/するかを説明できますか TypeScriptでコンパイルされたファイルでコンパイラが文句を言わずにライブラリ関数を使用できるようにするためですか？その場合は、アプリケーションで定義を参照する必要はありません。tsファイルをコンパイルするときだけですよね？
— 紛れもなく
9
それはまさにその通りです。タイプスクリプトコードをメモ帳で作成している場合、定義はコンパイル時にのみ必要になります。一方、typescriptの良い点の1つは、ビジュアルスタジオ（およびプラグインを介した他のエディター）のインテリジェンスがコードを理解しやすく、自動補完とタイプおよびエラーチェックを実行するのに役立ちます（はるかに多く） JavaScriptより）。そのため、JavaScriptで記述されたコードの定義ファイルを使用して、タイプスクリプトの型チェックを提供しています。もちろん、libsを「任意」として宣言することもできますが、これは良いことではありません。
— George Mavritsakis
5
重要なのは/// <reference path="knockout-2.2.d.ts" />、定義を取得できるように.tsファイルの先頭に追加することです。
— エイダンライアン
リストのどこにもノックアウトが表示されません。削除されましたか？動いた？イライラ
— 道化師
58

Knockoutの静的型を取得するために、この小さなインターフェースを作成しました。

interface ObservableNumber {
        (newValue: number): void;               
        (): number;                             
        subscribe: (callback: (newValue: number) => void) => void;
}
interface ObservableString {
        (newValue: string): void;               
        (): string;                             
        subscribe: (callback: (newValue: string) => void) => void;
}
interface ObservableBool {
    (newValue: bool): void;             
    (): bool;                               
    subscribe: (callback: (newValue: bool) => void) => void;
}

interface ObservableAny {
    (newValue: any): void;              
    (): any;                                
    subscribe: (callback: (newValue: any) => void) => void;
}

interface ObservableStringArray {
    (newValue: string[]): void;
    (): string[];
    remove: (value: String) => void;
    removeAll: () => void;
    push: (value: string) => void;
    indexOf: (value: string) => number;
}

interface ObservableAnyArray {
    (newValue: any[]): void;
    (): any[];
    remove: (value: any) => void;
    removeAll: () => void;
    push: (value: any) => void;
}

interface Computed {
    (): any;
}

interface Knockout {
    observable: {
        (value: number): ObservableNumber;
        (value: string): ObservableString;
        (value: bool): ObservableBool;
        (value: any): ObservableAny;
    };
    observableArray: {
        (value: string[]): ObservableStringArray;
        (value: any[]): ObservableAnyArray;
    };
    computed: {
        (func: () => any): Computed;
    };
}

「Knockout.d.ts」に入れて、自分のファイルから参照します。あなたが見ることができるように、それはジェネリック（仕様に従って来ている）から大いに利益を得るでしょう。

ko.observable（）のインターフェースをいくつか作成しただけですが、ko.computed（）とko.observableArray（）は同じパターンで簡単に追加できます。更新： subscribe（）のシグネチャを修正し、computed（）およびobservableArray（）の例を追加しました。

独自のファイルから使用するには、これを上部に追加します。

/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
— ステンL
ソース
2
@JcFx：Andersが言及したのは、おそらくTypeScript .tsファイルを受け取り、インターフェース宣言ファイル.d.tsを出力するオプションでした。通常の型指定されていないJavaScriptを使用して、魔法のように型を発見する方法はありません。JSの問題（TypeScriptsが解決しようとしている）は、変数が特定の型に準拠する必要があることをプログラマーが宣言する方法がないことです。x = 'hello'JSで言うとき、コードのどこかでを言うつもりだったかどうかはわかりませんx = 34。xの型については何も推測できません。
— Sten L
@JcFx：実際には、限定された型情報がプレーンJSから派生する可能性があることは正しいかもしれません。試してみてどうなるか教えてください！
— Sten L
typescriptはジェネリックを追加しています。
— ダニエルA.ホワイト
6

マークアップでノックアウトバインディングを宣言する方法については何も変更されませんが、ノックアウトライブラリのインターフェイスが作成されると、インテリセンスの良さが得られます。この点で、jQuery APIのほとんどのインターフェイスを含むtypescriptファイルが含まれているjquery Sampleと同じように機能します。

koと$の2つの変数宣言を取り除くと、コードは機能すると思います。これらは、ノックアウトおよびjqueryスクリプトがロードされたときに作成された実際のkoおよび$変数を隠しています。

Visual Studioテンプレートプロジェクトをノックアウトするためにこれを行う必要がありました。

app.ts：

class GreeterViewModel {
    timerToken: number;
    utcTime: any;

    constructor (ko: any) { 
        this.utcTime = ko.observable(new Date().toUTCString());
        this.start();
    }

    start() {
        this.timerToken = setInterval(() => this.utcTime(new Date().toUTCString()), 500);
    }
}

window.onload = () => {
    // get a ref to the ko global
    var w: any;
    w = window;
    var myKO: any;
    myKO = w.ko;

    var el = document.getElementById('content');
    myKO.applyBindings(new GreeterViewModel(myKO), el);
};

default.htm：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" data-bind="text: utcTime" />
</body>
</html>
— ジェレミー・ダニョウ
ソース
1
すべてのコンストラクターのオーバーキルにkoで投稿していません
— Simon_Weaver 2014年
3

次のコマンドを使用して、ノックアウトタイプまたはtdsをインポートします。

npm install @types/knockout

これにより、プロジェクトのnode_modulesディレクトリに@typesディレクトリが作成され、インデックスノックアウトタイプ定義ファイルはknockoutという名前のディレクトリに作成されます。次に、typesファイルへのトリプルスラッシュ参照を使用します。これにより、優れたIDEおよびTypeScript機能が提供されます。

/// <reference path="../node_modules/@types/knockout/index.d.ts" />

最後に、declareステートメントを使用して、ko変数をスコープに入れます。これは強く型付けされているので、こんにちはインテリセンスです。

declare var ko: KnockoutStatic;

これで、JavaScriptファイルと同じようにKOを使用できるようになりました。

ここに画像の説明を入力してください

お役に立てれば。

— SimperT
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.