TypeScript/Node

C++でCoreText

NodeモジュールでまずはOSのフォント情報を取ろうと思います。Objective-CでやればサンプルもたくさんあるのだけどここはC++で書きたかった。 #include <ApplicationServices/ApplicationServices.h> #include <nan.h> using namespace v8; ApplicationServices/ApplicationServices.hを取り込みます。この中にC</nan.h></applicationservices/applicationservices.h>…

node-gypそしてnanへ。おまけでTypeScript

github.com nodeのアドオンを調べてたら本もなければ情報も少なく、この土日ずっと家族には仕事が忙しくてヤバいという体裁を装い篭ってたので、せめて記録ぐらいは残そうとサンプルを書きました。サンプルは超シンプルになりましたがこれは理解してからシン…

node v10.1.0は回復

node v10.1.0がリリースされていたので、nで切り替えて一通りテストやビルドを動かしてみました。 (node:26203) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.alloc…

node-canvasの型定義備忘

node-canvasの型定義を使うところだけ書いてみたけど目的に敵わなかったので、定義だけ備忘。いつか使うかも。 declare module 'canvas' { import * as Stream from 'stream'; interface PNGOptions { palette: Uint8ClampedArray; backgroundIndex?: number…

@types/nodeは治った

@types/nodeの10.0.4が出てたので試しにupgradeしてみたらTypeScriptのコアLibとぶつかる問題は解決していました。nにまだ10.0.0より後は来てないので本体入れ替えないから定義だけupgradeの意味はないけど、害もなし。

node v10.0.0は地雷

node v10.0.0は地雷バージョンでした。すでに@types/nodeがv10.0.0でTypeScriptのコアLibとURLなどいくつかの型定義が被って爆死という案件がありましたが、今回はts-jestの環境で以下のテストが沈黙してしまうという問題を抱えています。非TypeScriptな素の…

開発ガイドラインとGetting started

内向きに開発ガイドラインとGetting Startedを兼ねたようなものを書こうとしたが、目次だけ書き出したけどこれでも環境作るところだけ、この後にコーディング編とテスト編とリポジトリ&CI&デプロイ編があって、そもそもコーディング編にはSPA章とサーバレ…

gulp v4によるフルTypeScriptなビルド環境

SPAを作るには、webpack等の、色々寄せ集めて一つのJSにバンドルしてくれるツールを用いてビルドしますが、サーバサイドやローカル実行ツールのプロジェクトはそもそもビルドする必要すらありません。しかし、何らかの都合でビルドをしたい場合もあるでしょ…

fontkitを活用したら、ばっちりテキストのBBoxが取れました

github.com 必要なものだけfontkitの定義ファイルを作る。 // @/renderer/headless/fontkit.d.ts declare module 'fontkit' { function openSync(filename: string): Font; class Font { ascent: number; descent: number; unitsPerEm: number; layout(text:…

SVGTextElementのBBoxをpuppeteerで取る

なんでこんなことをしてるのかというのは、プロジェクトがクソ忙しい中できちんと説明できないのですが、ふと面白くなっちゃってd3.jsとdagre.jsでSVGを書いてました。 要件としてはブラウザ上でSVGにてテキストが入ったダイアグラムを描く際に、レイアウト…

続 keyof T

in keyof T - まさたか日記 keyof Tを用いて連想配列でアクセスする際の縛りを前に書きましたが、もっとスマートな書き方を思いついたのでメモ。 test ('power of keyof', () => { function checkObject<T>(props: T): { [N in keyof T]?: string } { return Ob</t>…

.d.tsをどうつくるか

Angularが教えてくれた。 TypeScriptの学びの中で、他のライブラリの型情報をどう手に入れるかは説明されているのだけど、ライブラリとしてどのように型情報を提供するのかはあまり説明されていない。ECMAScriptで書かれたライブラリに後付けでindex.d.tsだ…

React v16、Enzyme v3

昨日から日本に来てます。 facebook.github.io さて、炎上の末にライセンスがMITになったReactのv16がリリースされたと同時期に、Enzymeもv3がリリース。v3からsetupに変化がありました。 Working with React 16.x · Enzyme 説明とおりにしたけど動かねー。C…

TypeScriptでReactのライブラリを作りました

TypeScriptの勉強が嵩じて、一個、Reactのフォーム画面を作るときのめんどくさいところをまとめた小さなライブラリを作りました。 github.com 何がめんどくさいと思っていたかというと、 フォームの一時的状態をどこに持つか悩む。Reduxストアに持つのは大げ…

in keyof T

TypeScript 2.1 · TypeScript このTypeScript2.1で追加されたという keyof演算子をうまくつかうと、オブジェクトのプロパティを縛るのに有用でした。 test ('power of keyof', () => { // 返値のin keyofという受け方が今回の話題。今回Nは捨て型だけど、使…

関数オーバーロード

Functions · TypeScript 上記URLの最後、関数オーバーロード(記事のOverloads項目)なる言語仕様について。まずは以下のようなのがあったとします。 // .tsxファイル まずはこんなのがあったとします。 import * as React from 'react'; type P = { message…

prop-typesか、それに代わる何かが必要な件

これまでReactコンポーネントを書く時、コンポーネントの使われ方を縛るためにprop-typesを用いて動的なチェックをしていました。TypeScriptでは代わって静的な型チェックを利用してprop-typesを使わずとも利用方法を縛るということになってます。しかし、け…

Interfaceのメンバ競合の問題

import * as ReduxActions from 'redux-actions'; import * as Redux from 'redux'; // 型の競合エラーがでる interface ExAction extends Redux.Action, ReduxActions.Action<string> {} 現実感の無い実験のためのこのコードは、今日時点では残念ながらコンパイラを</string>…

The hidden power of Jest matchers

medium.com 素晴らしい記事。これらの「The hidden power」を知らず、expect(rec.prop).toBe(val)の組み合わせをプロパティの数だけ並べてましたよ。 function fn() { return { a: 1, b: true, c: 'hello', d: { d1: 2, d2: false }, e: 3, f: 4 }; } // 今…

トランスパイルに時間がかかってたのでtsconfig.jsonを直した

いつからか、TypeScriptトランスパイルに極端に時間がかかるようになってました。ビルドも、DevServer実行も、テストもすべてトランスパイルが走るのでこれが遅いと開発の勝手全てに影響します。特にtslintが遅くなった結果、エディタで警告やエラー箇所を修…

不慣れによる失敗、配列の宣言

まだTypeScriptが手に馴染むには書いた量が少なく、日々失敗が多い。 type Book = { title: string, vols: [string] }; type BooksPayload = { books: [Book] }; // 正解は、= { books: Book[ ] }; こんなコードを書いていた。意図としてはBookの配列をActio…

Reducerを書くのにhandleAction"s"をやめた

redux-actionsを用いてActionCreatorとReducerを書いていますが、TypeScriptに移行して書き方がちょっと変わりました。 これまではActionCreatorをまとめて作るcreateActionsと、Reducerをまとめて作るhandleReducersを便利に用いてました。しかしTypeScript…

tsconfig.jsonでstrict: trueとするのは時期尚早だった

できるだけ厳しめ環境で書いた方がよろしかろうと、TypeScriptのトランスパイラオプションを最もstrictにしましたが、私の現時点でtsconfig.jsonで、strict: trueとするのは時期尚早でした。 tsconfig.jsonで、strict: trueとする webpack.config.*.tsで、'p…

Reduxでの有用なTypeScriptサンプル

https://github.com/reactjs/redux/tree/master/test/typescript Reduxのリポジトリの中、test/typescriptにReduxでの有用なTypeScriptサンプルがあります。強い型付けでのMiddlewareの書き方とか参考になるもの多い。また、これらのテストは動かさずにコー…

型強化の呪文。noImplicitAny

www.infoq.com 上記記事をたまたま読んで目にした呪文。noImplicitAny。 Over time, they reached the point of enabling advanced compiler options, such as –noImplicitAny to prevent the compiler from inferring an any type. advancedってすごいな。…

TypeScriptでもリリースビルドする

TypeScriptの8つめ。 Productionをやります。 // webpack.config.production.ts import * as path from 'path'; import * as webpack from 'webpack'; export default { entry: './ts/index.tsx', output: { path: path.resolve('static/js'), filename: 'bu…

Atomを入れてTypeScriptを書く

TypeScriptの7つめ。 愛用のWebStormでTypeScriptを研究しつつ、おまけでAtomをインスコしてサンプルを作るときの清書プラットフォームとして使って見ました。 Homebrew-Cask 私はHomebrewでNodeもYarnも入れてますので、Atomも。MacOS向けGUIインストーラー…

TypeScriptでもReduxのHMR対応しておきましょう

TypeScriptの6つめ。 HMRには3段階あって、非Reactアプリ、Reactアプリと続いて最後にReact+Reduxアプリに到達します。 // /store/Store.ts import { createStore, combineReducers, applyMiddleware } from 'redux'; import { routerReducer as router, rou…

TypeScriptでもHMRを実現する

TypeScriptの5つめ。まだまだ続きます。 $ yarn add react-hot-loader@next $ yarn add @types/webpack-env -D react-hot-loaderは3.0.0-beta.7が入りました。そして@types/webpack-envを!これが自分的には一番ヤバい。見つけるのに苦労した。 // webpack.c…

TypeScriptでもJest+Enzyme

TypeScriptの4つめ。 Lintができたらテストもちゃんとやっとく。最近覚えたJestそしてEnzymeでやります。 $ yarn add jest enzyme react-test-renderer ts-jest @types/jest -D jestとenzymeを加える他に、@types/jestが必須です。必須ではないですが@types/…