Writing a Custom TypeScript AST Transformer
IntroductionIn my first blog post I would like to walk through a problem I solved recently using TypeScript’s compiler API. I am certain that I would not have been able to get something working without the help of various blogs and StackOverflow answers, so it felt quite selfish to not write about my learnings around a powerful yet lightly documented set of tools. Topics touched onTypeScript compi
Mapped Typesのあれこれ
Mapped Typesの基本形 Mapped Typesの基本形は { [P in K]: T } です。 P は T の中で使える型変数です。このとき、 P はこのMapped Typeの引数型 (parameter type) K はこのMapped Typeの制約型 (constraint type) T はこのMapped Typeのテンプレート型 (template type) と呼びます。 T の中で P がどのように振る舞うかに注目すると type Element<P extends K> = T; という形の定義と相似であることから、P が引数型、 K が制約型と呼ばれる理由がうかがえるかと思います。 Mapped Typesの基本形で、 T が P に依存しないケースには Record<K, T> という名前がついています。 type Record<K extends
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
TypeScript で幽霊型っぽいものをつくる
この実装だと当然エンコード済みの文字列も渡せてしまい、多重エンコードが起きる。未エンコードの文字列だけが渡ってくることをコンパイラレベルで検出したい。 幽霊型（Phantom Type） こういうとき、他の言語ではよく幽霊型が用いられる。次のリンク先は Scala での実装例を紹介している https://www.slideshare.net/AkinoriAbe1/aja-2016623 // 上記スライドの 6 枚目より class Str[T] (val str: String) trait Normal trait Encoded def encode(x: Str[Normal]) = new Str[Encoded](...) 内部では利用されない型パラメータ（ Normal Encoded ）を使って、Str[T] にはそういう種類があること、 Str[Normal] と S
JavaScript・TypeScriptのimport・exportの依存関係を可視化するcode-dependencyの紹介 - Qiita
追記情報 v0.5.0で.vueの拡張子もサポートするようになりました。 はじめに 現在のJavaScriptはexport、importによるモジュールの切り離しと結合が可能であるため。大きなプロジェクトに成長させることができます。 実装が進むにつれてファイル間の依存が複雑になっていき、実装全体の依存関係を把握するのが難しくなっていきます。これはプロジェクトに対して新しいメンバーが増えたときに、コードリーディングの時間を十分に取る必要があります。また、OSSのライブラリに貢献したいときも同様の状況が生まれるでしょう。特に後者は開発メンバーが近くにいるとも限らず、他国の方である可能性も十分に高いため開発に参加するための準備が必要になります。 このような、全体の依存関係の設計を見直したい場合や、新たに開発に参画する場合により短時間に理解を深めるためのツールを作成したので紹介します。 @cod
react-redux の Hooks API に Generics は要らない - Qiita
export type StoreState = { hoge: { hoge: 'hoge' } fuga: { fuga: 'fuga' } } StoreState の型定義方法は数通りありますが、この様な型定義があることが前提です。 普通に書くとこうなる この条件でuseSelectorを利用してみます。useSelectorの Generics に従い、都度StoreStateを import し、それを注入しています。なんだかあまりイケてません。 import { useSelector } from 'react-redux' import { StoreState } from '../store' const Container: React.FC = () => { // const _hoge: "hoge" const _hoge = useSelector< St
Nominal typing techniques in TypeScript - Michal Zalecki
software development, testing, JavaScript, TypeScript, Node.js, React, and other stuff Many functional programming languages like Haskell or Elm have a structural type system. This perfectly lines in with the direction in which majority of JavaScript’ish community is heading. Nevertheless, every feature comes with a certain set of trade-offs. Choosing structural type system allows for a greater fl
React + TypeScript (+ Electron)でアプリを書き始めるときにやってること - Qiita
diff --git a/tslint.json b/tslint.json index eb5d66a..2b86576 100644 --- a/tslint.json +++ b/tslint.json @@ -1,99 +1,3 @@ { - "extends": ["tslint-react"], - "rules": { - "align": [ - true, - "parameters", - "arguments", - "statements" - ], - "ban": false, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": false, - "forin": true, - "indent": [ tru
TypeScript で Generator についてまなんだ - bouzuya.hatenablog.com
@hiroqn が書いた『実例とともに学ぶECMAScript 2015 〜Generator〜 – NET BIZ DIV. TECH BLOG 』を TypeScript で写経して Generator について学んだ。 関連 Tweet は次のとおり。 良記事 / “実例とともに学ぶECMAScript 2015 〜Generator〜 – NET BIZ DIV. TECH BLOG” https://t.co/UUPy4Byahe— bouzuya (@bouzuya) 2016年6月17日 https://t.co/o1QzLNXVzZ を写経 & 問題を解いた。TypeScript だと問題のある記述がぱらぱらとあった。ぼくの解答は↓。https://t.co/srBiykQeOG— bouzuya (@bouzuya) 2016年6月19日 結果の Gist は https
create-react-appでTypeScript用のReact開発環境を作る(入門者向け) - Qiita
React Advent Calendar 2016 に空きがあったのでねじ込みました。 仕事ではないけど普段はAngularでフロントエンドを書いています。ちきさんです。 関数型ReactでビジュアルFizzBuzz があまりにも読みやすいソースコードで、読んでるうちに僕もReactが書ける気がしてきたので挑戦してみました。 ところでAngularにはangular-cliという環境構築ツールがあります。 オレオレ環境構築は過去に散々やってきたので、またReactでオレオレは嫌だなと思っていたらツイッターで facebookincubator/create-react-app の存在を教えていただきまして、使ってみたらあっさり環境が出来上がったのでワオと思ったのですがコレ当然なんですけどJavaScript用の環境なんですね。 そのままではTypeScript脳の僕には使えないので仕方な
neue cc - linq.jsのTypeScript対応とTypeScript雑感
MicrosoftからTypeScriptという新言語が発表されました。驚くべきは、あのC#のAnders Hejlsbergが関わっている！これはもう触るしかない。そしてこれはコンパイル後にJavaScriptになる言語(CoffeeとかJSXとかみたいな)なわけで、じゃあlinq.jsを対応させるしかない！というわけで、させました。 // TypeScript Enumerable.range(1, 10) .where(x => x % 2 == 0) .select(x => x * x) .writeLine(); // コンパイル後 Enumerable.range(1, 10).where(function (x) { return x % 2 == 0; }).select(function (x) { return x * x; }).writeLine(); ひゃっはー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Writing TypeScript custom AST Transformer (Part 2)
TypeScriptの設定の良し悪し
TypeScript: Index signature is missing in type
GitHub - wmonk/create-react-app-typescript: DEPRECATED: Create React apps using typescript with no build configuration.