Tag: typescript

VSCode のExtensionを開発してみる

vscode-ext-debug
こんにちは。Visual Studio Code、使っていますか?ぼくはこのエディタが大好きです。 今回は、このエディタの Extension(=プラグイン)の開発をしていきたいと思います。 ※ node.js が必要です! 開発方法 TypeScript + Node.js でいけます。 ジェネレータは Yeoman でできています。 手順1: Yeomanを入れる。1$ npm install -g yo また、VSCode Extension generatorも入れます。 1$ npm install -g generator-code 手順2: ジェネレータを実行123456789 … Read More

TypeScriptのES6 Moduleでexport varしたものに書き込む

TypeScriptで、次のようにしたい時があります。 1export var field1 = "foo"; 123import {field1} from "./export";// エラーになるfield1 = "bar"; しかし、エラーになります。 1> Invalid left-hand side of assignment expression. 方法1:namespace で囲むこれは、変数を namespace(旧 module )で囲ってあげることで解決できます。 123export namespace fields { export … Read More

TypeScriptの複雑な型

こんにちはー!!TypeScriptには、名前の通り、「型」があります。その中で、複雑な型もあるので、紹介したいと思います。 配列2つの定義の方法があります。 123456var numArray: number[] = [0, 1, 3, 5, 10, 100, 42];var numArray2: Array<number> = [0, 42];// これも上と同じconsole.log(typeof numArray); // objectconsole.log(numArray instanceof Array); // true 連想配列知らなかった!いままでは Obje … Read More

【感動】VSCodeのTypeScriptで、「Find Usages」相当の機能が使えた!

vscode-ts-find-usages
ここで書いたように、VSCodeでは、TypeScriptで「Find Usages」という、WebStormとかで、変数、関数などがどこで使用できるかをプロジェクト内で検索し、表示してくれる機能がないと思っていました。 しかし、ありました!!! VSCodeでは、Find All References というらしいです。 検索したい変数、関数などにカーソルを置き、Shift + F12 !もしくは、右クリック→「 Find All References 」でもできます。 似ている機能で「Peek Definition」という、定義を吹き出しで表示してくれるものがあります。こちらのショート … Read More

【TypeScript】引数が違うメソッド同士をオーバーロード

TypeScriptで、次のようなオーバーロードをしたかったです。 12345678910function test(num: number, x: number, y: number): void; // 1function test(num: number, pos: number[]): void; // 2function test(num: number, pos?: number[], x?:number, y?: number): void { if (typeof x !== "undefined") { // 1のとき } else i … Read More

TypeScriptのIDEをNetBeansにした

Netbeans-tsplugin-install
こんにちはー。TypeScript、使っていますか? 今まで、Visual Studio Code を、エディタとして使っていましたが、作っていたアプリが大きくなってきたので、NetBeansを使うことにしました! TypeScript Editorプラグインを入れるデフォルトでは TypeScript は使えないので、プラグインを入れましょう! https://github.com/Everlaw/nbts/releasesから、「XXX.nbm」の最新版をダウンロードしましょう。 メニューバーの、ツールからプラグインを開きます。 ダウンロード済み タブを開く プラグインの追加で、ダウンロ … Read More

TypeScriptで、関数を型にする

Typescriptの型として、 「number」「string」「boolean」などとありますが、 実は、関数も型にできます! 1var function1:(arg1:number, arg2:string)=>boolean; こんな感じ。 1(引数名:型, 引数名:型 .....)=>戻り値 戻り値がないときは、voidを指定できます。 どんなときにつかうの?コールバック引数を使いたい1234567function progressA(callback: (msg:string)=>void) { callback("hoge");}progr … Read More

Gulpでtsify+watchify

Qiitaにもかきました。 TypeScriptでBrowserifyが使える、 tsifyを知ったのですが、 ビルドの時間が遅いし、毎回「gulp XXX」って打つのが大変なので、 watchifyと一緒に使えないかな・・・と思いました。 次のようなgulpfile.jsを作りました。 gulp watchify-tsifyと実行する。 ./ts/a.ts、./ts/b.tsを監視する。 watchifyでupdateが発生するたびに、runBundle()を呼び出す。 b.pluginでtsifyを読み込み、js/all.jsを出力する。 参考 … Read More