LoginSignup
5
5

More than 5 years have passed since last update.

@bonk

typescriptのお勉強

Last updated at Posted at 2016-08-17

typescript 公式
https://www.typescriptlang.org/
https://github.com/Microsoft/TypeScript
https://www.npmjs.com/package/typescript

jakeってなに。。

typings 公式
https://github.com/typings/typings

記事を検索してざっと読む

mar10/fancytree: Tree plugin for jQuery with support for persistence, keyboard, checkboxes, tables (grid), drag'n'drop, and lazy loading.
https://github.com/mar10/fancytree

これをtypescirptでつかえるようになれるかどうか。。

retyped/jquery.fancytree-tsd-ambient: TypeScript typings for jquery.fancytree
https://github.com/retyped/jquery.fancytree-tsd-ambient

これがその事例っぽいけど、まだ見ても具体的なイメージがわかない。
疑問としては、ツールの使い方、基本。
インクルードするライブラリはどこに置くのか、npm的なパッケージャーがあるのか。

jquery.fancytree-tsd-ambient/jquery.fancytree.d.ts at master · retyped/jquery.fancytree-tsd-ambient
https://github.com/retyped/jquery.fancytree-tsd-ambient/blob/master/jquery.fancytree.d.ts

typescriptの定義が揃っているレポジトリ。すごいたくさんある。

npmモジュールをTypeScriptで利用する(tsdによる型ファイル管理) - $shibayu36->blog;
http://blog.shibayu36.org/entry/2016/01/18/091426

2016/1/18（あくまで閲覧時点）
tsdの基本的な使い方って感じか。
lodashってなに？
tsdの設定について、ふむふむ。
    save-devね
    tsd.jsonが設定ファイル
        pathが定義ファイルの置き場
        bundleが定義ファイルの一覧
    tsdコマンドで定義ファイルを取得できる！おう！
    コンパイルは、、別途記事参照か。ふむふむ。
勉強になった。

React + Redux + Typescriptシリーズ（随時更新） - Qiita
http://qiita.com/uryyyyyyy/items/1f2022bbf914d65d635a#_reference-37b37a14e3613a9dbf96

2016/7/30（あくまで閲覧時点）
近しい技術周辺の最近の流行の最先端的なことが見えていい感じ。

React + TypeScript + Webpackの最小構成 - Qiita
http://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb

私がTypeScriptについて勘違いしていたこと、そしてその理由 | プログラミング | POSTD
http://postd.cc/i-was-wrong-about-typescript-here-is-why/

私はTypeScript Sublime Pluginをインストールし、ネイティブHTML要素での幾つかの自動補完サジェストを試しました。

なるほど。

Type Definition(型定義)
ファイル名は*.d.ts

typingsの定義ファイルは
typing.json

APIの定義を覚えたり覗いたりする必要がなくなり、APIを利用するのが簡単になりました。リファクタリングももっと簡単になります。

なるほどー。

言い換えれば、TypeScriptはasync/awaitをサポートしているが、それを全ブラウザで理解可能なECMAScriptにコンパイルすることはできません。この機能を使わないのであれば、ビルドプロセスからBabelJSを消してしまっても構わないのです。

ほー。

非推奨になったtsdってどういうこと。

TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
http://developer.hatenastaff.com/entry/2016/06/27/140931

