TypeScript delete演算子を使うときの注意点

TypeScript で delete 演算子を使用した場合、削除されたプロパティの型がundefinedと推論されるわけではなかったのでメモです。

例えば以下のようなケースです。

type Product = {
    id: number
    name: string
}

const deleteProductId1 = (product: {id?: number, name: string}) => {
    delete product.id
}


const product1: Product = {
    id: 12345,
    name: 'system1'
}

deleteProductId1(product1)
product1.id // product1.id の型は number

deleteProductId1 関数内で delete 演算子を使って id を削除しています。

そのため、最後の行の product1.id は undefined になるかと思ったのですが、そうならないようです。

TypeScript が id を undefined であると推論させるのは、関数内で新しいオブジェクトを return するようにすることで達成できました。

type Product = {
    id: number
    name: string
}

const deleteProductId2 = (product: {id?: number, name: string}) => {
    //　id が undefined のオブジェクトを return してあげる
    return {
        ...product,
        id: undefined,
    }
}


const product1: Product = {
    id: 12345,
    name: 'system1'
}

const deletedProduct= deleteProductId2(product1)
deletedProduct.id // deletedProduct.id の型は undefined

こちらで確認できます。

TypeScript

Posted by たみぼうず