TypeScriptを入門者向けに解説！JavaScriptとの違い！

みなさんこんにちは！
lismotechの大石です。
今回のブログでは、プログラミング言語の一つである「TypeScript」について入門者向けに解説します。

TypeScriptとは？

TypeScriptはJavaScriptの拡張版としてMicrosoftによって開発されました。
JavaScriptの欠点を補完するために開発され、非常に人気のある言語であり、Web開発を中心に広く使われています。
JavaScriptは動的型付け言語と言い、変数の型が実行時に決定されるため開発者がコードを書く際に制約が少ないというメリットがありますがその反面、
不具合の原因になってしまうことがあります。
一方でTypeScriptは静的型付け言語と言い、変数の型をコードに指定し、
型指定によってコードを書く段階で型のエラーを発見し、修正することができます。

簡単に説明するとJavaScriptで使用する変数にnumber(数値)、string(文字)で指定してあげることで型によるエラーを早期発見、修正できるといった感じです。

TypeScriptのメリット

TypeScriptの主なメリットを３つ紹介します。

・ 型エラーの検出：先程も解説しましたがコードを書く過程で型の不一致を検知できます。これにより、実行時のエラーを減らし、バグの発生を防ぐことができます。

・メンテナンス性の向上：変数に入ってくる値が指定されているので型情報が明確になり、他の開発者がコードを見たときに理解しやすくなります。大規模なプロジェクトでも可読性が高まり、保守性が向上します。

・ツールサポート：豊富なエディターやIDEのサポートがあり、リアルタイムで型の情報やエラーを表示してくれます。IDEはVisual Studio Codeなどのソフトウェア開発に使用されるツールのことです。

TypeScriptを実際に使ってみよう！

JavaScriptとの違いも含めて簡単に試してみましょう！

JavaScriptで文字を出力する場合は下記のようにnameという引数を入れています。

function Hello(name) { 
　console.log("Hello, " + name); 
} 

// 関数の呼び出し 
Hello("Oishi"); // 結果: Hello, Oishi

JavaScriptでは型の指定がないため、nameにどんな型の値が入ってくるのかがわかりにくいです。
今回のように関数の呼び出しが数行下に書いてあれば一目でわかりますが、コードが複雑になっていくほど分かりにくくなってしまいます。

TypeScriptの場合

// 文字列
function Hello(name: string): void { 
　console.log("Hello, " + name); 
} 

// 関数の呼び出し 
Hello("Oishi"); // 結果: Hello, Oishi function numbers(a: number, b: number): number { 　return a + b; } // 関数の呼び出し const result: number = numbers(5, 10); console.log(result); // 結果　15 

JavaScriptの時とは違い、nameに:stringと書かれています。
stringと指定することでその値が文字列であることを表します。
戻り値（return）がない場合は:voidを指定し、戻り値が文字列の場合はstring、数値ならnumberなどの型を指定します。

終わりに

今回はTypeScriptについての解説でした！
TypeScriptは幅広い現場で使われているのでJavaScriptを使っている方は是非試してみてください。
初めは簡単なコードで試していくと理解が深まりやすいと思います。
TypeScriptのメリットや型の種類は他にもあるので調べてみてください！！

それでは、次回のブログもお楽しみに！