質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
型推論

型推論とは、コンパイラが型を自動で判断する機能を指します。メソッド内のローカル変数の宣言時に型宣言の代わりに指定することで、コードの記述量を減らすことが可能。変数や関数シグネチャに型を宣言せずとも、早期にエラーをチェックできるというメリットもあります。

オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3406閲覧

Typescriptで動的に型定義をする方法について

退会済みユーザー

退会済みユーザー

総合スコア0

型推論

型推論とは、コンパイラが型を自動で判断する機能を指します。メソッド内のローカル変数の宣言時に型宣言の代わりに指定することで、コードの記述量を減らすことが可能。変数や関数シグネチャに型を宣言せずとも、早期にエラーをチェックできるというメリットもあります。

オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/10/05 14:58

前提・実現したいこと

typescriptでオブジェクトをインスタンス化した際に動的に型付けを行いたい。
下記のコードで、obj1をインスタンス化する際に、型を{a:'01';b:'02'}となるように型定義を行いたいのですが、
どうしても、{a:string,b:string}と言った形になってしまいます。
ジェネリクスを用いて、obj1をインスタンス化の際に動的に型付けを行う方法を教えていただきたいです。
よろしくお願いします。

該当のソースコード

typescript

1type Obj01 = { 2 a: string; 3 b: string; 4}; 5type K = keyof { a: string; b: string }; 6 7class ObjectWrapper<T extends Obj01> { 8 private _obj: T; 9 10 /*** 11 * 引数のオブジェクトのコピーを this._objに設定 12 */ 13 constructor(_obj: T) { 14 this._obj = { ..._obj }; 15 } 16 17 /** 18 * this._objのコピーを返却 19 * @return Object 20 */ 21 get obj() { 22 return { ...this._obj }; 23 } 24 25 /** 26 * this._obj[key] に valを設定。keyがthis._objに存在しない場合、falseを返却 27 * @param key オブジェクトのキー 28 * @param val オブジェクトの値 29 */ 30 set(key: K, val: string): boolean { 31 if (this._obj[key] !== undefined) { 32 console.log(typeof this._obj) 33 console.log(typeof key) 34 this._obj[key] = val; 35 return true; 36 } 37 return false; 38 } 39} 40 41const obj1 = { a: '01', b: '02' }; 42const wrappedObj1 = new ObjectWrapper(obj1); 43 44if (wrappedObj1.obj.a === '01') { 45 console.log('OK: get obj()'); 46} else { 47 console.error('NG: get obj()'); 48} 49 50if ( 51 wrappedObj1.set('c', '03') === false && 52 wrappedObj1.set('b', '04') === true && 53 wrappedObj1.obj.b === '04' 54) { 55 console.log('OK: set(key, val)'); 56} else { 57 console.error('NG: set(key, val)'); 58} 59

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

なるほどの〜

質問で実現したいコードの目的としては、

  • 変数obj1{ a: '01', b: '02' }という内容のオブジェクトとして初期化し、かつ、obj1のプロパティを変更不可のものとして得たい。

ということかと思ったんやが、この解釈でええかのう? 以下は、この解釈に基づく回答やねん。

方法1

typescript

1const obj1 = { a: '01', b: '02' };

とすると、obj1 の型は、質問にあるとおり{ a: string; b: string }やけど、Typescript 3.4 から導入された constアサーション を使うて

typescript

1const obj1 = { a: '01', b: '02' } as const;

とすれば、obj1 の型は、{ readonly a: "01"; readonly b: "02" } となるねん。そやからこの obj1 に対して

typescript

1obj1.a = '03';

とかってやると、

TS2540: Cannot assign to 'a' because it is a read-only property.

というエラーになってくれますわ。

方法2

Object.freeze
を使って、

typescript

1const obj1 = Object.freeze({ a: '01', b: '02' });

ってやると、obj1 の型は Readonly<{ a: string; b: string }>になるので、

typescript

1obj1.a = '03';

とすると、先の方法1のときと同じで

TS2540: Cannot assign to 'a' because it is a read-only property.

というエラーになります。

投稿2021/10/05 17:53

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/10/06 05:29

回答ありがとうございます。 回答いただいたコードだと、 if ( wrappedObj1.set('c', '03') === false && wrappedObj1.set('b', '04') === true && wrappedObj1.obj.b === '04' ) { console.log('OK: set(key, val)'); } else { console.error('NG: set(key, val)'); } こちらでbに04を設定するのですが、それができないと思うのですが、、、
退会済みユーザー

退会済みユーザー

2021/10/06 10:07

すんまへん。。。やはりワテが質問の解釈を間違うてたみたいやな。他に良い回答がつくとええのう。ワテも他の回答者さんの回答読ましてもろて勉強させてもらいまっさ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問