[B! TypeScript] klim0824のブックマーク

TypeScriptは26以上のメンバーを絞り込めない！

この記事で扱うコードは全てTypeScript Playgroundにまとめていますので、もし実際にコードを確認したい場合はそちらでご確認ください。 26以上のメンバーを持つMappedTypeで型の絞り込みができない表題の通りですが、実際にコードを見てもらうのがわかりやすいでしょう。 const maxMap = { one: {a: 1}, two: {b: 2}, three: {c: 3}, four: {d: 4}, ... twentyThree: {w:23}, twentyFour: {x:24}, twentyFive: {y:25}, twentySix: {z:26}, } type MapKey = keyof MaxMap type MapValue<T extends MapKey> = MaxMap[T] interface ObjectImpl<Key,

klim0824 2024/06/10

TypeScript

リンク

TypeScriptのパフォーマンス改善

TypeScriptのパフォーマンス向上についての公式ドキュメントがあります。この記事では、「TypeScriptにおける速さとは何か」を理解し、その上でコンパイルの観点でパフォーマンスを向上させるための具体的な方法をまとめます。公式のドキュメント TypeScriptのGithubリポジトリにあるWikiを見に行くと、Debugging TypeScriptのセクションにPerformanceについてのドキュメントがあります。 Performance · microsoft/TypeScript Wiki · GitHub TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - microsoft/TypeScript 今回はこのドキュメントを参考にしてして見ていきます。 Ty

klim0824 2024/05/12

TypeScript

リンク

Deno first でやっていく

去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。最初に: なぜ Deno を使いたいか一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。とくにtsで書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくにTS

klim0824 2024/04/19

リンク

TypeScriptで知ってコードの安全性が上がったtips集

TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //

klim0824 2024/03/20

TypeScript

リンク

Typescript では !! と Boolean() が完全に同じ動作ではない

🌼 はじめに皆さんは Javascript である値を boolean に変換するときどういう方法も使いますか？よく使われる方法は!!︵二重否定・Double negation︶か、Boolean()だと思います。 const hello = Boolean("hello"); // true const world = !!"world" // true Typescript のハンドブックでもその2つを紹介してます。 You can always coerce values to booleans by running them through the Boolean function, or by using the shorter double-Boolean negation. いちおう型の観点では、!!を使ったら型がtrueかfalseになり、Boolean()関数を使った

klim0824 2023/10/26

TypeScript

リンク

TypeScriptの`infer`を一撃で理解する - reosablo.blog

準備運動たとえば「Foo型要素を持つ配列」や「Foo型でfulfillされるPromise」、「Foo型のプロパティ"abc"を持つオブジェクト」の型を定義しようとすると下記のようになる。 type FooArray = Foo[]; type FooPromise = Promise<Foo>; type FooContainer = { abc: Foo }; この記事にたどり着いた人であればここまでは理解できるはず。 inferの使いどころでは逆に、「何かの型を持つ配列」や「何かの型でfulfillされるPromise」、「何かの型のプロパティ"abc"を持つオブジェクト」の「何かの型」を得たい場合はどうするか。ここでinferの出番となる。 // 注意: このコードは型安全ではありません。 type ArrayOf<T> = T extends (infer U)[] ? U

klim0824 2023/08/13

TypeScript

リンク

TypeScriptではNumber.isNaN()よりもisNaN()の方が安全かもしれない

これまで「グローバルのisNaN()ではなくNumber.isNaN()を使え！」を教義に生きてきたのですが、揺らいできました。 JavaScriptのisNaN()は引数を数値に変換した結果がNaNであるかを判定します。一方のNumber.isNaN()はES6で提供された関数で、引数がNaN以外の時はtrueを返しません。 console.log(isNaN('hello')); // true console.log(Number.isNaN('hello')); // false Number.isNaN()はより厳密な比較であり、キャストを行わないため余計な混乱を避けられるものとして提供されました。文字列などを渡した場合はtrueを返さないため、Number.isNaN()に渡す時点であらかじめ数値に変換しておくなど型を意識した操作がアプリケーション側の責務として求められるよ

klim0824 2023/08/04

TypeScript

リンク

空でない配列を型で表現する正しい方法【TypeScript】

TypeScriptでは配列が空でないことを型レベルで表現できます。この記事ではその型をNonEmptyArray<T>と書くことにします。結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されているので要注意です。それらも含めて簡単に解説します。よくある間違いその1‥T[] & { 0: T }2つあるうち最初に紹介するのはこの型定義です。[1]

klim0824 2023/08/02

TypeScript

リンク

typescript-eslint v6 アップデートガイド

typescript-eslint v6 リリース！ 2023/07/10 に typescript-eslint の v6 がリリースされました。メジャーバージョンアップということで多くの BreakingChange があるのですが、その中でもReworked Configuration Namesと呼ばれる変更は利用者に大きな影響を与えそうです。 Reworked Configuration Namesはざっくり言うと「config に書くrecommendedのようなルールセットの名前や枠組みが変わるよ」という変更です。ルールセットの名前だけでなく、含まれるルールや分類自体に変更があるので、設定ファイルを v5 のままアップデートしてしまうと意図したルールセットと異なる設定になってしまいます。ここでは上記の記事にある変更点を紹介しつつ、なるべく既存の設定のままアップデートする

klim0824 2023/07/22

リンク

フロントエンドの main() を合成関数として副作用を集約する

