本記事はVolare Advent Calendar 2020に登録しています!

12月になりました。12月といえばアドベントカレンダーですね!

本記事はVolare Advent Calendar 2020に投稿する記事です。他にもいろいろな記事が投稿されていますので是非他の記事もご覧ください!

 

TypeScriptはじめました。

TypeScriptの勉強を始めたので忘備録のような形で基礎的な部分からまとめていきたいと思います。

Vue.js+TypeScriptでの開発を目指しているのですが、今回は前段階としてTypeScriptの基本的な型から学んでいきたいと思います。

 

TypeScriptとは?

座学は苦手なのでざっくり。

  • Microsoftが開発メンテしている言語
  • 静的な型(Type)付けが特徴
  • トランスパイルしてJavaScriptになるaltJSの一種

って感じですね。

altJSとは?って方はこちらの記事とか読んでみるといいかもしれません。

altJS(代替JavaScript言語)とは?選び方と注意点を徹底比較! – Persol

 

今回はPlaygroundを利用

今回はオンラインでコードを試せるTypeScript公式のPlaygroundを利用します。

会員登録等も不要ですので、まずはこちらで基礎を学んでいきましょう!

Playground – TypeScript

 

型の基本

早速、型の基本を勉強していきます。

型は以下のように指定します。

例えば数値・文字列・ブーリアンを指定したい場合は以下のように指定します。

この時、例えば数値型に文字列型を指定した場合は、エラーになります。

 

テンプレート文字列の使用

テンプレート文字列の使用も可能です。

`バッククォートで囲むとテンプレートを代入できます。

${} で変数を囲むことで変数の代入もできます。

 

オブジェクトや配列、タプルの型

オブジェクトはオブジェクト自体のフォーマットを指定します。

配列の場合は配列に入る値の型を用いて型を宣言します。

タプルは以下のように中の値の型を指定します。

 

列挙型

列挙型の指定もできます。

通常、列挙型は値が頭から「0, 1, 2…..」と自動で与えられますが、手動での値設定も可能です。

因みに上記のように1番目に値を入れた場合2個目以降は指定しなければ1ずつ前の値が加算されます。

 

型推論

実は必ず型を明記する必要はありません。通常のJavaScript のような変数宣言もできます。

その場合は型推論により初期化時の値から型を決定します。

 

unknown型

さて、ここまで型を指定する方法を紹介しましたが、必ずしも毎回型が分かる訳ではありません。

例えばAPIから取得する値やユーザの入力する値など、動的な値も存在します。

そんなときは unknown型を使用します。

型は認識してくれるので、入った値の型によって処理を分岐することも勿論可能です。

 

any型

any型はどんな型にもなれるという魔法の型です。

TypeScriptの重要である型を無視するので乱用には注意ですね…

このように数値型へ文字列を挿入することも可能です。めちゃくちゃですね。

 

unknown型とany型の違い

ここで気になるのはunknown型とany型との違いです。

共通点

  • どんな型でも代入できる

unknown型の特徴

  • 利用する際の型が厳しい

any型の特徴

  • 利用する時も自由

って感じです。

どういうことかというと…

このように、any型の場合はどのような型に対しても無理矢理代入が可能で、代入先の型を変えてしまう性質があるのですが、unknown型では怒られます。

unknownはTypeScript3.0から導入された型ということなので、any型の改良版のような位置づけなんですかね?(想像で述べています)

 

void型

void型は基本的に値がないということを示します。

しかし、undefinedが代入可能です。

というのも、void型の関数を実行した際の戻り値自体は undefined であるからです。

 

因みに、void型へnull型を代入すると通常はエラーを返しますが、strictNullChecksをオフにするとnullを代入することも可能になります。

nullの代入方法

 

undefined型、null型

この二つはそのままです。

 

never型

never型は発生し得ない値のことを指しています。

無限ループにより返ってこない値や例外など、値が返ってこない時の返り値の型を指します。

 

タイプアサーション

タイプアサーションとはコンパイラに「私を信じて、私が何をしているのか知っている」(直訳)と伝えることだそうです。

要は型のキャストに似ているのですが、データの再構築やチェックなどはありません。

そのためコンパイラ側で安全性が保障されていないため、これはあくまでユーザ側でチェックをした前提で使用してください。

JSXでTypeScriptを使用する場合as構文のみが許可されており、山括弧構文はエラーになります。

 

最後に

今回はここまでになります。

JavaScriptでは let / const / var の3種類の型のみでしたが、TypeScriptでは型の種類が豊富なため、コードの可読性が上がるというのも納得できました。

今回紹介したのはあくまで基本的な型であり、他にも型があります。今後もTypeScriptの記事を書いていきますので、今後もご覧ください。

 

参考にした記事

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら

カテゴリー: JavaScriptTypeScript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です