4 ステップでモダンな tsconfig.json を作る - mizdra's blog
tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦いいから、モダンで最小限の tsconfig.json がすぐに欲しい！！！」。そうした声に応えて、id:mizdra がオススメする「4 ステップでモダンな tsconfig.json を作る方法」
誤解されがちなnever型の危険性: 「存在しない」について - Qiita
never型はTypeScriptに存在する型のひとつで、「存在しない値の型」として説明されることが多いものです。 この説明は正しいのですが、誤解されることがあると感じました。そこで、今回はnever型に関する誤解を解くための記事を用意しました。ぜひこの記事を読んで、never型について正しく理解しているかチェックしてみてください。 never型とは never型は、上述の通り、「存在しない値の型」です。言い換えれば「never型の値は存在しない」ということです。こんな簡潔な説明ですが、never型は奥深い性質を持っています。 まず、「never型の値は存在しない」というのがどういうことか理解しましょう。これは、どんな値もnever型には代入できない（never型の値ではない）ということです。このように、never型の変数には、何を代入しようとしても全てエラーになります。
EmacsでTypeScript環境を整える - $shibayu36->blog;
ScalaにつづいてTypeScriptも勉強しようと思ったので、まずはエディタのセットアップをした。 typescript-mode とりあえずtypescript-modeというのがあるので、それを入れる。M-x package-list-packagesしてtypescript-modeをインストールする。その後以下の設定を入れておけば良い。 (require 'typescript-mode) (add-to-list 'auto-mode-alist '("\\.ts\\'" . typescript-mode)) flycheck、補完、型情報の表示、定義ジャンプ tss.elとtide.elというのがあった。tide.elは公式が提供しているtsserverのインターフェースに則って補完や定義ジャンプができるので、こちらを利用することにした。まずpackage-list-pa
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
TypeScriptは型安全じゃないからすばらしい - まめめも
「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し
Rails vs Node.js
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
export {}; が使われるTypeScript特有の事情
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
React×Typescript Eventの型まとめ
type Props = { onClick: (event: React.MouseEvent<HTMLInputElement>) => void onChange: (event: React.ChangeEvent<HTMLInputElement>) => void onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void onBlur: (event: React.FocusEvent<HTMLInputElement>) => void onFocus: (event: React.FocusEvent<HTMLInputElement>) => void onSubmit: (event: React.FormEvent<HTMLFormElement>) => void onClickDiv: (
<T, K extends keyof T> をちゃんと理解する
TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons
Readonly 使ってますか？
ムーザルちゃんねるのムーです。今回は TS の Readonly を使うか否か zaru さんと会話しました。 以前の zaru さんのこちらの記事 Reactのpropsはreadonlyにするべきか？で、Readonly については記載していますが、今回会話をする中で改めて気づいた知見などがあったのでシェアしたいと思います。 動画本編の中でも Readonly の罠として二つ紹介していますが、それらについて書いておきたいと思います。 その1 immutable なオブジェクトを mutable なものにアサインすると、変更できてしまう。 これはよく知られている挙動だと思います。 具体的には以下のようなコードです。 interface Cat { readonly name: string; } const cat1: Cat = { name: "Alice" }; cat1.name
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
TypeScriptの導入にあたって考慮すべきメリットとコスト
皆さんこんにちは。京都開発室のLinです。仕事と個人的なプロジェクトでTypeScriptによる開発を始めて約2年が経ちましたので、 TypeScript導入時の経験を皆さんにお話ししたいと思います。 近年、TypeScriptはフロントエンド分野で最も注目を集める技術となっています。The State of JavaScriptの資料によれば、TypeScriptの使用を選択する開発者は増加を続けており、その評価も肯定的なものが多いようです。 「次のプロジェクトではTypeScriptにより開発を行うべきだ」「今あるJavaScriptプロジェクトをTypeScript仕様に変更すれば、プロジェクト品質の向上につながる」と考えているチームは数多くあるでしょう。 しかしながら、TypeScript導入のコストおよびメリットについては、極めて慎重に評価を行う必要があると、私は考えています。
TypeScriptを導入する前に考慮したほうが良いこと 4項目 - タオルケット体操
補足：2021年6月 結構昔に書いた記事ですが、今でもたまにアクセスがある（ありがとうございます）ようなので使命感に駆られて追記。 本編の冒頭にもあるように、これは2018年の記事です。なので色々と書いてますが、2021年の人間の立場からTypeScriptの導入について申すのであれば一言です。 使いましょう。 もはや「TypeScriptを使う理由」とか言ってる時代はとっくの昔に終わっています（Elmとかそういう、他の型付きAltを使いたいなら別ですが）。 もちろんstrict mode一択ですからね。 当時は採用云々とか書いてましたが、逆にいまTypeScript書けるかどうかってのはフロントエンドエンジニア採用の足切りラインとしてちょうどいいくらい（書けるってのが程度かにもよりますけど）だとおもいます。 好き嫌いはともかく、TypeScriptを使えないエンジニアを雇ってもフロントエ
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
TypeScriptの`Object`型と`object`型と`{}`型の使い分けについて - 角待ちは対空
TypeScriptには似たような型としてObject型とobject型と{}型が存在します。 let o1: Object; let o2: object; let o3: {}; 今回はこの3つの使い分け、あるいはobject型導入の経緯についてです。 JavaScriptのデータ型 JavaScript のデータ型とデータ構造 - JavaScript | MDNを読めば分かるように、 Boolean Null Undefined Number String Symbol の6種のプリミティブ型を持つプリミティブ値とオブジェクトでJavaScriptは成り立っています。 TypeScriptにおけるobject型とはここでいうプリミティブ型以外を表現しています。 object型はいつ使われるのか いつ役に立つかというとObject.create()の定義です。 TypeScript/
マイクロソフトがGitHubに登場。TypeScriptのプロジェクトをCodeplexからGitHubへ移行
マイクロソフトがGitHubに登場。TypeScriptのプロジェクトをCodeplexからGitHubへ移行 「みなさんからのフィードバックを受けて、GitHubへ移行しました」（We’ve heard your feedback, and we’re making the move to GitHub.）。米マイクロソフトはオープンソースで開発しているプログラミング言語「TypeScript」のプロジェクトを、それまで使用していたCodeplexからGitHubへ移行したことを明らかにしました。 これまでTypeScriptは同社のオープンソース向けプロジェクトホスティングサービス「CodePlex」の上で運営されていました。しかしCodePlex上のTypeScriptプロジェクトで受け付けていたコミュニティからのフィードバックによってGitHubへの移行を決定しました。 現在、Co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita