typescript に入門してみた

typescript

こんばんは!だんだんあったかくなってきて、お気に入りの黒いシャカシャカのパーカーが着られて
ハッピーなこの頃です。さて、前から気になっていた言語だった、Typescript に入門する機会があったので、今回入門してみました!

typescript とは

まず、typescript を勉強しようと思っていて、typescript って何??から始まりました。
typescript はgemini によると、

Javascript + 静的な型付け = Typescript

らしいです。要は、Javascript の言語を使っていると、PHP と同様に戻り値とかを返すときにint なのかstring なのかを指定しないので、どちらで返ってくる可能性があったり、そのせいで意図せねバグを踏んでしまったりということがあります。

それを防止するためにできた言語がTypescript という言語なのです。なので、Type を決定した上でコーディングすることができるJavascript というわけですね。ということは、多くの記事でもJavascript をもうすでに習得している人にとってはtypescript の書き方のコツみたいなのを覚えるだけでいけそうですね!!!

じゃあ、その型の定義はどうやってやるのか疑問に思いますよね。なので、それを次の項目でかいていきます!

Type (型を定義する) script の書き方

基本的には変数を定義する時に、型を一緒に書く形になると思います。
まずは型の種類について一覧を書いておきます。

  • プリミティブ型
  • オブジェクト型
  • オブジェクトリテラル型
  • 配列型
  • タプル型
  • 列挙型

などが例として型が一般的にはあるそうです。今回は全部解説することはしませんが、よくチュートリアルの最初にでてきそうな書き方のみを紹介しようと思います。

今回は、プリミティブ(=基本型) での例を示していきます。

# booleanの場合
let Truth: boolean = true;
print(Truth)
=> true

true or false を定義する時は、boolean というのをつけてあげることによって、
型を定義することができます。

その時に注意してほしいのが、変数の後ろに : コロンをつける必要があります。本当の理由はわかりませんが、変数名がどこで終わるかの区切りのような意味を持つのだと思います。配列も、コロンをつけることから似たような意味をきっともってるんだろうなーーと個人的に思っています。

なので、数字の時や、文字列の時も同じように書く必要があります

# number
let mynumber: number = 33

# string
let myname: string = "tansan ken"

あれ、float とかdouble とかはどうするのって思った方もいると思いますが、それはどうもnumber の型定義に含まれているみたいです。なので、number と型を定義すると、float やdouble もエラーなどは発生しないで問題なく定義が可能です。

後は最後によく使う配列ですね!!

# 配列
let stringarray: string[] = ["cat","dog","kitty"]
let numberarray: number[] = [2,4,5,6]

配列も変わったところといえば、[] をつけるくらいで、特に型定義の方法はかわりはありません。例えば、連想配列などを定義しようとすると、number とstring の両方の型が存在する可能性が高くなるかと思います。そんな時は、interface というのを使って書くことができます。

# object 
Interface Person {
     id  : number;
     name: string;
     age : number;
}

const person: Person = {
    id  : 1,
    name: "tansan ken",
    age : 10
}

このように連想配列を書く時は、interface を使って定義して、書くことによって、
それぞれの変数ごとに定義を変えることができます。また、interface を呼び出すときは、変数の後ろに、string やnumber と同様に、Interface で定義した名前を後ろにつけて書くことでその型定義を適用することができます。

まとめ

ここまで型定義の話のみを書いてきましたが、サバイバルtypescript や他のエンジニアの方々も同じように解説しているかと思いますので、コーディングしながら、参考になれば幸いです。自分自身では、普段はインフラをメインにやっていたり、PHP やLaravel しか使ったことがなかったので、アウトプットすることでとても勉強になりました。

みなさんもぜひ、書きながらブログにアウトプットしながらをしてみてください!!
ではでは、ここまで読んでくださってありがとうございます!!

参照サイト

https://typescriptbook.jp

\ 最新情報をチェック /

PAGE TOP
タイトルとURLをコピーしました