概要 TypeScript の Utility Types を読むだけでは理解できないのがあったので触ってみた。 この記事では、Pick と Exclude、Omit の3つを触る。 TL;DR Omit は、Pick と Exclude を使って表現できる。 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>> Pick<T, K> とは? T 型から K で選択したプロパティのみを取り出した新しい型を作る。 下記の例だと、T = User, K = 'id' | 'name' となる。 // interface でも可 type User = { id: number name: string age: number birthday: string } type PickedUser = Pick<User, '
こんにちは、よしこです。 この記事では、わたしの所属する株式会社ナレッジワークで最近コードベースに取り入れた「エラーハンドリング漏れ防止の仕組み」について紹介します。 背景 「通信を伴うアクションに失敗しても画面にエラーフィードバックが表示されない」という実装漏れをしてしまったことがあり、今後こういうことが起きないように仕組みで防止したいと思いました。 「忘れてしまった」という問題なので、テストで担保するのも難しいように思いました。実装するのを忘れてしまっているということは、テストを書くこともセットで忘れてしまっているはずだからです。 「気をつける」「チェックリストを作る」のような人間が注意する方向ではなく、「嫌でも気付く」「忘れていたらCIが通らない」のように、必要なハンドリングを強制する形にできないか？と思いました。 課題 実行時に通信エラーが起きる可能性があり、ユーザーフィードバック
配列の分割代入JavaScriptでは、配列から要素を取り出す方法のひとつに、array[1]のようにインデックスでアクセスする方法があります。この方法とは別に、分割代入(destructuring assignment)という方法を使っても、配列要素にアクセスできます。 たとえば、[1, 2, 3, 4, 5]のような配列から、最初の3要素を取り出して変数に代入するには次のように書きます。
RegExpは正規表現のためのJavaScriptの組み込みクラスです。組み込みなだけあり、リテラルでの表記とコンストラクタを利用した表記の2通りがあります。 このページではJavaScriptのRegExp型について触れ、正規表現そのものについては直接触れません。 リテラルでのRegExp型は/で検索したい文字を囲み、最後にフラグを書きます。一方コンストラクタでは第1引数が検索したい文字で、第2引数がフラグになります。次のRegExp型は同じものを指しています。
はじめに 最近Reactのメジャーアップグレードを結構な規模のリポジトリで行いました それに伴って、TypeScriptや、その他過去バージョンに依存していたライブラリのメジャーバージョンアップも行ったのですが、開くファイルファイルでことごとく赤い波線が引かれていました。。。 数十ファイルくらいの規模なら一つひとつ開いて確認・修正するのでも良いのですが、そんな訳にもいかず、スマートに全て確認する術を調べてみると意外と日本語でまとまった記事がなく苦労したので共有します ということで全てのファイルに対してのTypeScriptのエラー内容を問題（PROBLEMS）タブに表示し、左のディレクトリ構成一覧画面からもどこのファイルがアウトなのか赤文字で出るようになるようになって幸せになることが本記事のゴールとなります 環境 Visual Studio Code: 1.73.1 (Universal)
カルキチのブログその他もろもろよく使う・使用頻度の高そうなTypeScriptのUtility Typesについてまとめてみた2021-07-28よく使う・使用頻度の高そうなTypeScriptのUtility Typesについてまとめてみた だいぶ時間空きましたが、久しぶりに書いてみました。 今回はTypeScriptのUtility Typesについてです。 趣味レベルで書いていた時は、とっつきづらいこともあってほぼ使った経験がなかったのですが、実務でTypeScriptを書くようになってからは、必要性を感じてきたので、よく使用するようになりました。 今回はよく使うUtility Typesと使ったことないけど、便利そうだなと感じているUtility Typesについて記事を書いてみました。 TypeScriptのUtility Typesとは？TypeScriptのUtility T
型推論オプション 型推論の結果が変わるもの。 ⭐strict ... 以下のセット alwaysStrict strictNullChecks T | null や T | undefined が T に縮退しなくなる。 例 strictBindCallApply Function の各種メソッドが any に縮退しなくなる。 例 strictFunctionTypes コールバック関数の引数が共変でもunifyするようになる結果、型変数の推論優先度が変わることがある。 例 strictPropertyInitialization noImplicitAny 宣言型がない場合にflow typeが使われる機会が増える。 例 noImplicitThis thisの宣言型がない場合に文脈から型が決定される機会が増える。 例 useUnknownInCatchVariables catch (
Utility Typesとは Utility Typesとはコード内で型変換を容易にする為にTypeScriptが提供する(便利な関数のような)型達です。 Partial<T> Partial<T>はTの全てのプロパティをOptional(任意)のプロパティにしてくれます。 下記のコードPersonでは１つも任意のプロパティが設定されていませんが、Partial<T>を使用する事で、変数taroではfirstNameのみを持つ事ができています。 interface Person { firstName: string lastName: string age: number } const taro: Partial<Person> = { firstName: 'Taro', } console.log(taro); //=> { firstName: 'Taro' } Require
始め TSを初めて勉強したときに「typeよりinterfaceを使うように！」というブログをよく見ましたが、業務の時は全部typeで型を定義してました。あれ？と疑念に思ってましたので、記事でお話させていただきます。 1. 型の定義 TSで一番手っ取り早く型を定義できる方法は多分これだと思います。 let level: number = 15; level = 15 level = "十五" //Type 'string' is not assignable to type 'number' このように宣言時の変数に方の注釈をつけることを型アノテーション(Type Annotation)と言います。上の例だけ見たら特に問題なさそうに見えますが、コードが少しでも複雑になったら問題があります。
本書の目標は、本読者がNestJSをすぐに実務で利用できる(具体的に言えばNestJSで簡単なプロダクトを開発できる)ように、最短ルートに読者を導く一冊になることです。本書は、NestJSの網羅的なドキュメントではありません。取り扱う内容は頻出する機能に絞って、「実務でNestJSを扱うなら、最低限ここだけは理解しておこう」「これさえ押さえておけば実務でも安心できる」という観点で執筆しています。 本書はNestJSを中心に取り扱いますが、実務上、必要になる知識としてJavaScriptやTypeScriptの仕様やフロントエンドフレームワークのReactやVueについても扱います。
「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeScriptとJavaScriptの違い「TypeScriptではクラスの作成ができる」 侍エンジニア - 「TypeScriptでは、JavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行うとき、JavaScriptではコ
この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。 <T>の書く位置まとめ 関数宣言 関数式 アロー関数 メソッド宣言 関数型 コンストラクタ型 関数シグネチャ コンストラクタシグネチャ: 引数リスト()の直前 クラス宣言 インターフェース宣言 型エイリアス: 識別子の直後 <T>の書く位置チートシート 関数宣言
このエントリーは pyspa Advent Calendar 2019 の 11 日目の記事です。昨日は @chezou の「Vein の iOS ショートカット複数 URL 対応しました」でした。 はじめに TypeScript は大変に素晴らしい言語で、僕の手によくなじむ。そのせいか最近はめっきり TypeScript ばかり書いている。 今回のエントリでは、僕がこの一年くらいの間に磨いた TypeScript のテンプレートプロジェクトについて説明する。かなり何度も使って必要十分なものだけを含めるようにしている。 しかし、僕の知識の偏りがそのままになっているので、万人に合うというわけではないだろう。 とはいえ、開発環境の初期構築はかなり面倒な作業なので参考にして貰えれば嬉しい。 細かい説明なんかよりもコードを見た方が早いってハードコアな方は、こちらへどうぞ。 taichi/ts-t
はじめに この記事はLIFULL その2 Advent Calendar2018の19日目の記事です。 TypeScriptを使用した際に、外部ファイル化したJSON形式のデータをどのようにimportすれば良いのかを何パターンか表してみました。 (あくまで思いついたもののみとなります。) JSON形式で管理する ハッシュ形式のデータはJSON形式で管理したいというケースになります。 ▶︎ 型定義ファイルで拡張 TypeScriptの型定義ファイルをJSON用に作成します。 この定義ファイルにより、JSON形式のデータをimportできるようになります。 汎用性のため、anyで定義しているので補完や型は使用できません。 補完 型
某社で自分が 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
出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本
Angularではアプリケーションを構築する際に使用する言語としてTypeScriptが主流となっています。そしてAngularでは至る所でTypeScriptのclassを使うことが求められます。ES2015にもclassがありますが、実際にTypeScriptでclassを書いてみると、ES2015のclassの感覚では書けないことがわかりました。C#やJavaのclassに近いという話ではありますが、念のためTypeScriptのclassがどんなものか把握するために、TypeScriptの公式ドキュメントの「classの部分（Classes・TypeScript）」をしっかり読んでみようと思い、今回日本語に翻訳してみました。 Introduction: 始めにTraditional JavaScript uses functions and prototype-based inhe
Googleが中心となって開発しているオープンソースのJavaScriptライブラリ「Angular」のイベント「ng-conf 2017」が、4月5日から3日間、米国ユタ州ソルトレイクシティで開催されました。 3日目の基調講演に登壇したGoogleのエンジニアディレクター Brad Green氏は、TypeScriptがGoogle社内の標準言語に採用されたことを明らかにしました。 この記事では公開されている動画から、基調講演のその部分を中心にダイジェストでまとめました。 2年掛かりでTypeScriptがGoogle社内の標準言語に Brad Green氏。Googleには社内の標準言語（Canonical Languages）としてC/C++、Java、JavaScript、Python、Goが設定されている。 なぜかというと、もし社内のプログラミング言語が15種類もあったら、プロジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く