2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマン…

どうも、フロントエンドテックリードのみゅーとん(@_mew_ton)です。 TypeScript で型でガチガチに固めるのが好きで、よく業務時間内に型パズルを書いてます。 Nuxt3 の useFetch を OpenAPI ベースで型安全にする仕組みができたので、今回はその共有をします。 TL;DR 記事中の Gist をそのままコピーして利用してください. 以下の手順で型安全にする OpenAPI の定義ファイルを openapi-typescript をつかって TypeScript の型にする 型パズルを実装する useFetch でこの型を利用するためのラッパーを作る 対象読者 本記事は以下の読者を対象としています Nuxt3 を使っていて、 useFetch を型安全にしたい要件がある OpenAPI のスキーマをがんばってメンテできている TypeScript で型ガチガチに

この記事は MICIN Advent Calendar 2022 の16日目です。 前回は外山さんの GA4で実現するクロスプラットフォームのデータ計測と分析 でした。 皆様はじめまして。株式会社MICINでアプリケーションエンジニアとして働いている小泉です。普段は主にMiROHAという治験業務支援アプリケーションのフロントエンドの開発を行っています。 TypeScriptでフロントエンドの実装を行う場合、APIのレスポンスやパラメータに型をつけることは当然のことかと思います。最近ではGraphQLのスキーマやOpenAPIのスキーマから型やクライアント用のコードを自動生成することも広まってきている印象があります。 一方でバックエンドのAPIに関わる型や処理を自前で定義している場合もあるかもしれません。私が携わっているプロジェクトでも以前はバックエンドの実装やAPI仕様書を見つつフロントエ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

新卒２年目エンジニアのyutake27です。 約4ヶ月間、（ほぼ）1日1問 type-challengesを解いていたら、いつの間にか型の力（≒TypeScript力？）が付いていたのでその振り返りとtype-challengesのおすすめをしようと思って記事を書きました type-challengesって？ TypeScriptの型の問題集です。 初級〜最上級までレベル別に分かれており、徐々にステップアップしながら型を学習することが可能です。コードの実行環境も用意されているのでブラウザ上だけあれば実際に手を動かしながら学ぶことができます。 例えば初級編1問目のPickは以下のような問題です。 組み込みの型ユーティリティPick<T, K>を使用せず、TからKのプロパティを抽出する型を実装します。 この問題に対していくつかのテストケースが用意されているので、そのテストケースが通るように型を

はじめに こんにちは！株式会社マイベストでフロントエンドエンジニアを担当している おぎー と言います！ この記事ではTypeScriptの型と実行時の値が噛み合わなくなる話と、型付けへの向き合い方についてお話できたらと思います。 TypeScriptの型付けについて 型があるメリットとは TypeScriptは静的型付け言語です。プログラムを実行せずともコンパイルの段階で型の噛み合わないコードを発見することができます。このおかげで実行するコードは一定品質を担保されている状態を保ちやすい作りになっていると言えます。 またVS Codeをはじめとした開発用エディタではリアルタイムに型チェックしてくれるため、間違った記述にいち早く気づき修正することができます。 これらを踏まえると、素早く一定の品質を保たれたコードを作れることがポイントになるかなと思います。 型と実態がズレるとは TypeScri

TypeScriptは、型の合わないプログラムに対して型エラーを出すことを主な役目としています。 もちろんプログラムを正しく修正すれば型エラーは消えるのですが、TypeScriptを書いている方ならばそれ以外の方法で型エラーを消したことがある人がほとんどでしょう。すなわち、as、any、// @ts-ignoreその他諸々です。このような手段を使うことで、本来の問題を解決せずに型エラーを消すことができます。 もちろんこれらを濫用するのは勧められたことではありません。それは筆者の過去の記事『敗北者のTypeScript』で解説した通りです。プログラムの修正でasなどを使わずに型エラーが消せるのならばそうすべきで、そうしないのは敗北者です。 しかしながら、asなどをどうしても使わなければいけない場面はあります。それは、TypeScriptの型推論能力や型の表現力が足りないために型エラーが出てい

記事の趣旨 TypeScriptには、値がnullでないことを示すための、非nullアサーション演算子(Non-Null Assertion Operator) ! という構文があります。 これが、便利ですがあまり知られていないような気がしたので（自分も最近知りました）、使用例や ? との違いをまとめました。 使用例 前提 例として、あるinput要素が存在することが保証されていて、その要素にフォーカスしたい場合を考えます。 この時以下のように書くと型エラーが発生します。 document.getElementById('input').focus() // エラー: オブジェクトは 'null' である可能性があります。 これは、 document.getElementById の戻り値が HTMLElement | null となるためです。 オプショナルチェイニングの注意点 要素が存

never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性​何も代入できない​never型には何も代入できません。

コピー一度変数を定義すれば、あちこちに値を書き写す必要がなくなり、その変数を使ってさまざまな処理をすることができます。 変数という便利な入れ物があるおかげで、繰り返し同じコードを書く必要がなくなったり、より抽象的なコードを書けるようになったりと、さまざまな恩恵を享受できるわけです。 型変数(type variables)は、もうひとつの便利な入れ物です。ただし、入れられるのは「値」ではなく「型」という違いがあります。

children の型定義TypeScript で React の関数コンポーネントを定義するときには、下記のような React.FC (React.FunctionComponent) を使用します。 type FC<P = {}> = FunctionComponent<P>; interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; propTypes?: WeakValidationMap<P> | undefined; contextTypes?: ValidationMap<any> | undefined; defaultProps?: Partial<P> | undefined; displayName

なんだかんだでTypeScriptを業務でも個人開発でも使うようになって3年くらいが経過しました。 TypeScriptは便利ですよね☕️ 世の中的にも、もはやTypeScript以外でフロントエンドの開発を行うことが珍しいくらいの雰囲気になってきたのではないかという感じがします。 最近というかTypeScriptを書き始めてしばらくした今、書き始めた当初とは意識することが変わってきたように感じています。 そういうわけで、今、どんなことを意識しているのかを自分の整理をこめて記載しておこうと思います。 🔥🔥🔥 型を先に定義する ここがかなり気持ちの上で変わった部分です。 TypeScriptで型を書くということは、つまるところ自分が今から記述するコードの設計図を書くということだという意識が強くなりました。 TypeScriptの型推論は非常に強力で、自分でほとんど型を定義しなくても、多

環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし

つい一週間前にTypescriptに入門した新卒エンジニアです。 React × Reduxのアプリケーションにおいて、Typescriptを導入したのですが、エラーを吐いてしまうことが度々あり、構文に問題が見つからず途方に暮れているところで、tsconfig.jsonの設定を見直してみると、問題なくコンパイルできたということがあったので、今回はその設定項目について細かくまとめていきたいと思います。 まず現在私が作成しているファイルのtsconfig.jsは以下のようになっています。（create-react-app appname --typescriptで作成すると以下のようになっているはずです。） 一つひとつ説明していきます。 { // コンパイルに関するオプションを設定 "compilerOptions": { // ECMAScript target versionを指定 "ta

このチュートリアルでは、TypeScriptとReactの両方を用いて、SNSでよく見かける「いいねボタン」のUIを実装します。 本チュートリアルは、TypeScriptとReactによるコーディングの体験をすることを主眼に置いています。そのため、TSとReactの理論的な説明は省きます。「TypeScriptとReactでUIを開発するにはどのような流れになるのか」を感じ取って頂くことを目的としています。 Reactの専門書と比べて、本書の解説は詳しさや正確さは劣ります。それでも、初めてReactに触れる方でも読み進められるよう、Reactについて随時ワンポイント解説をしていくので、安心してお読みください。 このチュートリアルで作成するいいねボタンの最終的な成果物はデモサイトで確認できます。チュートリアルを開始する前に事前に触ってみることで、各ステップでどんな実装をしているかのイメージが

とはいえ, まるっと設定を実施するのでいずれ上記は別の箇所に移動していきます。 ESLint の初期設定 公式の Getting Started を参考に実施していきます。 簡単に eslint --init を使って, 構成ファイル生成とライブラリのインストールをやります。（eslint をグローバルインストールしたくないので, 公式通りに便利な npx で実施していきます） ちなみに, 公式の Getting Started の先頭の npm install eslint --save-dev を飛ばしているのは, eslint --init の最後で npm install に誘導してくれるからです。 ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJ

はじめに React公式には知識ゼロからReactのコンセプトを学べる、非常に丁寧なチュートリアルが用意されています（日本語版あり）。 右も左もわからない状態からReactを学ぶことになったとき、このチュートリアルには大いに助けられました。ただしこのチュートリアルは型のない素のJavaScriptで書かれています。 ここにTypeScriptを導入するとパワフルなサジェスト機能が使えるようになり、コードがより見通しの良いものになります。 Reactでは、コンポーネントと呼ばれる機能単位をブロックとして組み合わせることが基本となります。Reactにおける型推論の恩恵の一つは、コンポーネントが要求するパラメーター（しばしば"props"という名のオブジェクトとしてまとめられます）が何であるかコード上でマニュアル化され、誤っている場合には実行前に検知できることです。 さらに、Reactにはバージ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

文字列を数字に変換する。 typescript v4.1.2 Number() nullを渡すと0になる。 let num = Number('1') console.log(num) // 1 num = Number('1.1') console.log(num) // 1.1 num = Number('あ') console.log(num) // Nan num = Number(null) console.log(num) // 0