TypeScript の型検査にかかる時間を短縮した話
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
フロントエンドのGitHub Actions実行時間を削減するために取り組んだこと | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 経緯 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビューに回すことができず、開発効率が落ちてしまっていました。 そこで現状の使い方を見直して、billable timeの削減に取り組むことになりました。 billable time削減の改善点を探す b
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ESLintのconfigがどのように変わり得るか（flat configとは何か）
はじめに ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is now merged. Its API is not yet stable, and not all features are implemented yet, but it is accessible via the Node.js API for early testing. See RFC9 for the origi
Event Types in React and TypeScript
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. #The Problem When you're working with React and TypeScript, you'll often encounter this kind of error:
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版）
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
TypeScript Compiler APIを活用してi18nの不整合をチェックする - Commune Engineer Blog
こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということも一読ください。 今回はグローバルチームでの開発の一部として、TypeScript Compiler APIを活用したi18nの不整合をチェックするツールを作成したお話をしようと思います。 背景 海外展開に向けた開発でまず思いつくのがi18n (多言語化) 対応ではないでしょうか。コミューンのプロダクトではi18nの対応が完了しており、すでに運用フェーズに入っています。 しかし、運用していく中で対訳データのキーやネームスペースの不整合に気づく仕組みがないことが課題点として挙がってきました。 i18nでは、ネーム
マストドンのコード、特にフロントエンドをなんとかしたい、あるいはなんとかしている - このIP網の片隅で
はい。 このブログをわざわざ読んでいる方なら既にご存知かもしれませんが、マストドンをご存知でしょうか。 いわゆる分散型マイクロブログの一種で、2017年ごろのTwitter社による日本人イラストレーターの大規模凍結あたりで一時期話題になり、 最近またイーロンマスクによるTwitter社買収から始まった一連の混乱で再度少し話題にもなりました。 で、まあ僕としてもマストドンに小改造をしたうえで自分で運用しているんですが、マストドンのコードは今となってはだいぶ厳しい。 厳しい部分を挙げると割とキリがないんですが、ざっくり書くと フロントエンドがWebpackerにべったり、かつ独自configを書きまくっている デフォルトが隠蔽されているWebpackerと合わさり最終的にどういうconfigでwebpackerが動いてるのかたぶん誰も把握できてない Typescriptじゃない 動いてるからヨ
TypeScript blog
@captain-yossarian TypeScript blog, fully dedicated to static typings and type safety
JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値（false とみなされる値）との比較は、ゆるい比較演算子であっても区別されます（仕様 同上）。 console.log(undefined == fa
Deno のめっちゃ難しいバグを修正した - Qiita
2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしていました。 自分に限らず、Deno Land コアチームの誰もこの issue にピンと来る人が居なかったようで、stale ボット (数ヶ月進捗の無い issue を自動的にクローズしようとするボット) に2回もクローズされかけていました。Deno の st
TypeScript で実行時の入力を含む文字列を型で弾く - Object.create(null)
TypeScript (4.7 時点) において, 文字列に付けられる型には以下の 3 つ (とそのユニオン型) があります. 文字列型 string 文字列リテラル型 ("foo" など) テンプレートリテラル型 (`data-${string}` など) これらのうち, 実行時の入力, 特に事前にパターンが想定されていないような任意の入力が含まれるような文字列に対しては, string や string を含むテンプレートリテラル型を付けることはできても, 文字列リテラル型を付けることはできません. 文字列リテラル型を付けるためには型検査時 (実行の前) に入力文字列の内容がわかっている必要があるので, まあそれはそうですね. このことを利用して, 実行時の入力を含む文字列を与えようとすると型検査に失敗するような関数を作ることができそうです. まずは与えられた型が文字列リテラル型, ま
TypeScript: Union to intersection type
Published on June 29, 2020 Stefan on Mastodon Reading time: 17 minutes More on TypeScript Recently, I had to convert a union type into an intersection type. Working on a helper type UnionToIntersection<T> has taught me a ton of things on conditional types and strict function types, which I want to share with you. I really like working with non-discriminated union types when I try to model a type w
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エディター付きのReact開発環境を ブラウザーだけで実装した話
Sharing a state between windows without a server
Reddit - Dive into anything
Difference between Variance, Covariance, Contravariance, Bivariance and Invariance in TypeScript
Typescript how get optional keys of type
Tuple to Object in TypeScript via generics