これは未実装のアイデアを含む記事です。(後述する lint rule が未実装です) 要は EffectSystem を作ろうとしました。 https://www.eff-lang.org/ void に意味を込めたいこういうフロントエンドのコードについて考えてみましょう。 function mount(): void { const div = document.createElement('div'); div.textContent = "hello"; document.body.append(div); } function print(): void { console.log("hello"); } function maybeError(): void { // 低確率で例外が起こる関数 if (Math.random() > 0.999) { throw new Err

klim0824 2023/05/27

TypeScript

リンク

私がthrowを使わない理由

この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。前提条件この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していることフロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。結論先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記

klim0824 2023/05/09

リンク

環境変数に型を付与しよう！

はじめに皆さんは、Next.js で env ファイルを使用していて、process.envの後に env ファイルの環境変数を候補として出してほしいと感じたことはありませんか？型を付与する方法を調べていたら、良さげなライブラリを見つけたので紹介します。こちらの記事でおすすめされていました。問題点まずなにも使わずに、env ファイルを使用した際の問題点を挙げていきます。型がstring | undefinedになる

klim0824 2023/05/02

リンク

温故知新 TypeScript10年の歴史を振り返る

Deep Dive 大規模システムアーキテクチャ／開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering

klim0824 2023/03/04

TypeScript

リンク

【第2回】TypeScriptもウェブも仕様や原理から楽しむ | GeeklyMedia(ギークリーメディア) | Geekly（ギークリー） IT・Web・ゲーム業界専門の人材紹介会社

2022年4月に著書﹃プロを目指す人のためのTypeScript入門﹄が発売された鈴木僚太さん(https://twitter.com/uhyo_)。QiitaやTwitterでは﹁うひょ︵uhyo︶﹂さんとして、TypeScriptやフロントエンドの話題を中心にウェブ技術に対する踏み込んだ解説でも知られています。著書ではあえて触れられなかったという﹁TypeScriptでウェブアプリケーションをどう書くか﹂という観点へのヒント、なぜそれを書かなかったのか、そして仕様や原理に立ち返って自ら考えることの楽しさについて、株式会社一休CTOの伊藤直也さん(https://twitter.com/naoya_ito)が聞き出します。・伊藤直也さん / 株式会社一休　執行役員 CTO 新卒入社したニフティ株式会社でブログサービス﹁ココログ﹂を立ち上げ、CTOを務めた株式会社はてなでは﹁はてな

klim0824 2023/02/26

リンク

AstroでgetStaticPathsで指定したpropsをTypeScriptの型推論で型情報を取りだす

AstroでgetStaticPathsの返り値としてpropsが指定できます。 export async function getStaticPaths() { return [ { params: { id: "foo" }, props: { text: "abcd" }, }, { params: { id: "var" }, props: { text: "efg" }, }, ]; } TypeScriptで型指定を行いたい場合に、この場合はporpsの方は{ text:string }なのでファイル中に以下のような型定義を行えば型の指定が可能です。 export type Props = { text: string; } propsはgetStaticPathsの返り値として定義されているので頑張ればのgetStaticPaths返り値の型推論として取り出すこともできます。

klim0824 2023/02/21

リンク

`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと

export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、﹁型定義ファイル﹂として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。﹁型定義ファイル﹂とは、﹁どこか別の場所にある実装に型をつけるためのファイル﹂です。たとえば、以下のファイルは﹁どこか別の場所にある実装﹂に型をつけているから、 *.d.ts にするのは自然です。いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ

klim0824 2023/01/17

TypeScript

リンク

tsconfig.json 設定項目備忘録

型推論オプション型推論の結果が変わるもの。 ⭐strict ... 以下のセット alwaysStrict strictNullChecks T | null や T | undefined がTに縮退しなくなる。例 strictBindCallApply Function の各種メソッドが any に縮退しなくなる。例 strictFunctionTypes コールバック関数の引数が共変でもunifyするようになる結果、型変数の推論優先度が変わることがある。例 strictPropertyInitialization noImplicitAny 宣言型がない場合にflow typeが使われる機会が増える。例 noImplicitThis thisの宣言型がない場合に文脈から型が決定される機会が増える。例 useUnknownInCatchVariables catch (

klim0824 2022/11/21

TypeScript

リンク

input[type=number] のステートを安易に number 型にしない - fsubal

input[type=number] には空文字とかも入力できるので、string 型で状態管理をしないと意図しない動きをすることがある

klim0824 2022/10/03

TypeScript

リンク

フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発

2022年10月1日に開催された #postdev での発表です

klim0824 2022/10/02

リンク

any型で諦めない React.EventCallback - Qiita

React x TypeScript の鬼門のひとつに「props に記述する EventCallback の適切な書き方が分からない」というものがあります。さて、このコンポーネントの type Props どう型定義するべきでしょうか？ const View: React.FC<Props> = props => ( <form onSubmit={props.onSubmit}> <input type="text" onClick={props.onClick} onChange={props.onChange} onKeyPress={props.onkeypress} onBlur={props.onBlur} onFocus={props.onFocus} /> <div onClick={props.onClickDiv} /> </form> ) type Props =

klim0824 2022/09/26

TypeScript

リンク

はてなブックマーク

タグ

関連タグで絞り込む (22)

TypeScriptに関するklim0824のブックマーク (56)

お知らせ

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

今週のはてなブックマーク数ランキング（2024年6月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス