やっと理解したのでメモ 何がしたいか npmパッケージを登録する時にcoffeeやtypescriptのコードをコミットせず生成したjsだけをアップロードしたい 自動生成したjsをgitで管理したくない どうやるか src/** にソース、lib/** に実体があるとする .npmignore に npm にアップロードしたくないものを書く
やっと理解したのでメモ 何がしたいか npmパッケージを登録する時にcoffeeやtypescriptのコードをコミットせず生成したjsだけをアップロードしたい 自動生成したjsをgitで管理したくない どうやるか src/** にソース、lib/** に実体があるとする .npmignore に npm にアップロードしたくないものを書く
Prettier や TypeScript を使うようになって、3年前に構築してぼちぼち保守してきた自分用の共有設定 eslint-config-mysticatea をそのまま使えないことが増えてきました。また、1年ほど前に Glob ベースで設定できるようになっている ので、この際がっつり書き直すことにしました。 ついでに、ESLint 共有設定を作る際のプラクティスのようなものがまとまっていないと感じたので、まとめてみます。改めて整理してみると、本当にバッドノウハウの塊だなぁ...。互換性に縛られずリライトしたいですね...。 新しい共有設定の紹介 新しい設定は @mysticatea/eslint-plugin にあります (eslint-config-mysticatea ではない)。
巷のフロントエンドではReact+Reduxの技術スタックがどちゃクソ流行ってますね! とはいえ、Reduxだとやはりどうしてもひとつアプリを作る際のボイラプレートコードの多さや、ステートの更新によってトリガされる副作用処理のハンドリングをredux-sagaやredux-side-effectsなしではうまくやれないケースが多いです。 もし、Reduxとその周辺ライブラリのよせあつめにちょっとでもツラミを感じ始めたら、Unduxを試すチャンスです。 Unduxとは? Dead simple state management for React Reactのための死ぬほどシンプルなステート管理ライブラリです。 特徴 TypeScriptやFlowなどでの型付けを意識した設計。 ReduxにおけるAction, Reducer, Dispatcher, Containerなどの概念を必要とし
今日はTypeScript2.8で導入されたConditional typesについて書きます。 TypeScriptの型システムへの機能追加という意味では、keyofやMapped Types以来の変更と言ってよいでしょう。 お察しのとおり、こういう機能追加をぶち込んでくるのはAnders Hejlsberg御大です1。
TypeScriptでReactを扱ってるときにReactDOM.renderで意味が分からない型エラーが起きることがあります。 TS2605: JSX element type 'GithubPicker' is not a constructor function for JSX elements. Types of property 'render' are incompatible. Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element | null; }'. Type 'ReactNode' is not assignable to type 'false | Element | null'. Type 'undefined' is not assignable
TypeScriptのissueでたまたまDiff型に対する議論を発見したので現段階での表現方法を紹介します。 Add support for literal type subtraction · Issue #12215 · Microsoft/TypeScript 以下ではissueで紹介されている型の名前と定義を若干変えて紹介します。 Diff型とは何か Diff型とはAとBの型の差分を推論する型です。FlowではUtility Typesとして提供されています。 $Diff - Utility Types | Flow type A = { a: number, b: string } type B = { a: number } type T = $Diff<A, B> // { b: string } & { a?: number } type DiffKey<T extend
追記:2017/07/12 gist連携時の理解が間違ってたので修正 npm 5.2リリース。npmパッケージのダウンロードと実行を一度に行うCLIツールnpxが同梱された / “Release v5.2.0 (2017-07-05) · npm/npm · GitHub” https://t.co/2CXccPBqcq — Teppei Sato (@teppeis) 2017年7月11日 へー、と思って見に行ったら結構面白かったので雑な紹介を書いてみることにする。 v.5.2.0 リリースノート npxの紹介記事 この記事は紹介記事のざっくりしたサマリ相当です。 適当に20分くらい触ってわかったことだけ書いてあるので間違ってたり不正確だったりしたら別途詳解記事を書いて教えてもらえると幸いです。 npx is 何? $(npm bin) やってくれるマン npx tsc は大体 $(np
はじめに Redux + TypeScriptな環境でAction typeに型を定義し、Reducerを型安全に書く方法をTypeScriptのバージョン 1.8 / 2.0 / 2.1 別にまとめてみた。 なお、試したサンプルコードは GitHub にあります。下記の通りTypeScriptのバージョン別にブランチで分けてあります。 TypeScript 1.8版 TypeScript 2.0版 TypeScript 2.1版 また、TypeScript 2.0、2.1はまだリリースされていないので、8/12時点の物を使って確認している(2.0はnpm i typescript@betaで、2.1はnpm i typescript@nextでインストール)。 サンプルの内容 +ボタンをクリックするとカウンタを1つインクリメント -ボタンをクリックするとカウンタを1つデクリメント テキス
以前、本当に2016年1番人気はTypeScriptなのか? - Qiita を書きましたが未だにこの記事が共有されているようです。 この記事は最終更新日から1年以上が経過しています。が見えないのかあんたたちは。タイトルにも2016年と書いてあろうが あの記事見てなんだCoffeeScript使われてんじゃんと思われるのは、よろしくないので2017年度版を更新することにします。 ダウンロード数の比較です。 typescript vs babel-core vs coffee-script - npm trends Babelが頭ひとつ抜けましたね。 TypeScriptも順調に増加しているようです。 おまけ いくつか比較されやすいものも列挙しときます。 gulp vs grunt vs webpack vs browserify vs rollup - npm trends これがいいこと
typescript-eslint-parser を入れようとしてちょいちょいハマった やんごとなき事情でJavaScriptとTypeScriptが混ざっている場合前提なので、TypeScriptオンリーであればここまで困らないと考えられる TL;DR jsとtsが混在している場合、に--ext .js .tsみたいにjsファイルも一緒に食わせると色々コケて上手く使えない typescript用のコマンドにして、configを別途渡そう 一部のルールは上手く動かない 仕方ないけどdisableしよう // eslint-disable-lineとか// eslint-disable-next-line行単位の無効化が上手く動いてない ファイル先頭での指定に切り替えていこう 詳細 Typescript用に別途設定ファイルを用意する だいたいこんな感じで.eslintrc.jsがあると思う。
はじめに どうも、 @Quramy です。 前回の投稿から随分日が経ってしまいましたが、この投稿はある意味で前回投稿の続編的な内容になります。 今日はTypeScript 2.3から導入されるLanguage Service Extensibilityと呼ばれている機能についてまとめてみようと思います1。 どのような変更なのか TypeScript Roadmapのリンクを辿っても、https://github.com/Microsoft/TypeScript/pull/12231 に行き着くだけで、パッと見は何の機能なのかよく分かりません。 このPRの実装を眺めると、次の機能が見えてきます。 tsconfig.jsonのcompilerOptionsに"plugins"というキーが追加されている pluginsに指定した内容は、TypeScript本体からresolveされる すなわち、
追記1: plugins周りに参考Issueや @Quramy パイセンの記事へのリンクを追加。 こんばんは@vvakameです。 TypeScript 2.3 RCがアナウンスされましたね。 What's new in TypeScriptも更新されているようです。 TypeScriptのリリースサイクルの変更がアナウンスされた後の初めてのリリース候補です。 変更点まとめ --target es3 と --target es5 でもジェネレータが使えるようになった Generator support for ES3/ES5 非同期イテレータのサポート Asynchronous iterators async generatorsとasync iterationのサポート for-await-of のサポート --downlevelIteration オプションの追加 Genericsの型
About me @Quramy フロントエンドエンジニア的なことをして生きています。 TypeScript + AngularでSPA作ってます。 2.1 RC is coming! 2016.11.08現在、2.1 RCがリリースされた。 TypeScript blogによると、 async/awaitのDown transpileがES5/ES3でも利用可能に(~2.0ではES2015以上をtargetにしないと使えなかった) 型推論がより賢くなった と書いてある。 2.1.1にどのような変更が入ったかは、 @vvakame先生の記事 に詳しく記載されてる 2.1.4 2.1のRoadmap を読むと、 Static types for dynamically named properties Mapped types というのが載っている。今日の本題はこいつら。 Static ty
Microsoft社製の人気のAltJS「TypeScript」は現在1.8系が最新バージョンですが、2.0へのメジャーアップデートを控えています。本エントリーでは、リリース前のTypeScript 2.0を安全に試す方法を紹介します。 TypeScript 2.0をインストールする TypeScript 2.0はリリース前の為、グローバル環境にインストールすると他のプロジェクトに影響を与える可能性があります。他プロジェクトに影響を与えないよう、グローバルではなくテスト用フォルダの範囲内のみでTypeScript 2.0を使えるようにします。 任意のフォルダを作成し、npm init -yを実行しておきます。
TypeScriptを使う上で欠かせないのが型定義ファイルの取り扱いです。TypeScript 1系では、型定義ファイルを管理するツールとして、tsdやTypingsがありました。TypeScript 2以降は特別なツールはいらず、Node.jsインストール時に付属するnpmのみで型定義ファイルが管理できる機能が開発中です。 TypeScript 2以降で型定義ファイルをインストールする npmの初期設定後、型定義ファイルをインストールするには次のコマンドを実行します。
JavaのSerializableのようなものをJavaScriptで! デコレータ使ってJSONのstringify/parseでオブジェクトを簡単に復元できるようにしてみる。 toJSON 前知識。 JavaScriptの仕様として、オブジェクトにtoJSONを実装しておくとJSON.stringifyの時に参照してくれる。 別のオブジェクト内部にあってもOK。 var obj = { a: 1, b: { c: 1, toJSON: function(){ return 'hoge'; } } }; JSON.stringify(obj); // => "{"a":1,"b":"hoge"}"
JavaScriptのプログラミング技術で2016年1番人気なのはMicrosoft社製のTypeScript。類似の技術であるBabel、Haxe、CoffeeScriptと比べても人気のある技術です。Babelも伸びてはいますが、TypeScriptの方が抜きん出ている状況です。 これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー - Qiita GoogleトレンドによるとTypeScript一強時代に入ったようです。 が、個人的にはGoogleトレンド?それで何がわかるの?と思っているので、npmのダウンロード数を比較してみます。Babelの構文調べるならBabelなんて書かずにES6ってみんな調べるんじゃないかなぁ typescript vs babel-core vs-coffee-script - npm trends だいたいBabe
TypeScript 1.8.0-betaが出ました! 今回のアップデートはかなり多くの更新を含む、大規模なアップデートであると言えます。 いやマジで。 latestタグではなく、betaタグでリリースされたため、npm install -g typescript では未だに1.7.5が入ります。やったね! 1.8.0-betaを試したい時は npm install -g typescript@beta しましょう。 公式ブログとWhat's new、Roadmapから変更点をさらっていきます。 量が多すぎてやばいです。 --allowJs の導入 JavaScriptなコードをTypeScriptコードと混在させて利用可 JSX系の何か Reactは興味ないので割愛したい…したくない?React以外に有用なJSX使ったツールって何かあるのかしら statelessなコンポーネントをより簡
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
[追記] Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。 ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。 laco0416/tsconfig-cli Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。 tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す @laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。 gu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く