通常配列 連想配列
通常配列 連想配列
変数と型 変数と文字列
変数と型 変数と文字列
通常配列 連想配列
変数と型 変数と文字列
TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得
TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得
非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理
非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理
TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得
非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理
TypeScriptでは定義した型を後から変更することが出来ます。 組み合わせて使用すれば柔軟な型定義が出来る一方、どんどん複雑化してコードの見通しが悪くなるので注意が必要です。単純なtype宣言 ユニオン型 オブジェクトの交差型 オブジェクトのユニオン型 NonNullableによるnullの削除 Extractによる抽出 -?による省略パラメータの無効化 Excludeによる削除
TypeScriptでは定義した型を後から変更することが出来ます。 組み合わせて使用すれば柔軟な型定義が出来る一方、どんどん複雑化してコードの見通しが悪くなるので注意が必要です。単純なtype宣言 ユニオン型 オブジェクトの交差型 オブジェクトのユニオン型 NonNullableによるnullの削除 Extractによる抽出 -?による省略パラメータの無効化 Excludeによる削除
ジェネリクスは、そのときの状況によって型を差し替えることの出来る便利なマクロです。柔軟な型定義をやろうとした結果、作った本人でさえ理解できない定義が作られてしまうことがあるので注意が必要です。functionでの使い方 クラスでの使い方 ジェネルクスの型の継承
ジェネリクスは、そのときの状況によって型を差し替えることの出来る便利なマクロです。柔軟な型定義をやろうとした結果、作った本人でさえ理解できない定義が作られてしまうことがあるので注意が必要です。functionでの使い方 クラスでの使い方 ジェネルクスの型の継承
基本的なfunction 無名function ラムダ式 オーバーロード 可変引数によるオーバーロード
基本的なfunction 無名function ラムダ式 オーバーロード 可変引数によるオーバーロード
intarfaceとclassは構造が似ていますが、intarfaceが型宣言のみで実体を持たないのに対し、classは実体を持ちます。 ただしクラスインスタンス内のプロパティは、コンストラクタなどで代入を行わない限り領域が確保されていない状態となります。クラス定義の基本 クラスの継承 インタフェイスの実装 クラス名の取得 getterとsetter 抽象クラスと抽象メソッド
TypeScriptの文法はJavaScriptを基盤としているため、先にJavaScriptの文法を確認することをお勧めします。TypeScriptの型 TypeScriptの型宣言 TypeScriptのinterface TypeScriptとclass TypeScriptとfunction ジェネリクス(総称体) typeと型の演算
TypeScriptの文法はJavaScriptを基盤としているため、先にJavaScriptの文法を確認することをお勧めします。
interfaceはオブジェクトの構造を定義することが出来ますが、実際のインスタンスには一切の影響を与えません。あくまで型をチェックするための構造定義となります。使い方 classでの実装 interfaceの継承
interfaceはオブジェクトの構造を定義することが出来ますが、実際のインスタンスには一切の影響を与えません。あくまで型をチェックするための構造定義となります。使い方 classでの実装 interfaceの継承
var let const
var let const
TypeScriptはMicrosoftによって開発されたaltJS(alternative JavaScript)です。大きな特徴として、JavaScriptに静的な型付けが出来ることです。TypeScriptで記述したコードを実行するためには、トランスコンパイルを行い、JavaScriptに変換する必要があります。 TypeScriptを扱う上での前提条件として、JavaScriptをある程度習得していることが必要となります。JavaScriptをスキップしてTypeScriptを始めることは可能ですが、どこまでがどの文法だか把握出来なくなるので、あまりオススメできません。TypeScriptの三大機能 TypeScriptの実行環境 TypeScriptを扱う時の流れ
TypeScriptはMicrosoftによって開発されたaltJS(alternative JavaScript)です。大きな特徴として、JavaScriptに静的な型付けが出来ることです。TypeScriptで記述したコードを実行するためには、トランスコンパイルを行い、JavaScriptに変換する必要があります。 TypeScriptを扱う上での前提条件として、JavaScriptをある程度習得していることが必要となります。JavaScriptをスキップしてTypeScriptを始めることは可能ですが、どこまでがどの文法だか把握出来なくなるので、あまりオススメできません。TypeScriptの三大機能 TypeScriptの実行環境 TypeScriptを扱う時の流れ
TypeScriptの項目が散らかってきたので、整理しながらこちらに統合します。今後の予定・TypeScriptとDOM操作・TypeScriptとDB操作
TypeScriptの項目が散らかってきたので、整理しながらこちらに統合します。今後の予定・TypeScriptとDOM操作・TypeScriptとDB操作
公式のハンドブックにはunknown型とFunction型が入っていませんでした。Boolean型 Number型 String型 Array型 Tuple型 Enum型 Any型 Void型 Null型 Undefined型 Never型 Unknown型 Object型 Function型 型注釈
解説は後で書きますTuple型 Void型 Boolean型 Number型 String型 Array型 Enum型 Any型 Null型 Undefined型 Never型 Unknown型 Function型 型注釈
TypeScriptの項目が散らかってきたので、整理しながらこちらに統合します。今後の予定・TypeScriptの基本文法・TypeScriptとDOM操作・TypeScriptとDB操作
TypeScriptのみで作る、コンパイルしないSPA掲示板
TypeScriptでSPAの掲示板の学習用サンプルです。フロントエンド、バックエンドの両方ともTypeScriptを使っていますが、手動でのコンパイルを一切行わず動作させることが出来ます。 本来、TypeScriptで作ったプログラムは、バックエンドであればts-nodeでコンパイル不要で動作させることが出来ますが、フロントエンドはそうはいきません。今回の方法では、フロントエンドのコードもバックエンドに入れる方式のため、完全に手動コンパイル不要となっています。※練習用サンプルのため、必要なエラーチェックなどは省いています。準備 ソースコードの入力 実行
TypeScriptのみで作る、コンパイルしないSPA掲示板
TypeScriptでSPAの掲示板の学習用サンプルです。フロントエンド、バックエンドの両方ともTypeScriptを使っていますが、手動でのコンパイルを一切行わず動作させることが出来ます。 本来、TypeScriptで作ったプログラムは、バックエンドであればts-nodeでコンパイル不要で動作させることが出来ますが、フロントエンドはそうはいきません。今回の方法では、フロントエンドのコードもバックエンドに入れる方式のため、完全に手動コンパイル不要となっています。※練習用サンプルのため、必要なエラーチェックなどは省いています。準備 ソースコードの入力 実行
以下でRepositoryを生成します。const exRep = new ExtendRepository(con, ItemEntity); createCustomRepositoryを使わない理由は、あれを使うとEntityを固定した状態で作成済みのRepositoryクラスを用意しなければいけなくなるからです。そのあたりの機能が標準で存在しないので、コンストラクタで初期化するようにしました。以下で子方向と親方向のデータを取り出すことが出来ます。最初の引数でEntityを指定するかwhereの条件に相当するものを入れます。次の引数でselectに相当するフィールド名を入れます。 const item05 = await exRep.getParent(["name=:name",{name:"金棒"}],{select:["id"]}); const item06 = await exRep.getChildren(["name=:name",{name:"防具"}],{select:["id"]});
import { TreeRepository, Connection, ObjectType, getManager, EntityRepository, ObjectLiteral, SelectQueryBuilder } from "typeorm"; import { AbstractSqliteDriver } from "typeorm/driver/sqlite-abstract/AbstractSqliteDriver"; /** *TreeRepository拡張クラス * * @export * @class ExtendRepository * @extends {TreeRepository<Entity>} * @template Entity */ @EntityRepository() export class ExtendRepository<Entity> extends TreeRepository<Entity> { /** *Creates an instance of ExtendRepository. * @param {Connection} connection * @param {ObjectType<Entity>} entity * @memberof ExtendRepository */ constructor(connection: Connection, entity: ObjectType<Entity>) { super(); const manager = getManager(); const metadata = connection.getMetadata(entity); const queryRunner = manager.queryRunner; Object.assign(this, { manager: manager, metadata: metadata, queryRunner: queryRunner }); } /** *起点から親方向へデータの取得 * * @param
TypeORMツリー構造の基本機能だと、起点の条件を指定したり、抽出するフィールドを指定することが出来ません。このままでは不便なので、TreeRepositoryを拡張するクラスを作りました。とりあえず動くように書き殴っただけなので、あとから修正を入れる予定です。ExtendRepository.ts 使い方(ソース) 使い方(解説)
TypeORMツリー構造の基本機能だと、起点の条件を指定したり、抽出するフィールドを指定することが出来ません。このままでは不便なので、TreeRepositoryを拡張するクラスを作りました。とりあえず動くように書き殴っただけなので、あとから修正を入れる予定です。ExtendRepository.ts 使い方(ソース) 使い方(解説)
TypeORMツリー構造の基本機能だと、起点の条件を指定したり、抽出するフィールドを指定することが出来ません。このままでは不便なので、TreeRepositoryを拡張するクラスを作りました。とりあえず動くように書き殴っただけなので、あとから修正を入れる予定です。ExtendRepository.ts 使い方(ソース) 使い方(解説)
TypeORMはデータベース上に、比較的簡単にツリー構造を構築することが出来ます。最善のロジックでツリー構造を扱うため、階層ごとにselectするような無駄な動作を避けることが出来ます。 DBで使用するロジックはデコレータのパラメータで選択することが可能で、・Nested set・Materialized Path・Closure table などから選ぶことが出来ます。今回は単一テーブルで扱えるNested setを使用しています。 実行結果を見てもらえれば分かりますが、発行しているSQL文は基準位置の検出一回とデータの取得一回、計たったの二回です。これで子ノードや親ノードを全て取得することが可能なのです。 とても有用なのですが、欠点もあります。ツリー構造でデータを取得すると、標準で用意されている命令では抽出フィールドを選択することが出来ません。 それをやるために、typeormのソースコードとにらめっこするハメになりました。結論としてはTreeRepositoryを継承し、ツリーの構築部分を自分で再実装すれば可能です。これはまた別記事で書きます。ソースコード 出力結果
TypeScriptでDBを扱うときに便利なtypeormの使い方の例です基本的な使い方 TypeORMで簡単に作る効率的なツリー構造 TypeORMで簡単に作る効率的なツリー構造2
TypeScriptでDBを扱うときに便利なtypeormの使い方の例です
TypeORMを使うとDB上でツリー構造が超効率的に構築できる
TypeORMはデータベース上に、比較的簡単にツリー構造を構築することが出来ます。最善のロジックでツリー構造を扱うため、階層ごとにselectするような無駄な動作を避けることが出来ます。 DBで使用するロジックはデコレータのパラメータで選択することが可能で、・Nested set・Materialized Path・Closure table などから選ぶことが出来ます。今回は単一テーブルで扱えるNested setを使用しています。 実行結果を見てもらえれば分かりますが、発行しているSQL文は基準位置の検出一回とデータの取得一回、計たったの二回です。これで子ノードや親ノードを全て取得することが可能なのです。 とても有用なのですが、欠点もあります。ツリー構造でデータを取得すると、標準で用意されている命令では抽出フィールドを選択することが出来ません。 それをやるために、typeormのソースコードとにらめっこするハメになりました。結論としてはTreeRepositoryを継承し、ツリーの構築部分を自分で再実装すれば可能です。これはまた別記事で書きます。ソースコード 出力結果
--- データの取得1 普通に列挙 ---- query: SELECT "ItemEntity"."id" AS "ItemEntity_id", "ItemEntity"."name" AS "ItemEntity_name", "ItemEntity"."nsleft" AS "ItemEntity_nsleft", "ItemEntity"."nsright" AS "ItemEntity_nsright", "ItemEntity"."parentId" AS "ItemEntity_parentId" FROM "item_entity" "ItemEntity" [ { "name": "ROOT", "id": 1 }, { "name": "武器", "id": 2 }, { "name": "剣", "id": 3 }, { "name": "銅の剣", "id": 4 }, { "name": "鉄の剣", "id": 5 }, { "name": "棒", "id": 6 }, { "name": "檜の棒", "id": 7 }, { "name": "棍棒", "id": 8 }, { "name": "金棒", "id": 9 }, { "name": "防具", "id": 10 }, { "name": "鎧", "id": 11 }, { "name": "布の服", "id": 12 }, { "name": "革の鎧", "id": 13 }, { "name": "盾", "id": 14 }, { "name": "鍋の蓋", "id": 15 }, { "name": "皮の盾", "id": 16 }, { "name": "鉄の盾", "id": 17 }] --- データの取得2 全ツリー---- query: SELECT "treeEntity"."id" AS "treeEntity_id", "treeEntity"."name" AS "treeEntity_name", "treeE
import * as typeorm from "typeorm"; /** *TypeORM用データ構造 * * @export * @class ItemEntity */ @typeorm.Entity() @typeorm.Tree("nested-set") //書き込みが遅く読み込みが早い、単一テーブルの構造 export class ItemEntity { constructor(name: string, parent?: ItemEntity) { this.name = name; this.parent = parent; } @typeorm.PrimaryGeneratedColumn() //自動番号 id!: number; @typeorm.Column() name: string; @typeorm.TreeChildren() //子階層(テーブルにはデータが作られない) children?: ItemEntity[]; @typeorm.TreeParent() //親(実際にはparentId:numberというフィールドが作られる) parent?: ItemEntity; } //サンプルデータ構造 interface ItemValue { name: string; children?: ItemValue[]; } //サンプルデータ const itemValue: ItemValue = { name: "ROOT", children: [ { name: "武器", children: [ { name: "剣", children: [{ name: "銅の剣" }, { name: "鉄の剣" }] }, { name: "棒", children: [{ name: "檜の棒" }, { name: "棍棒" }, { name: "金棒" }] } ] }, { name: "防具", children: [ { name: "鎧", children: [{ name: "布の
TypeScriptでDBを扱うときに便利なtypeormの使い方の例です
ソースコード
ソースコード
ソースコード
「ブログリーダー」を活用して、空雲さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
