TypeScriptを勉強しだしたときにまず引っかかるのが型の導入だと思います。
様々なサイトやドキュメントもあるため、情報を容易に検索できるようになってきましたが、
簡単なサンプルのドキュメントが多かったり、
高度な内容程、サンプルが少ないなと思うことがあったので、
今回自分なりにまとめていこうと思います。
【目次】
- TypeScript入門：型定義の基本と使い方（←いまここ）
- TypeScript実践1：ジェネリクスとデコレータの使い方
- TypeScript実践2：高度なジェネリクスとデコレータの使い方
- TypeScript実践3：インターセクション型とユニオン型
- TypeScript実践4：コンディショナル型
- TypeScript実践4：高度なデコレータの活用法
型定義の基本
TypeScriptでは、変数や関数の引数、戻り値などに対して、型を指定することができます。例えば、以下のように変数nameにstring型を指定することができます。
let name: string = "John";
また、下記のように数値を代入するなど、
型推論により、変数に初期値を代入する場合は、型指定が不要です。
let age = 20; // ageの型は自動的に`number`に推論される
型の種類
TypeScriptで使用できる主な型は以下のとおりです。
-
number: 数値型 -
string: 文字列型 -
boolean: 真偽値型 -
any: どのような型でも受け付ける型 -
void: 戻り値がない場合の型 -
null/undefined: 値が存在しない場合の型 -
object: オブジェクト型 -
Array: 配列型
型の使い方
型を使った変数の宣言や関数の引数、戻り値の指定方法を見ていきましょう。
変数の宣言
変数宣言時に __「変数名：型」__という書き方をします。
let age: number = 20;
let name: string = "John";
let isStudent: boolean = true;
let person: object = {name: "John", age: 20};
let fruits: Array<string> = ["apple", "orange", "banana"];
関数の引数
引数の型は function 関数名(引数名：引数の型) という指定をします。
function sayHello(name: string): void {
console.log(`Hello, ${name}!`);
}
関数の戻り値
引数の型は function 関数名(引数名)：戻り値の型 という指定をします。
以下のサンプルではnumberを指定していますが、何も戻り値が無い場合はvoidになります。
function add(a: number, b: number): number {
return a + b;
}
まとめ
TypeScriptの型定義の基本と使い方について紹介しました。
最近ではJavaScriptでフロントを書くプロジェクトがどんどん減少して、
TypeScriptを使う会社がどんどん増えているように思います。
基礎を掴んで、使いこなしていきましょう。
以上、初心者向けのTypeScript入門記事でした。