0
0

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、なんでプリミティブ型でメソッドが呼び出せるの?

Last updated at Posted at 2024-11-27

前提

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

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

環境

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

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

プリミティブ型とは?

まずはプリミティブ型のおさらいからします

  • number型やstring型をはじめとする基本の型
  • メソッドを持たない
  • 直接値を編集できず、再代入を必要とする

なんでメソッドを呼び出せるの?

JavaScriptではプリミティブ型にメソッドを使った際、これをオブジェクトに変換するボックス化という処理が自動で行われるため。

自動ボックス化
const a:string = "hello";

console.log(a.length)// =>5 一時的にstring型のaがオブジェクトになる

↓JSでも手動でできるが、特に必要ではない

明示的なボックス化
const a:string = "hello";

const aObj:String = Object(a);

console.log(aObj.length);

ボックス化とは

  • プリミティブ型の変数を対応するラッパーオブジェクトに入れて、オブジェクト型とする処理
  • C言語やC++では明示的に行う必要があるが、JSでは自動で行われる
  • 自動ボックス化はメソッドが使われるときのみ一時的に行われ、すぐさま破棄される

ラッパーオブジェクトの「生成」から「破棄」までが自動ボックス化のプロセス

自動ボックス化後の変数の型
const a:string = "hello";

console.log(a.length) //=>5

console.log(typeof a)) //=>string "object"出ないことに注意

ラッパーオブジェクトについて

  • プリミティブ型の変数に対応するオブジェクト
  • ラッパーオブジェクトプリミティブの代入は可能。逆はできない
  • 型名は対応するプリミティブ型の最初の文字を大文字にしたもの
  • null型やundefined型には無い
    ➡nullとundefinedはメソッドが使えない

string ➡ String
number ➡ Number
boolean ➡ Boolean
symbol ➡ Symbol
bigint  ➡ BigInt

まとめ

以上になります。なんとなく今後あやふやになりそうだったので記事にしてみました。

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸

0
0
4

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?