常にテンパってます。
npm経由でjQueryをインストールした場合、tscコマンド打つと、
../node_modules/@types/jquery/index.d.ts(41,63): error TS2304: Cannot find name 'Iterable'.というコンパイルエラーが発生しました。
{
"compilerOptions": {
"lib":["es2015", "es2015.iterable", "dom"]
}
}という形で、libを入れたらコンパイルエラーが通りしました。どうやらTypeScript 2.0からtscコマンドでtscconfig.jsonを読み込ませることができるみたいなのですが、何故か読み込まれない。
原因を調べたところ、–projectオプションを使えばいけるみたいなので、
tsc -w --project path_to_tscconfig_json/tscconfig.jsonと打ち込めばいいみたいで、実際にそうしたらきちんと読み込んでくれた。
下記のようなソースを組んでビルドするとエラーが発生した。
$('.hoge').on('touchstart touchmove ',(e)=>{
let changedTouches = e.originalEvent.changedTouches[0];
});Does TypeScript version 1.7.6 support dts lib for touchevents?$('.hoge').on('touchstart touchmove ',(e)=>{
let original = e.originalEvent;
if(original instanceof TouchEvent){
let changedTouches = original.changedTouches[0];
}
});これでビルドした結果、確かにエラーが取れました。TypeScriptを使って下のようなソースを組んだらエラーに。
$(window).on('pageshow',(e)=>{
let originalEvent = e.originalEvent;
if(originalEvent.persisted){
}
});エラーの内容は、interface Event {
persisted:boolean;
}を設定したらエラーが取れました。バージョンアップをしたくて、いったん、アンインストール必要がでてきたので、やり方を調べたら、どうやら
npm uninstall -g typescriptでおｋみたい。
タイトルが長くなってしまったのだが、typescriptで定義したclassをamdでエクスポートするにはどうすればいいのだろうか？
まず下のようにclassを定義する。
//foo.js
define(['jquery'],function($){
class Hoge {
constructor(opts?:any) {
}
}
return Hoge;
});で、これをrequireすればおｋ。var hoge = require('foo');
new hoge;こうすればできた。前回、グローバル変数をtsファイル内で使う方法について書きましたが、windowオブジェクトのプロパティーとしてグローバル変数を宣言したい場合はどうすればいいのだろうか？
ずばり
interface Window {
hoge: {};
}という風にすればおｋtypscriptでdictionary型ないしjson型を定義するにはどうすればいいのだろうか？
Declare and initialize a Dictionary in Typescript
によると、
interface hoge{
foo:string;
}
という形でinterfaceを宣言すればおｋみたいです。typescriptファイル内に定義されていないグローバル変数を使いたい場合はどうすればいいのだろうか？
Call a Global Variable inside Typescript module
を参考にすると以下のように書けばおｋ
declare var hoge: any;
少し前にtypescriptでjQueryを使う方法について書きました。
で、これをベースにjQueryPluginを使いたい場合にはどうすればいいのだろうか？
how to import jQuery plugin into Typescript file?
で確認すると、
interface JQuery {
slider: Function;
}でいけるみたいなのですが、型がFunctionだと気持ち悪いので、interface JQuery {
slider: (args?:any)=>void;
}でも大丈夫でした。///<reference path="../_dt/jquery.d.ts" />の内部に、
interface JQuery {
}の記述があり、これを上書きしないのかなーっと。typescriptでwebpackのrequire関数を使うにはどうすればいいのだろうか？
typescript getting error TS2304: cannot find name ' require'
によると、
declare var require: any;でいけるみたいで、確かにそのように書いたらビルドが通った。
typescriptでは関数を型にすることができるみたいです。
Functions
で確認すると以下のような形でおｋみたい。
var hoge:(args?:any)=>void = function(){
};arg?とすることで任意の引数を受け取ることができます。関数 or メソッドの引数を必須から任意にするにはどうすればいいのだろうか？
_hoge(prms:{a:string,b?:number}) {
console.log(prms.a)
}という形で変数名:{変数名?:type...}と「?」を書けばおｋみたい。関数 or メソッドの引数をオブジェクトにするにはどうすればいいのだろうか？
_hoge(prms:{a:string,b:number,c:number}) {
console.log(prms.a)
}という形で変数名:{変数名:type...}と書けばおｋみたい。typescriptでjQueryのonメソッドを使って下のようにソースを組みたい場合があります。
var _this: any = this;
$('._foo').on('click',function(e){
_this.func();
});
で、これでもいいんだけど、もっとスマートにできないだろうか？$('._foo').on('click',(e) => {
this.func();
});
で、こう書くと、thisは、もう一個、上側の変数を表すことになる。var img: any = new Image();
img.onload = () => {
this._func();
};
typescriptでbool型は、どう型定義すればいいのだろうか？
_hoge: boolean = false;という形で、booleanでおｋ
date型の変数宣言を行いたい場合、どうすればいいのだろうか？
Date variable works, but functions on it do not
によると、
var now:Date = new Date();という形でおｋみたい。
typescriptでclassを使っていると時に、インスタンス変数を定数にしたい場合があります。
そんな時、
class Foo {
private const _$hoge: JQuery = $('.hoge');
}ってやるとエラーになる。さらに、class Foo {
const private _$hoge: JQuery = $('.hoge');
}ってやってもエラーになった。typescriptでインスタンス変数に値を設定する時、下のように実装していました。
class Hoge {
private _$foo: JQuery;
constructor() {
this._$foo = $('._foo');
}
}
これ、実は、下のように書くことも可能らしい。class Hoge {
private _$foo: JQuery = $('._foo');
constructor() {
}
}
こっちの方が可読性があがっていいのかなと。classでメソッドを宣言した場合、デフォルトだとパブリックメソッドになってしまい外部からでもアクセスできてしまう。
そこで、プライベートメソッドに変更して、外部からアクセスできないようにするにはどうすればいいのだろうか？
class Hoge {
private $foo(){
}
}という形で、メソッドの頭にprivateをつければおｋ