最近、長らく TS の型定義ファイル管理ツールであった TSD が非推奨になり、Typingsが登場しました。
TSD にはいくつが問題点があったのですが、特に型定義ファイルの global な読み込みについてこのエントリと関連深いため触れておきます。
...
実際の JS は module 化されているので $ オブジェクトは存在せず、実行時エラーとなります。 これを解決するには import しているファイルでのみ定義ファイルを referenceタグ( /// )を使って読み込む等の地道な作業が必要でした。

ふむふむ。型チェックは通っても実際には存在しなくてエラーになるみたいなのがtypingsでは解決していると。
他の部分もわかりやすくて勉強になる。

設定ファイルの記述はtsdのDT（DefinitelyTyped：定義ファイル）プラスアルファ。。


公式のアナウンス
https://blogs.msdn.microsoft.com/typescript/

今は、TS2.0β版

TypeScript超入門：とりあえず動く環境を作る - Qiita
http://qiita.com/ringtail003/items/40c7e74b72ce5a371c46

tsdの使い方という意味でわかりやすい

typingsについて

導入事例
http://qiita.com/koichirokamoto/items/4b7c7e4b8fd0bca05055

WebStormでtypingsを使ってTypeScriptの定義ファイル管理 - Qiita
http://qiita.com/MugeSo/items/c9a9c35a6d172d9a1c54

tsdからtypingsへの移行はマニュアルにあるように、たった3コマンド(ディレクトリ移動含まず)で完了
...
typingsではmainとbrowserの二つをtypingsディレクトリ内に配置するため、両方を読み込むと衝突してしまう
...
tscが混乱しないようにtsconfig.jsonのexcludeにプロパティ

ということは、typingsへの対応したDTファイルが結構多い状態なのかな。。

typings公式
https://www.npmjs.com/package/typings

コマンドの使い方はnpmに似てるな。。

TypeScriptのtsdが非推奨になったので、typingsへ移行 - Qiita
http://qiita.com/ueokande/items/19bb6a22b1285622d2c7

tsdとtypingsの型定義ファイルは互換性は無いようです。しかしtsdのDefinitelyTypedはtypingsからも使うことができます。

おお、なるほどambientをつけるとDTファイルが使えるのね。

ライブラリ名にambientが付いていたらtypings対応済みってことか。。
https://github.com/retyped

つかってみたら、--global使えとか言われたりもした


ここにある--source dt指定は必要になりそう
記法は下記でも良いみたい。

typings install dt~react --global --save

reactのjsxを使うために、、

うまくいかない。。

typescriptのバージョンを1.9から2.1にかえて若干調整して動いた気がする。。メモが残ってない。

npm install -g typescript@next

reactの一色の事例

http://source.coveo.com/2015/11/21/using-react-jsx-with-typescript/
http://qiita.com/kimamula/items/11873444e6a4df19df37

react-dnd-treeviewを眺める

独自定義は別ディレクトリに分けて開発するみたい。

定義ファイルってある程度自動で生成してくれたりしないのかな？？

typings.d.tsという名前のファイルがあるのが不思議だが、基本的にはtypingsではなくtsdを使っているようだ。
typingsにしてみようっと。

この記述がわからない。。
別環境（typings導入）で真似しようとしたらエラーになってしまった。
エラーは多分、tscのコンパイルがうまくいかずに該当箇所の型定義が変な形でコードに残ってしまっていた。
記述を消したら動いたので型チェック的な部分だと思うけど。。

* interfaceってどういうこと？
* クラスのための型定義のためのインターフェイスをnodeの記述で指定できるっぽい。
 http://tsudoi.org/weblog/?p=3292
http://qiita.com/nogson/items/86b47ee6947f505f6a7b
* chidren?:の記述はどういう意味？
* 関数の引数だとオプショナルの引数
* インターフェイスだとオプショナルプロパティ
 * https://www.typescriptlang.org/docs/handbook/interfaces.html
* クラスのプロパティが省略可能かどうか指定の追加（Optional properties in classes）
http://qiita.com/vvakame/items/ae239f3d6f6f08f7c719
* readonlyってなに？
* http://qiita.com/vvakame/items/ae239f3d6f6f08f7c719
> readonlyである事を明示できる修飾子
> constと違いmutableなので別の箇所から変更される可能性があります。

わかったけどなんでコンパイルがおかしくなったのかはまだわからない。。

あれ、いま再度やりなおしたら、うまく動いた。。
コンパイルがうまくいかなかった時には、postcssのエラーが出ていたからそれのせいかも。。
（その後インストールした）

だめだ。。
コンパイルの際にセミコロンとかのエラーが出ている。
ググってみると、typescriptの1.8.10で同じ症状がありそうだったので、
バージョンアップさせてみることに。

bash-4.3$ tsc -v
Version 1.8.10
bash-4.3$ npm install -g typescript@next
/usr/local/Cellar/node/5.6.0/bin/tsc -> /usr/local/Cellar/node/5.6.0/lib/node_modules/typescript/bin/tsc
/usr/local/Cellar/node/5.6.0/bin/tsserver -> /usr/local/Cellar/node/5.6.0/lib/node_modules/typescript/bin/tsserver
/usr/local/Cellar/node/5.6.0/lib
└── typescript@2.1.0-dev.20160819

bash-4.3$ tsc -v
Version 2.1.0-dev.20160819
bash-4.3$ tsc -p .
index.tsx(5,18): error TS2600: JSX element attributes type '({} & { children?: ReactNode; }) | ({} & { children?: ReactNode; })' may not be a union type.
typings/globals/node/index.d.ts(384,11): error TS2430: Interface 'NodeBuffer' incorrectly extends interface 'Uint8Array'.
  Types of property 'fill' are incompatible.
    Type '(value: any, offset?: number, end?: number) => Buffer' is not assignable to type '(value: number, start?: number, end?: number) => this'.
      Type 'Buffer' is not assignable to type 'this'.

よくわからないままググってエラーを解決してみる。
https://github.com/typings/typings/issues/554

TS2600

わすれた。
たぶん、cssファイルが見つからずにコンパイルが途中で失敗したとかだった気がする。。

TS2430

typings install env~node -SG

あとから修正しようと思ったけど、再現しなかった。

typescriptのバージョンを上書きしてしまっていたために起きていた。下記に戻したらいけた。
1.9.0-dev.20160420

でも、tsdのnodeが1.8想定になっていて、、、env-nodeとか、、
typingsに移行してtypescriptをバージョンアップ（2.1.0-dev.20160816確認）するのが良さそう。。

参考
http://www.buildinsider.net/language/quicktypescript/01

interface TestNode extends TreeNode {
  readonly title: string;
  readonly children?: TestNodeList;
}

若干話がそれるがreduxに対応

setStateをアプリから呼び出しているのをactionCreater経由にする感じか。。するかどうか。。

参考
http://qiita.com/HIGAX/items/dbaf31d4c41c510f84f9

現段階の手探り状態で深掘りするための不明点を明かしてくれそうな記事

TypeScript 2.0 Beta 変更点
http://qiita.com/vvakame/items/ae239f3d6f6f08f7c719

一旦保留。

別件PostCSS

PostCSSってなに。。おいしいの？

タッチイベントとマウスイベントを両方使えるようにしてみる

ontouchstartで判別する関数を挟んでみたらひとまず動いた。

const isTouchDevice = () => {
    let result = false;
    if (window.ontouchstart === null) {
        result = true;
    }
    return result;
};
export const DraggableApp = DragDropContext(
(isTouchDevice() ? PointerDragDropBackend : HTML5DragDropBackend))(App);

phpstormのtypescriptの設定

バージョンを2.1にあげたので、bundleの1.8だとうまくいかなかったので変更した。。
しかし、他のディレクトリとバージョンが違ってしまっているので、他のディレクトリがうまく動かないだろうな。。
ある程度は上位互換だろうか。。
reduxのroutes以下がそれぞれ違ってしまうような場合には、別プロジェクトにするべきなのか。。

react-dndでコンテキストをデバイスごとに切り替えてみた

一応うまく動いてるっぽい。

const isTouchDevice = () => {
    let result = false
    if (window.ontouchstart === null) {
        result = true
    }
    return result
};
export const MyContext = DragDropContext((isTouchDevice() ? PointerDragDropBackend : HTML5DragDropBackend));

react-reduxとreact-dndの組み合わせ

Refs Must Have Owner Warning
のエラーが出てしまう。。動いてはいる。。
react.componentも継承しているんだけど、
そのあとでコンテキストを設定することで怒られている気がする。

もう、わからんーー。

invariant.js:38Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Refs Must Have Owner Warning | React
https://facebook.github.io/react/warnings/refs-must-have-owner.html

Quick start · TypeScript
https://www.typescriptlang.org/docs/tutorial.html

React + Redux + TypeScriptの最小構成 - Qiita
http://qiita.com/uryyyyyyy/items/3ad88cf9ca9393335f8c

react-redux DragDropContext - Google 検索
https://www.google.co.jp/search?q=react-redux+DragDropContext&oq=react-redux+DragDropContext&aqs=chrome..69i57l2j69i59j69i65l3.6509j0j7&sourceid=chrome&ie=UTF-8

React + Redux + D3.js アニメーション：ドラッグ&ドロップでキングスライムを作った - Push: Ctrl+Y
http://xiao-ctrl-y.com/2016/07/19/react-redux-dnd/

ReactMotionでスライムを動かす話 - Push: Ctrl+Y
http://xiao-ctrl-y.com/2016/07/20/react-redux-motion/

ReactでDrag&Drop - Qiita
http://qiita.com/t-hiroyoshi/items/137bc9b4b4b21865ba76

typingsのチェックの回避（？）

モジュールの読み込みを増やすたびにtypings installをすることになりそう。
しかし、importではなくrequire文を使ったらno moduleのエラーが出なかったので一応メモしておく。
例えば、下記とかはDTファイルがないためにインストールできなかった。
うーん、ちゃんと理解してないと無理があるなあ。。

bash-4.3$ typings install dt~react-dnd-touch-backend --global --save
bash-4.3$ typings install dt~react-dnd-touch-pointer-events-backend --global --save

グローバルな変数

declare var bootbox: any;

declare function f(): void;

memo

略称がいろいろわかりにくい気がする。。

  • トランスパイラって？
    トランスコンパイラの略で機械語を生成しないし、中間コードでもない他の言語に変換するソフトウェア（コンパイラ）

  • tsd
    DefinitelyTypedの管理ツール

  • DT
    DefinitelyTyped：定義ファイル

react-dnd-treeviewを改めてみる

あれ、ノードに対してのドラッグができない。。これは困った。。
ソースコードには、、下記のようにある。。これかな。。。ここまできてショック。

emptyというnodeをいれて対応してみたが、、
空になったかどうかの判定がchildrenの個数カウントではできないしややこしい。
treeview側の処理に手を入れるほうがいいのか。。
難しそう。。
クリックで子供にするとかかしら。
なんかもう、、つかれてきたな。。
それとも、いよいよフォークをしてみるときがきたのか、、
tree系じゃないd3とかでできないか検討するか、、

// TODO: add a mechanism to apply the CSS equivalent:
// .nodePositioningWrapper:hover {
//   /* otherwise drop targets interfere with drag start */
//   z-index: 2;
// }

immutable.jsについて調べつつフォークしたコードをいじる

とりあえず、目的のD&Dの改善は行えた。特に設計的なところは深く考えずではあるが、一旦、よし。

Immutable.js
https://facebook.github.io/immutable-js/docs/#/Iterable/Iterable

web帳 | Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ！
http://www.webcyou.com/?p=7274

Upgrading to Immutable v3 · facebook/immutable-js Wiki
https://github.com/facebook/immutable-js/wiki/Upgrading-to-Immutable-v3

Creating array of length n with random numbers in JavaScript - Stack Overflow
http://stackoverflow.com/questions/34966459/creating-array-of-length-n-with-random-numbers-in-javascript

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5