1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超基礎】TypeScriptにおける「as」

Posted at

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

環境

記事内のコードは以下の環境で動作確認済みです。

  • Node.js: v22.10.0
  • TypeScript: Version 5.6.3

"as"について

  • 「アサーション」と呼ばれる
  • 型アサーションやconstアサーションがある

型アサーション as type

  • 型推論を上書きする
  • 型に関する厳しいチェックを無理やり突破する手段
  • <Type>とする方法も存在する
型アサーション
//stringとnumberのユニオン型の変数value
const value: string | number = "Hello,World!";

//型アサーションによりvalueの型を明示的に指定
const strLength1: number = (value as string).length;//=>12

//asを使わない方法もある
//JSXのタグと混同するので非推奨
const strLength2: number = (<string>value).length;//=>12

全く無関係の型への上書きはエラー

const strLength: number = "Hello" as number//Error

アサーションは害

上記見出しはTypeScript Deep Diveからの引用です。

型のチェックを無理やり突破できるという点は便利な部分もありつつ、かなり危険です。

型アサーションの使用はJS→TSの移行途中の一時的なエラー削除等に留めるべきです。

constアサーション as const

  • オブジェクトリテラル{}の末尾につける
  • 各プロパティに対して、再帰的にreadonlyがつき、すべてのプロパティが固定される
  • 定数としてcosntで宣言したオブジェクトに対してas constを付けることで完全に編集できないオブジェクトを作成可能

型アサーションとは全く関係ない

constアサーション
const human = {
    id: 500,
    profile : {
        name: "taro",
        age: 20
    }    
} as const;

//読み取り専用プロパティであるため、代入できない
human.id = 600 //=>Error
human.profile.name = "hanako"//=>Error:

まとめ

以上になります。

慣例から外れた部分があれば指摘していただけると幸いです!!

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?