TypesScriptってよく聞くけど、そもそも何？JavaScriptと何が違うの？
こんなお悩みを解決します。
もくじ
本記事の内容
- TypeScriptとは？
- JavaScriptとTypeScriptの違いについて
- TypeScriptの基本的な書き方
それでは、TypeScriptについて解説していきたいと思います。
本記事を通して、TypeScriptの概要を理解することができ、基本的な構文の書き方と代表的な型定義を理解することが出来ます。
TypeScriptは、とても需要が高い言語です。
是非、最後まで読んで、TypeScriptを理解していってください！
TypeScriptとは？
TypeScriptとは、2014年頃にMicrosoftが開発・発表した言語で、Javascriptを拡張して作られた静的型付け言語です。
TypeScriptを使うことによって、JavaScriptにおける暗黙の型変換によるバグを未然に防げたりと、安全なコードが書けるようになります。
また、JavaScriptを拡張して作られた言語ということで、文法や仕様が似ている事から、JavaScriptのプログラミングスキルを既に身に付けている人であれば、TypeScriptは理解しやすいプログラミング言語であります。
JavaScriptとTypeScriptの違いについて
プログラミング言語には、動的型付け言語と静的片付け言語の２種類存在します。
- 動的型付け言語：プログラム実行時に型付けを行う言語
- 静的型付け言語：プログラムを実行する前に型付けを行う言語
JavaScriptは動的型付け、TypeScriptは静的型付けの言語であり、この点が最も大きな違いとなります。
JavaScriptでは、プログラム実行時に変数のデータ型を決めます。ソースコードをシンプルに記述出来るというメリットがありますが、プログラムを実行してみないとエラーやバグが分からないというデメリットがあります。
他の動的型付け言語だと、RubyやPythonなどが挙げられます。
TypeScriptでは、プログラムを実行する前に変数のデータ型を指定することが可能です。コンパイルをする必要があり手間がかかるというデメリットがありますが、コンパイルを実施する時にエラーやバグが発見できるというメリットもあります。そのため、大人数でのシステム開発にも向いている言語になります。
他の静的型付け言語だと、C言語やJavaなどが挙げられます。
最後にTypeScriptの特徴として、クラスを作成することができます。クラスとはソースコードを効率よく簡潔に記述するための仕組みのことで、TypeScriptのソースコードではクラスを簡単に定義することが可能です。
以上が、JavaScriptとTypeScriptの違いの解説となります。
それでは次に、TypeScriptの基本的な書き方について、解説していきます。
TypeScriptの基本的な書き方
代表的な型定義と合わせて解説していきます。
プリミティブ型
TypeScriptにおいて、一番基本となる型はプリミティブ型です。これはJavaScriptのプリミティブ型と対応しており、以下の型がございます。
- string
- number
- boolean
- bight
- symbol
- null
- undefined
// string型
const hoge: string = 'これはstring型です';
// boolean型
const hogehoge: boolean = true;配列
JavaScriptでは配列はオブジェクトの一種ですが、配列の型を表すために特別な文法が用意されています。配列の型を表すためには[]を用います。例えば、number[]というのは数値の配列を表します。
const foo: number[] = [0, 1, 2, 3];オブジェクト
JavaScriptの基本的な概念として、オブジェクトがあります。オブジェクトは任意の数のプロパティがそれぞれ値を保持している構造です。
もちろん、TypeScriptにはオブジェクトを表現するための型があります。これは、{}の中にプロパティ名とその型を列挙するものです。
interface ObjInterface {
foo: string;
bar: number;
};
const hoge: ObjInterface = {
foo: 'foo',
bar: 1,
};上記でinterfaceという構文が出てきましたが、オブジェクト型に名前をつけることが出来ます。
今回の例では、{foo: string; bar: number; }という型にObjInterfaceという名前をつけています。
関数型
JavaScriptの、というより大抵のプログラミング言語において重要な概念として関数があります。
TypeScriptにも当然ながら関数の型、すなわち関数型があります。
関数型は例えば(foo: string, bar: number)=> booleanのように表現されます。これは、第1引数としてstring型、第2引数としてnumber型の引数をとり、返り値としてboolean型の値を返す関数の型です。
// 関数型を定義
type Func = (param: string) => string;
const example: Func = param => param;上記では、typeという構文が出てきましたが、こちらはTypeScript独自の構文であり、正式には型エイリアスと呼ばれます。
文字通り型定義を扱うものであり、基本的な使い方はinterfaceと同じで、オブジェクトや配列の型を定義することができます。
タプル型
タプル型とは、個々の要素の型とその順番や要素数に制約を設けられる特殊な配列の型になります。
よく使われてるものでは、関数の引数などがあります。
const charAttrs: [number, string, boolean] = [1, 'patty', true];void型
この型は主に関数の返り値の型として使われ、「何も返さない」ことを表します。
JavaScriptでは何も返さない関数（return文が無い、もしくは返り値の無いreturn文で返る）はundefinedを返すことになっていますので、void型というのはundefinedのみを値にとる型となります。
実際、void型の変数にundefinedを入れることができます。ただし、その逆はできません。すなわち、void型の値をundefined型の変数に代入することはできません。
const a: void = undefined;
// エラー: Type 'void' is not assignable to type 'undefined'.
const b: undefined = a;この挙動は、void型を返す関数というのはあくまで何も返さない関数なのだから、その値を利用することはできないという意図があると思われます。
void型の使いどころは、やはり関数の返り値としてです。
何も返さない関数の返り値の型としてvoid型を使います。void型はある意味特殊な型であり、返り値がvoid型である関数は、値を返さなくてもよくなります。逆に、それ以外の型の場合（any型を除く）は必ず返り値を返さなければいけません。
function foo(): void {
console.log('hello');
}
// エラー: A function whose declared type is neither 'void' nor 'any' must return a value.
function bar(): undefined {
console.log('world');
}なお、大して意味はありませんが、undefinedをvoid型の値として扱うことができるので、void型を返す関数にreturn undefined;と書くことができます。
any型
any型の値はどんな型とも相互変換可能であり、実質TypeScriptの型システムを無視することに相当します。
const a: any = 3;
const b: string = a;この例では、変数aはany型の変数ですので、どんな値でも代入可能です。また、any型の値はどんな型の値としても利用可能ですので、any型の値をもつaをstring型の変数bに代入することができます。
上記のプログラムを見ると最終的に数値がstring型の値に入ってしまっています。このように、any型を使うと型システムを欺くことが可能であり、TypeScriptを使っている意味が薄れてしまいます。ですので、any型はやむを得ない場面でのみ使用するのがよいでしょう。
まとめ
今回は、TypeScriptの概要と代表的な型定義について、解説していきました。
最後にTypeScriptのメリットを下記にまとめます。
- JavaScriptのプログラミングスキルを既に身に付けている人であれば、TypeScriptは理解しやすい
- エラーやバグを未然に防ぐ事ができる
- コードの見通しが良くなる
- 大人数での開発効率が上がる
TypeScriptは需要が高い言語であり、学んで損をすることはありません。
実際に使って頂くことでメリットの高さを感じられると思いますので、
是非、使ってみてください！