概要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)

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

始め 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についても扱います。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。Udemy メディア - TypeS

このエントリーは 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/awaitTypeScript エコシステム編 自分がReact/Redux などの講習でいろいろやってみた結果、 ES2015 とTypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
出典: https://www.npmtrends.com/typescriptTypeScriptは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: 始めにTraditionalJavaScript uses functions and prototype-based inhe

Googleが中心となって開発しているオープンソースのJavaScriptライブラリ「Angular」のイベント「ng-conf 2017」が、4月5日から3日間、米国ユタ州ソルトレイクシティで開催されました。 3日目の基調講演に登壇したGoogleのエンジニアディレクター BradGreen氏は、TypeScriptがGoogle社内の標準言語に採用されたことを明らかにしました。 この記事では公開されている動画から、基調講演のその部分を中心にダイジェストでまとめました。 2年掛かりでTypeScriptがGoogle社内の標準言語に BradGreen氏。Googleには社内の標準言語(Canonical Languages)としてC/C++、Java、JavaScript、Python、Goが設定されている。 なぜかというと、もし社内のプログラミング言語が15種類もあったら、プロジ

リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く