TypeScriptで開発中、Stringとstringの違いでエラーに遭遇。 #初心者

こんにちは。
株式会社HRBrainでフロントエンドエンジニアをしているみつです。

とはいえ、技術が足らないなぁとか、
無理やりコーディングしているなぁとか、感じている日々

先日、そんな無理やりコーディングの最中、
「念のためString使って文字列だよってしとこ〜」と軽い気持ちで使っただけなのにね・・・
new String()になんか怒られたのでその共有です

★先に結論

Stringは、オブジェクトだからstring型とは同じものではない。

★これが、エラー

const something = '何かしらの値'
const text: string = new String(something)
console.log(text)

型 'String' を型 'string' に割り当てることはできません。
'string' はプリミティブですが、'String' はラッパーオブジェクトです。できれば 'string' をご使用ください。ts(2322)

「stringを使えって、string使ってるじゃん・・・」

★これは、エラーじゃない

const something = '何かしらの値'
const text: string = new String(something).toString()
console.log(text)

「stringにtoStringしてもstringのままだろ！なんで逆にエラー解消すんだよ・・・」

String（MDNより）

String コンストラクターは新しい String オブジェクトを生成するために使用します。
・・・
String 関数と String コンストラクターは異なる結果を生み出します。

typeof new String('Hello world'); // object
typeof String('Hello world'); // string

Uh-huh

string（サバイバルTypeScriptより）

文字列リテラル。string型を表す。
TypeScriptのstring型の型注釈はstringを用います。

★何のエラーだった？

エラーのメッセージを見てみると。
できれば'string'をご使用くださいって言われてて、stringじゃん！？って思ってたんですが

Stringは、ラッパーオブジェクトって書かれてて、typeofで確認してみたらオブジェクト。
▼
つまり、オブジェクトのStringとstring型は別物・・・という。

だから、toString()にしてstringを期待していることを明示してあげてるとエラーが出ない。

ってことなのかな。

★さらに言うと・・・

ドキュメントではStringは使うなって言ってた。

Number, String, Boolean, Symbol and Object
Don’t ever use the types Number, String, Boolean, Symbol, or Object
These types refer to non-primitive boxed objects that are almost never used appropriately in JavaScript code.

意訳
数値、文字列、真偽値、シンボル、オブジェクトは使わないでね。
これらは、ノンプリミティブでボックス化されたオブジェクトなので、多くの場合、JavaScriptにおいて適切に使われることがないですよ。

とのこと。

だから、シンプルに、new String()とか使わず、そのまま入れとけば怒られずにすんだのにね

const something = '何かしらの値'
const text: string = something
console.log(text)

例としてこういう感じのことも上がってました。

/* WRONG */
function reverse(s: String): String;

/* OK */
function reverse(s: string): string;

★まとめ

Stringは、オブジェクトだからstring型ではない。

なんでもちゃんと理解して使うようにしたいと思いました。

TypeScriptで開発中、Stringとstringの違いでエラーに遭遇。

目次