93266


vsocdeで vue3 と typescriptでコードを書いています。  
次のようなコードで typeで型指定後に obj から itemObj に値を移そうとするとエラーになります。

[code]

    type Obj = {
      Timeline: {
        Items: ItemsObj[];
      };
    };
    type ItemsObj = {
      [key: string]: { 
        CharacterName: string;
      };
    };
    
    //略
    
    const obj= ref<Obj>();
    const itemsObj= ref<ItemsObj>();
    
    
    //略
    
    itemsObj.value = obj.value?.Timeline?.Items;
    
[/code]

vscodeが `itemsObj.value` の部分で下記のようなエラーを出力します。  
`型 'itemsObj[] | undefined' を型 'itemsObj | undefined' に割り当てることはできません。`

type obj の中で itemsObj[] となっていますので、配列指定されています  
type itemObj の中では `[key:string]:{` と配列を受け入れられる状態だと思います。

type itemObj の設定方法が間違っているような気はするのですが、  
どのように書くことが正しいのかがわからずにいます。

修正すべきところを教えていただけると嬉しいです。  
よろしくお願いします。


CC BY-SA 4.0
2023-01-09T05:33:02.227
93263
2023-01-18T12:09:51.803
2023-01-18T12:09:51.803
3060
7980
question
javascript typescript vue.js
typescript にて typeで指定した型に代入にしようとすると配列を受け付けない


下記の修正で問題がなくなりました

[code]

    type Obj = {
      Timeline: {
        Items: ItemsObj[];
      };
    };
    type ItemObj = {
      CharacterName: string; // 1)[key:string] を削除
    };
    
    //略
    
    const obj= ref<Obj>();
    const itemsObj= ref<ItemObj[]>([]); // 2)<>内を配列化 & 初期値空配列指定
    
    
    //略
    
    itemsObj.value = obj.value.Timeline.Items; // 3)? 削除
    
[/code]

  1. 配列のためのkeyとして設定していましたが、元データが連想配列ではなかったので削除

  2. ジェネリックの中を配列として指定。これをしないと 1:1 の関係になりますね。更に初期化をしておかないと、typescriptが「undefinedの可能性あり」と判断します

  3. 同様に変数の後ろに ? がある。ということは「undefinedの可能性あり」 と判断される

上記の修正によって、型を一致（あるいは認識）させることができるようになりエラーがなくなりました。

一つ一つをとってみると「そりゃそうだ」なのですが、同時に間違いがあるとお手上げになります。  
これでまた一つの経験を得たので、同じミスはしないと思います（ちゃんと覚えておこう）


CC BY-SA 4.0
2023-01-09T08:27:37.213
93266
2023-01-09T08:27:37.213
7980
93263
answer