Live types in a TypeScript monorepo
EDIT: A previous version of this post recommended publishConfig, operating under the mistaken belief that it could be used to override "exports" during npm publish. As it turns out, npm only uses "publishConfig" to override certain .npmrc fields like registry and tag, whereas pnpm has expanded its use to override package metadata like "main", "types", and "exports". There are a number of reasons y
あらためてデコレーターを学ぶぞ
はじめに NestJS入門してみようとしたら、アットマークから始まる記述を知らなかったので調べたことを簡単にまとめた記事です（デコレーターのことよくわかってなかった） デコレーターの仕様は、過去にいろいろと変わって現在に至っているようでしたが、ようやく最近 ECMAScript では Stage 3 になり、TypeScript では今も実験的なサポート experimentalDecorators を使えますが、バージョン 4.8 で TC39 の Decorators を実装することが検討されているようです！ この記事は、TypeScriptのドキュメントのサンプルコードを動かしてみたり、あらためてNestJSのコード読んだりしてみた感想を書いてみました。 最近のデコレーターを追えてない、NestJSを動かしてみようとしたらデコレーターってなんぞや、となったかたの参考になれば幸いです。
【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】
はじめに axiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。 実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。 私もaxiosの型付けに悩まされた一人です。 最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。 前提として、openapiファイルが用意されていることとします。 コード例は下記レポジトリに配置しております。 幸せになるとは何か 結論から言うと次のような型の補完が効き、かつ型安全なaxiosのrequest APIのカスタムAPIを作る事です。 URLパスの補完が効いていて、 実装されているHTTPメソッドの補完も効いており、 パラメータの型も補完され、 レスポンスの型も手に入るrequest APIです。 見た目上は、request APIですので、axiosのドキュメント
AWS Cognitoのベストプラクティスを見つける
環境構築(CDK) cognitoをCDKで作る npm i -g aws-cdk cdk init app --language=typescript cdkかく cdk deploy --require-approval never --profile {profile name} cdk destroy --profile {profile name} (リソース削除したい場合) import * as cdk from "@aws-cdk/core"; import * as cognito from "@aws-cdk/aws-cognito"; type UserPoolConfig = { id: string; name: string; }; type Params = { description: string; userPool: UserPoolConfig; };
Next.js + TypeScript + Docker + GitHub Actions の環境構築 - 電通総研 テックブログ
こんにちは。Xイノベーション本部ソフトウェアデザインセンターの陳です。 この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。 セットアップ手順 以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テストフレームワークのJest、React Testing Libraryの設定 5. Dockerfileの作成 6. GitHub Actionsを利用したビルド、テストの自動実行 バージョン Next.js v12.3.0 TypeScript v4.8.3 create-next-appでNext.jsのプロジェクトを作成 create-next-appはNe
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
TypeScriptで引数に応じて戻り値の型を変える
November 10, 2021 引数に応じて戻り値の型は変化しない # 例えば以下の関数と実行結果があるとして、age の型は何になるでしょうか？ const getAge = (shouldString: boolean) => { return shouldString ? '20' : 20; }; const age = getAge(true); 引数に true を渡しているため age が文字列としての '20' であることは明白です。 ただし、残念ながら型はそこまで推論できず age の型は 20 | "20" になってしまいます。 Conditional Types を使うだけだとダメ # Conditional Types を利用すればうまくいきそうですが、残念ながらこれだけだとうまくいきません。
Type Assertion (型添削) とType Annotation(型注釈)の違い
型アサーションと型アノテーションの違い 型アサーションと型アノテーション(type annotation)は名前が似ているためかしばしば混同されます。本書では型アノテーションを「型注釈」と表記しています。この2つはTypeScriptの異なる機能です。 型注釈は、コンパイラーに「この変数に代入できるのはこの型だよ」と伝えるものです。コンパイラーは型注釈をヒントに、その型に値が代入可能かどうかをチェックし、代入できないことが分かり次第報告してきます。 let value: number; // ^^^^^^ 型注釈 コピー 一方、型アサーションはコンパイラーに「君はこの型だと思ってるかもしれないけど、本当はこの型だよ」と型推論の不正確さを伝えるものです。
tsconfig.jsonの主要オプションを理解する - Qiita
概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j
Typescript特有の組み込み型関数 | log.pocka.io
TypeScript には Promise や Symbol といった Javascript 特有のグローバルオブジェクト以外に、型を扱う上で便利になるような組み込みのジェネリックな型関数※1が存在します。これらは非常に便利で様々なプロジェクトで使われているので~すが、公式にリストもなく、説明も主にリリースノート等にしかないため、~使い方等を交えて説明を書いていきたいと思います。 なお、各定義はMicrosoft/TypeScript のsrc/lib/es5.d.tsにあります。 ※1 ... 型を受け取って新しい型を返す型。多分正しい呼び名ではない。 Partial 利用可能バージョン: TypeScript2.1~ リリースノート: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.ht
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
TypeScript学習ロードマップ - Qiita
TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ
TypeScriptの型を手に馴染ませるためにやっていること - $shibayu36->blog;
最近TypeScriptが好きで勉強していっている。しかしなかなか型定義周りが手に馴染まず、少し複雑な型定義を読んだり、自分でユーティリティ型を定義したりすることが難しかった。 そこで型を手に馴染ませるために色々学習をしてみたので、やっていることをメモしておく。 まずざっとTypeScriptの型概要を学ぶ まずTypeScriptでの型を簡単に学ぶには以下の2つの資料がわかりやすかった。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita ひたすら型演習をする 資料を読むだけでは全く手に馴染まないと思ったので、その後ひたすら型演習をしている。 まずは TypeScriptの型演習 - Qiita 。これは先程の型初級、型入門の記事を書いた人が演習問題を作っているため同じ流れで学習でき、さらに解説編も充実しているので、手を動かしながら学ぶのに最適であ
JavaScriptからの移行ガイド | TypeScript Deep Dive 日本語版
これらの点のいくつかをさらに議論しましょう。 すべてのJavaScriptは_有効な_TypeScriptであることに注意してください。つまり、TypeScriptコンパイラにJavaScriptをいくつか与えると、TypeScriptコンパイラによって生成されたJavaScriptは元のJavaScriptとまったく同じように動作します。つまり、拡張子を.jsから.tsに変更しても、コードベースに悪影響はありません。 TypeScriptはすぐに型チェックを開始しますが、元のJavaScriptコードはあなたが思っていたほど整っていない可能性があります。したがって、エラーが発生します。これらのエラーの多くは、anyを使用して抑制することができます。例：
TypeScript の流儀
Bonfire Frontend #4 http://yj-meetup.connpass.com/event/136480/
"型パズル"との付き合い方
まえおき❌ Compiler API、Language Service❌ 難解な型パズルを出題して型マウント取る話❌ 全TSerが型パズルするべきだ🙆♀️ 型パズルと聞いて身構える方に身近に感じてもらいたい どっちが思考コストが高いかHTTPメソッド // ちゃんと渡せばOK const httpMethod: string = 'GET' // 正しくない値を渡してもエラーになってくれない const httpMethod: string = 'hogehoge'type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE' // ... // ちゃんと渡せばOK const httpMethod: HTTPMethod = 'GET' // 正しくない値を渡すと型エラー const httpMethod: HTTPMeth
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
TypeScriptではじめるVueコンポーネント（vue-class-component） - Qiita
こんな人向け Vue.jsを使っているうちに以下のような考えになった人 TypeScriptでコンポーネントを書きたい .vueファイルに抵抗がある（フォーマッタ、補完がそのままじゃ効かないし、色々設定するのは疲れる） scoped cssはなくても大丈夫 前提知識 Vue.js、TypeScriptがなんとなくわかる やること コンポーネントをTypeScriptで書く。 （ついでに）テンプレート部分はhtmlファイルに分ける。 使うもの vue vue-class-component vue-property-decorator webpack vue-class-componentってなに？ TypeScript（.tsファイル）でコンポーネントが書けるようになる。 Componentデコレータをつけて、Vueを継承したクラスとして書く。 例えば、空のコンポーネントはこう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptの型表現
