TypeScript part2 [転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
http://www.typescriptlang.org/
TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
前スレ
http://peace.2ch.net/test/read.cgi/tech/1349187527/ https://twitter.com/ironshay/status/593855606747860992
Anders, father of C#, and Misko, father of angular,
on the same stage at Build2015. インストールしたら1.5 Betaが入りました。
$ tsc sample.tsでコンパイルしたjavascriptファイルを$ node sample.jsで実行すると
__.prototype = b.prototype;の箇所でエラーになるんですが
typescriptの書き方でおかしいところを教えてください
module M {
export interface aInterface {
f1(): void;
}
export interface bInterface {
f2(): void;
}
class A extends B implements aInterface {
f1() {
console.log(1);
}
}
class B implements bInterface {
f2() {
console.log(2);
}
}
} typescriptの勉強の為、型推論とanyを使わない書き方を知りたいのですが
コンパイルすると error TS2339: Property 'classList' does not exist on type 'EventTarget'.
ってエラーが出ます。
(1)と(2)の行を型指定しなければエラーが出ないのですが、どのような型を指定したらエラーがでないのでしょうか？
class A {
eventFunc(e: MouseEvent) { // (1)
var target:EventTarget = e.target; // (2)
target.classList.add('red');
}
f() {
window.addEventListener('click', this.eventFunc, false);
}
} (2)をvar target = <Element>e.target;でいいんじゃないかな
DOMの仕様でtargetがElementではないケースがあるのかどうか知らないけど、少なくとも自分で扱う範囲なら問題ないでしょ >>8
classListだから
var target = <HTMLElement>e.target;
または
var target: HTMLElement = e.target;
じゃないかな？
分からない場合はlib.d.tsを見ればいいよ 最初の頃は律儀に型指定してたけど面倒くさいからもうやってない
コンパイル速度が上がるわけでもない。 tsc --noImplicitAnyでかつ明示的にanyを使ってなくてエラーがでなければ
型安全が保たれてるから何も毎回型指定する必要はないよ
ただjquery.d.tsとかanyだらけなんで実行しないとエラーが出ない事とかよくある
単純にjQuery使う程度ならJavaScriptのままでいいとは思う やっぱ堅い仕様で書いてるとtscでインライン化して欲しくなっちゃうなぁ >>13
インライン化し始めるとjsのソースがグチャグチャになりそうだ
get,setはあるんだからそれでいいんじゃないの？ >>14
うちの場合JavaScriptはただの実行ファイル扱いだからね
デバッグはソースマップなりインライン化の無効なりできればいいんじゃないかな >>16
元々の予定にはなかったDecoratorを入れたからじゃないかな
仕様の検証の為に1.5AlphaやBetaを挟んだのだと思う >>15
インライン化がもし速度の為だったら速くなるかどうかは未知数だな
JITコンパイラの高速化の癖というか挙動を予測するのはかなりむずい
あくまで主観だけど長くなった関数は高速に実行されにくくて
細かく関数に分けた方が速くなる気がする (実際にそういう事はあった)
関数単位でコンパイルするしないを決めてるっぽいし 解析によるインライン化はtscでもJITでも好きにしてくれていいけど
inlineキーワードで明示できた方が気持ち的にスッキリする ES6がいろんなブラウザで動かせるようになった頃にTypeScriptってどうなるの？ ECMAScript2015(旧ES6)がリリースされたんだな
>>21
TypeScriptの最大のメリットは静的型チェックだから有用性は全く変わらない
他にもprivate指定とかも有用だし既にES7(ES2016?)の仕様も先取りしようとしてるよ newさせないようにコンストラクターを非公開にしたい
現状でも実現できるけど、そのためにインターフェースを2つも書くのは面倒くさい https://github.com/Microsoft/TypeScript/wiki/Roadmap
>1.6
>ES6 Generators
>Local types
>Generic type aliases
>Expressions in class extends clauses
>Class expressions
>exclude property in tsconfig.json
>User defined type guard functions
>async/await for ES6
>External module resolution enhancements
>JSX support
>Intersection types
>abstract classes and methods
次の仕込み進んでるね 昔はJScriptという亜種JavaScriptを作っていたMSが
今はJavaScriptの未来を作ってるんだから興味深いよ。
V8を作ってるGoogleが作ってるAngularJSが
TypeScriptを採用してるっていうんだからね。
世の中何が起こるかわからない。 ES6以降の見識とかモダン言語のたしなみがないと新機能を追いかけるのは難しくなってきてるな node.js 4.0.0 がリリースされたけど tsc 1.5.3 でのコンパイルは問題なかったよ >>32
誰かがブログで解説するだろうからそれを待て
あと1.6でオブジェクトリテラルの型チェックが厳密になって大量のエラーが…
https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes
↑ここに対処法とか書いてあるからバージョンアップする場合は見るべし typescriptって型を省略せずに書くのが王道なの？どうなのかおしえてください >>35
var a = 1;
は型を省略して書いてるように見えるが型推論されてaはnumber型に固定される
その後a = "hoge";と書くとエラーになる
型推論をあてにして型を省略するのは普通だがそういう事を聞いてんの？ 関数の引数の型は書いて下さいね
あと --noImplicitAny は忘れずに --noImplicitAny を付けてれば引き数の型を書かないとエラーになるけど
戻り値の型は省略できてしまう
コンパイラは型推論で戻り値の型は分かるから補完候補の表示で型は分かるけど
戻り値の型もちゃんと書いた方がいいね
そうすると整数を返す予定だったところを文字列返しちゃった時にエラーになる >>37
対応してませんね
けれど前から提案はされていて、C#と異なる使い方も模索されているみたいです
Partial classes
https://github.com/Microsoft/TypeScript/issues/563
Suggestion: Reopen static and instance side of classes
https://github.com/Microsoft/TypeScript/issues/2957 >>41
そういうのはinterfaceとかmodule(namespace)を使えば実用上困ることは
無いと思うからいらないでしょ コードの中にnew Promiseを書くと
tsc test.tsでチェックしたら
error TS2304: Cannot find name 'Promise'
って出るんですがこれはどうしたらでなく出来ますか？ --target ES6を指定します
どうもありがとうございます var i;
var l;
var a = [
{"a":1},
{"b":1},
]
for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
コンパイルすると
TS2403: Subsequent variable declarations must have the same type. Variable 'i' must be of type 'any', but here has type 'number'
ってなるんですがよく分かりませんどうかけばいいんでしょうか >>46
エラーメッセージが理解出来れば分かる事ではあるが…
var i; ← iの型がany
for (var i = 0; ← iの型がnumberだから矛盾してると言ってる
var i;を消すかvar i: number;とすればいいよ 超超初心者なんですが
仮にグローバルで宣言したiがforでなく別の関数で使われることを意図していた場合
>>46のように変数iをfor文でたまたま同じ名前の制御変数としてvar宣言すると思うのですが
このときvarが付いているにも関わらずfor文のiは一行目で宣言したiとみなされてしまうってことですか？ >>48
JavaScriptのvarはブロックスコープの機能が無い (詳細はググるなりしてくれ)
直感的にしたければES6のletを使うしかない TSはES5ターゲットでもlet/const使えるからへーきへーき >>48
いや間違えた…TypeScriptは普通にletが使えるからletを使えばいい
>>46のvarをletに書き換えるだけでうまく行くよ >>49
ああ！ifやforは関数ではないからvarつけても同名のグローバルを見に行っちゃうんですね！
そこで出てくるのがlet/constか！なっとく！ >>53
let使える前のjsの変数スコープは基本的に関数レベルだったんだよ。
rubyやpythonとかもそうだったりする。 issueが0になってからリリースまで1ヶ月以上掛かるし
1.6がリリースされた時は1.6.2だったからもう少し先な気がする >>57
ポリモthisって変数の受け取り側で(ダウン)キャストしないで済むって事でしょ？
そんな待ち遠しいって何か便利な使い方とかあるの？ interface IEquatable {
equals(other: this): boolean
}
とかかな typescriptで使いやすいEditorでおすすめってなんですかね？
MS由来からいってVSなんでしょうけど、当方Macなので、、、、 >>60
ttps://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support
普段何使ってるんだよ
Vimは導入が難しいが、何するにしても特化した環境が作れるぞ >>59
class Base {
getThis(): Base { return this; }
}
class Derived extends Base {
print(): void { console.log('Derived'); }
}
let derived = new Derived();
derived.getThis().print(); // 1.6.2だとBaseにprint()がねーよと怒られる
1.7だと
getThis(): this { return this; }
にする事でコンパイル通ってちゃんと実行も出来る
って事は理解したけど、equals(other: this)のthisって自分の型名のエイリアス
として使えるから便利って事であってるの？ >>60
Emacsと
https://github.com/ananthakumaran/tide
↑を使う事でVSに劣らないインテリセンス環境が出来上がるぞ(ページ内のscreencastを見るべし！)
ちなみに常用してるけどMac版Emacsは使った事ないから詳細は分からん >>59
class Base {
equals(other: this): boolean { return other.name === "Derived"; }
}
class Derived extends Base {
name = "Derived";
}
let derived = new Derived();
console.log(derived.equals(derived));
だと、1.7でも(正確には1.7.0-dev.20151016)
test.ts(3,18): error TS2339: Property 'name' does not exist on type 'Base'.
って、ポリモらないけど…なんでなん？ >>63
>>61
情報ありがとうございました。結局atomに落ち着きました。
最初補完効かないじゃんとか思ってましたが、tcconfig.jsを作ったら機能したので
問題なさそうです。
emacsかvimかで言ったらvim寄りですが、設定の手間とかいろいろ考えたら
atomが一番楽です。すいません。 >>64
そういった使い方は無いと思うよ。その場合はジェネリックを使うといい
class Base {
equals<T extends { name: string; }>(other: T): boolean { return other.name === "Derived"; }
} >>66
https://github.com/Microsoft/TypeScript/pull/4910
このページのサンプルコードで>>64みたいなのがあったよ
>>62の戻り値バージョンは直感的で使い易いし良いんだけど
引き数バージョンがポリモらないのは何か変だなとは思う
ま、ジェネリックがあるから困らないけど1.7がちゃんとリリースされたら
また確認してみよう >>67
Baseがあとからどう拡張されるかなんてわかるわけないだろ
未来予知でもさせる気か >>68
コールの仕方がderived.equalsなんだから未来予知なんてしなくたって
コンパイル時にthisがDerivedなのが決まるでしょ (ジェネリックの場合はTがDerived)
C++は呼び出した時に型を決めてコンパイルされるからそういうのが当たり前だけど
TypeScriptはジェネリックとかも先にコンパイルしようとすんだな
とりあえずそういう仕様なのは理解したよ >>69
それは>>67のいうところの戻り値バージョンだろ
Baseの中のthisはBaseでしかない >>70
は？継承されたメソッドのderived.equalsでアクセスしてんのにthisがBaseなわけないだろ
お前が言ってんのは字面上の事だろ
だからC++はジェネリック(テンプレート)は呼び出された時しかコンパイルされないんだよ
TypeScriptもそうだと思っていたと先に書いただろ
equals(other: this)もジェネリックと同じようなもんだろうと思っていたんだよ
同じ事なんども言わせるな ちなみに>>64のコードはコンパイルエラーは出力されるが吐き出された.jsを
実行すると問題なく実行出来る
JavaScriptは動的型だから当然だけど、TypeScriptもジェネリック(とポリモthis)は
呼び出し時に毎回コンパイルした方がよりJavaScriptに近くなるとは思うけどね
(コンパイルというか型チェックだけだが) エラーになってるのに何とち狂ってんだ
お前はもうそう思い込んでていいから他の人間に迷惑かけるなよ >>73
言ってる意味が理解出来ないなら無理に意味不明な返答しなくていいよ C++のテンプレートではそうじゃないみたいだけど
他言語のジェネリクスやらパラメータ多相だと型引数T（ここで言えばthis）がnameを持つって制約がなけりゃ
other.nameとかやってる時点でコンパイルエラーになるのが普通
呼び出し側でどう呼び出されてようが知らん だから説明してくれなくてもTypeScriptの仕様は知ってるよ
class Base {
getThis(): this { return this; }
}
class Derived extends Base {
name = "Derived";
}
let derived = new Derived();
console.log(derived.equals(derived)); // OK:コンパイルも実行も問題ない
この場合のgetThis(): this { return this; }はBaseにあるのに型はDerivedになる
それがポリモthis
引き数版もそうだと思ったら違ったから変だなとおもっただけだ
つうか何回同じ事書かせるんだよ… 間違えた…
> console.log(derived.equals(derived));
derived.getThis().print(); class Base {
getThis(): this { return this; }
}
class Derived extends Base {
print(): void { console.log('Derived'); }
}
let derived = new Derived();
derived.getThis().print(); // OK:コンパイルも実行も問題ない
なんどもゴメンよ…こっちだった class Base {
identity(a: this): this { return a; }
}
class Derived extends Base { /*略*/ }
let derived = new Derived();
derived.indentity(derived) // => Derived
これで戻り値だろうが引数だろうがthis型の意味が変わらんのは分かるだろ
んでもうひとつ
親クラスの中で子クラスの実装に依存するような定義することがおかしいと思わんのか
テンプレートみたいにthisを具体的な型に置き換えたメソッドを実際に生成してくれるって訳じゃねーんだぞ >>79
> identity(a: this): this { return a; }
なるほど結局やってくれるのはキャストだけって事だな
> 親クラスの中で子クラスの実装に依存するような定義することがおかしいと思わんのか
いや別に…ジェネリックとかは
equals(other: Derived): boolean;
equals(other: Hoge): boolean;
equals(other: any): boolean { return other.name === "Derived"; }
を短く書けるってだけだぞ
やってる事はいたって普通じゃん equals(other: any): boolean { return other.name === "Derived"; }
よく考えたらこれで良かったなｗ VisualStudioでTypeScriptを始めてみたのですが加算が上手く出来ません。
数値で入力して数値で計算しているつもりですが文字列の連結になってしまいます。
以下のソースのどこかに問題がありますでしょうか？
それとも加算の時は明示的にNumberを付けるのが暗黙の了解なのでしょうか？
■index.htmlに以下を追加
<input id="id1" type="number" value="100" />
<input id="id2" type="number" value="50" />
<button type="button" onclick="MyCalc(document.getElementById('id1').value, document.getElementById('id2').value, 'id3');">Calc</button>
<p id="id3"></p>
■app.tsに以下を追加
function MyCalc(a: number, b: number, idOut: string) {
var add: number = a + b; // ←文字列の連結になる
//var add: number = Number(a) + Number(b); // ←数値の加算になる
document.getElementById(idOut).innerHTML = add.toString();
} >>82
html内のJavaScriptから.ts内の関数を呼んでも型を変換してくれるわけじゃないよ
だからaもbも文字列が渡ってきてる つまり、
function MyCalc(a: number, b: number, idOut: string) {
var add: number = Number(a) + Number(b);
document.getElementById(idOut).innerHTML = add.toString();
}
とすべきである、と。
何このゴミ言語。 >>85
MyCalcに文字列を渡してるのは理解してんの？ >>84
tsの引数でnumberと指定しているところにhtmlからstringを渡してるのにエラーでないのが正常ってことですか。
なんとも言えないモヤモヤした気分ですがそういうものだと思って納得します。
ありがとうございました。 そもそも今時htmlファイルにJSのコードがあるのがクソ >>88
> MyCalcに文字列を渡してるのは理解してんの？
誰が何を渡すなんか関係ないよ。
MyCalc()がMyCalc()たり得るためには、>>85のようにしなければならないってことでしょ。 ジェネリックと書かれると黒柳徹子の声で脳内再生されるw
かといってジェネリックプログラミングだと長いか。 英語だとGenericsだからジェネリックスと言うべきだろうね
日本語だとジェネリックが多いけど Microsoftのコードエディタ「Visual Studio Code」β版でオープンソース化、拡張機能で「Go」など約60言語に対応
http://gigazine.net/news/20151119-microsoft-visual-studio-code/ >>96
ちゃんとTypeScriptで書かれてるのが確認出来たし
コーディングスタイルとか色々参考になるな >>97
なるほど。と思った。確かに生きてる教材として価値あるね。 コーディングガイドラインがTS本体と変わってるな
開発元ですらベストプラクティスが固まってないのか VSCodeもElectron使ってるしネイティブアプリもTypeScript＋Electronで作るのがトレンドなんだな ■ このスレッドは過去ログ倉庫に格納されています
