TypeScript
概要 自作コンポーネントで双方向バインディングの実装の仕方を記載します。 ※今回はControlValueAccessorは未使用で実装します。 下記のような設定をします。 自作コンポーネント @Inputでプロパティを定義する。 @OutputでEventEmitterを定義する。EventEm…
目次 目次 概要 Workbench関連 Breadcrumbs Run npm scripts from package.json View menu cleanup おわりに 概要 Visual Studio Code v1.26がリリースされましたね。 気になる新機能をピックアップして紹介します。 code.visualstudio.com
概要 下記の記事でArrayソート用の拡張メソッドを実装しました。 kakkoyakakko2.hatenablog.com kakkoyakakko2.hatenablog.com 今回は、ファンクションで変換した値でのソートに対応しようと思います。
概要 下記の記事でArrayソート用の拡張メソッドを実装しました。 kakkoyakakko2.hatenablog.com 今回は、第１キーは昇順、第２キーは降順のようなケースに対応したいと思います。 以下の内容で実装していきたいと思います。 引数にソートキーの他に昇順フラ…
概要 TypeScript(JavaScript)の標準のsortメソッドが使いにくいので、compare処理を内蔵した拡張メソッドを実装してみたいと思います。 以下の内容で実装したいと思います。 プリミティブ型配列の場合は通常のArray.sort()を実行する。 オブジェクト型配列の…
概要 Angular 6.1.0になりKeyValuePipeが追加されました。 KeyValuePipeのサンプルを作ってみたいと思います。 以下はAngular 6.1をピックアップした記事です。 kakkoyakakko2.hatenablog.com
概要 Angular 6.1.0がリリースされましたね。マイナーバージョンチェンジなのであまり大きな変更はありませんが、気になった箇所をピックアップしていきます。 blog.angular.io github.com
概要 RxJSでempty, NEVER, throwError の挙動にはまったのでメモ書き。 ReactiveX - Empty, Never, and Throw operators
概要 Visual Studio Codeの各ワークスペースのTypeScriptバージョンを指定して使用する。
目次 目次 概要 Workbench関連 Grid editor layout Outline view Portable Mode 拡張関連 New default view for Extensions view Preview機能 New Settings editor 終わりに 概要 Visual Studio Code v1.25がリリースされましたね。 気になる新機能をピック…
概要 Angularの@Componentの設定関連をメモ。
概要 TypeScriptで基本型でなく、他のライブラリで定義されているクラスに対して拡張メソッドを実装する方法を記載します。 declare module 'ライブラリの拡張対象のクラスが記載されているファイル'で定義後は基本型の拡張方法と同じです。 サンプルソース…
概要 Angular 4以降で登場したHttpClientでは特に指定がない場合はJSON型の戻り値を扱います。 以前のHttpモジュールのようにHttpレスポンスのステータスコードを扱いたい場合は、引数に{ observe: 'response' }の指定が必要になります。 get処理については…
概要 HttpInterceptorを複数登録した場合の実行順序は以下の通りです。 リクエストはproviders登録の昇順、レスポンスはproviders登録の降順に実行されます。 AInterceptor, BInterceptorの順で登録した場合、 Aのリクエスト前処理 Bのリクエスト前処理 Bの…
概要 以前紹介したAngularのHttpInterceptorでレスポンス内容を確認することも出来ます。 今回はそのサンプルソースをのせておきます。 kakkoyakakko2.hatenablog.com
概要 declare global + interface で追加したいメソッドを追加後、prototypeにメソッドを追加します。 拡張メソッドを利用したい場合は、importをすることで利用できます。 詳細についてはサンプルソースを確認。 ちなみに拡張メソッドは他の開発言語でもあ…
目次 目次 概要 TypeScript関連 Update import paths when a file is moved or renamed Highlight unused variables and imports Generate getter/setter refactoring Preview機能 Outline view New Settings editor 終わりに 概要 Visual Studio Code v1.24…
概要 Angular CLI利用時にKarmaでのテスト実行時にテスト結果をJUnit形式で出力する方法です。 なぜJUnit形式でテスト結果を出力するかというとJenkins等でテスト結果を取り込むのにJUnit形式だと簡単に出来るからです。 今回利用するツールはkarma-junit-re…
概要 Jasmineで特定ケースの場合、テストを失敗させたい場合はfailメソッドまたはdone.failを使用します。 PromiseやRxJS等でrejectやthrowErrorを発生させるテストの場合、正常に動作してしまう場合がテスト失敗なため、failメソッド等で明示してあげるとテ…
概要 JasmineでのPromiseをテスト時にはテスト定義の引数にdoneを利用します。 doneを利用することで、非同期処理完了後まで待機してくれます。 doneを設定しない場合は、Promise.then内の処理をスルーしてテストを終了するため、正常なテスト結果がでない場…
概要 TypeScriptで定数クラスっぽいものをつくるのには namespace を利用すると便利です。 各const値をグループ化して、あたかも定数クラスのように利用できます。
概要 RxJSで指定した秒数遅らせてデータを処理したい場合、deleyオペレーターを使用します。 引数でnumber型を設定すればミリ秒単位の指定が出来ます。 ローディング処理とかの確認に使うと便利です。
概要 Visual Studio Code では、Visual Studio の C# のように region指定が出来ます。 今回は Visual Studio Code で TypeScript, HTML, CSS に対してregion指定をしたいと思います。 基本的には各言語のコメントアウト部分に #region と #endregion を設定…
概要 AngularのHttpリクエストの前後に共通処理を実装したい場合、HttpInterceptorを実装することで対応することが可能です。 用途としては以下のケースがありそうです。 ログ出力 HTTPヘッダーにトークンを設定 今回は前回の記事で紹介したAngularでのCooki…
概要 AngularのHttpClient利用時は標準ではCookieベースのセッション管理が出来ません。 旧システムの認証ではCookieベースのセッション管理が必要になる場合があります。 対応方法としてはget、post等のメソッドの引数に withCredentials: true を設定する…
