問題 TypeScript (2.0.10) において次のように利用するための foo.d.ts の書きかたが分からない。 import * as f from 'foo'; const n: number = 123; const s: string = f(n); console.log(s);

この記事は (bouzuya) PureScript Advent Calendar 2016 の 10 日目。 (bouzuya) PureScript Advent Calendar 2016 は bouzuya の PureScript 学習の記録だ。 ← 9 日目『 PureScript IDE (Visual Studio Code 拡張) の紹介 - Qiita 』 → 11 日目『 PureScript by Example 4 章の後半を読む - Qiita 』 概要 PureScript by Example と PureScript Language Guide を見ながら進めていく。今日は PureScript by Example の 4 章 の前半を読む。 ※注意事項: 英語と日本語訳では大きな差異がある。0.10.x に対応している英語の側で進める。 PureS

この記事は (bouzuya) PureScript Advent Calendar 2016 の 4 日目。 (bouzuya) PureScript Advent Calendar 2016 は bouzuya の PureScript 学習の記録だ。 ← 3 日目『 PureScript の build toolpulp を動かしてみる - Qiita 』 → 5 日目『 PureScript by Example 1 章を読む - Qiita 』 概要 4 日目にして、いまさらだけど Getting Started with PureScript を見る。見ながら、 psci の残りのコマンドを見ていく。 公式 の LEARN を開いたらリンクがあったので、漏れを確認する意味で見ていく。 準備 環境構築まわりの次の手順は 1 / 2 / 3 で触れたのでスルー。

この記事は (bouzuya) PureScript Advent Calendar 2016 の 2 日目。 (bouzuya) PureScript Advent Calendar 2016 は bouzuya の PureScript 学習の記録だ。 ← 1 日目 『 PureScript のインストールと内容確認 - Qiita 』 → 3 日目 『 PureScript の build toolpulp を動かしてみる - Qiita 』 概要 今日は PureScript の psci を試してみる。 環境は前回の続きを想定している。 psci をまず動かしてみる npm i -D purescript のあと $(npm bin)/psci すると次のようなエラーが表示される。 $ $(npm bin)/psci PSCi requires the psci-support

この記事は (bouzuya) PureScript Advent Calendar 2016 の 1 日目。 (bouzuya) PureScript Advent Calendar 2016 は bouzuya の PureScript 学習の記録だ。 → 2 日目『 PureScript の Interactive mode (psci) を動かしてみる - Qiita 』 概要 今日は PureScript のコンパイラーなどを含む purescript パッケージ (0.10.2) をインストールする。 インストール方法 PureScript の DOWNLOAD を見るといくつかのインストール方法があるようだ。 GitHub から Binary を得る NPM Homebrew Stack NPM でインストール ぼくは NPM を選択した。理由は次の 3 つ。 Getting

概要 WHATWG Streams のことを何回かに分けて書く。Kyoto.js #11 の『 WHATWG Streams をためした 』という発表のために調べたものだ。発表だけで終わらせるのはもったいないので、再整理して共有する。 前回は『 WHATWG Streams の Stream と Pipe chain - Qiita 』。今回は (Underlying) Source と (Underlying) Sink のことを書く。 また Source / Sink については概要に留め、それぞれの使いかたなどの詳細は別途記載する。 データの発生源 ReadableStream に wrap される Push / Pull の 2 種類の違いを吸収し、ひとつの interface で表す Push Source 例: TCP ソケット Pull Source 例: ファイルハンドル

概要 WHATWG Streams のことを何回かに分けて書く。Kyoto.js #11 の『 WHATWG Streams をためした 』という発表のために調べたものだ。発表だけで終わらせるのはもったいないので、再整理して共有する。 今回は次の 3 つを書く。 WHATWG Streams の提供する Stream クラス それらの Stream でつくる Pipe chain Pipe chain を流れる chunk Stream クラスについては概要に留め、それぞれの詳細は別途記載する。 3 つの Stream クラス WHATWG Streams は次の 3 つの Streams クラスを提供している。 ReadableStream WritableStream TransformStream 今回はあくまでも概要だけを書く。 1. ReadableStream 読み取りのための

問題 CSS で underline に animation をつけたい。 解決策 ::after / :hover / display / transition / width を組み合わせることで実現できる。 例 結果は https://jsfiddle.net/666xcjhj/ . a { text-decoration: none; } /* reset default css */ a { display: inline-block; } a::after { content: ""; display: block; width: 0; transition: width 0.3s; border-bottom: 1px solid #f00; } a:hover::after { width: 100%; } 解説 ::after を underline として利用する。 t

概要 Babel と TypeScript の ES6 modules の import の挙動の違いについて確認する。 Application 内部では Babel ・ TypeScript を同一設定で使うはずなので問題は起きない。しかし、外部の npm package を利用する際には問題が起きる。 各状況ごとにどう書けばいいのかの参考情報をまとめる。 将来的には、このようなまとめが不要になることを期待する。 前提 Babel 6.6.5 es2015 preset TypeScript 1.8.7 allowSyntheticDefaultImports (export = foo を import foo from 'foo'; できる) 各変換結果 1. Babel import ... from '...'; 'use strict'; var _foo = require(

RxJS における ConnectableObservable を返す (Cold / Hot 変換) OperatorsReactiveExtensionsRxJSRx この記事は bouzuya's RxJS Advent Calendar 2015 の 17 日目かつ RxJS Advent Calendar 2015 の 17 日目です。 はじめに 今日は ConnectableObservable を返す、いわゆる Cold / Hot 変換と呼ばれている Operator を見ていきます。 詳細は RxJS 4.0.7 を参照してください。 サンプルコードは以下のコマンドで試しています。 $ npm i rx babel-cli babel-preset-es2015 $ $(npm bin)/babel --presets es2015 index.js -o out.js

この記事は bouzuya's RxJS Advent Calendar 2015 の 2 日目かつ RxJS Advent Calendar 2015 の 2 日目です。 はじめに 今日の内容は公式リポジトリにあるドキュメント Exploring The Major Concepts in RxJS とほとんど同じものです。 また RxJS 4.0.7 を対象にしています。 Obervable と Observer RxJS における最も基本的なクラス Observable / Observer の概要を確認します。 Observable はデータソースを表すクラスで、名前どおり observe できる何かです。Observable からデータを受け取るには subscribe(observer) メソッドを呼び出します (メソッド名は observe ではありません) 。subscri

この記事は bouzuya's RxJS Advent Calendar 2015 1 日目かつ RxJS Advent Calendar 2015 の 1 日目です。 RxJS とは何か？ RxJS とは The Reactive Extensions for JavaScript のことです。これは Reactive Extensions の JavaScript 向けの実装です。 Microsoft Open Technologies, Inc. により開発されています。 公式のリポジトリは Reactive-Extensions/RxJS にあります。v5 (alpha) は ReactiveX/RxJS にあります。 Reactive Extensions (Rx) とは何か？ もともとは C# 向けのライブラリです。各言語向けに実装が提供されています。ここでは RxJS (v4