TypeScriptの入門② ~基本構文と型推論と型注釈~

はじめに

今回はTypeScriptの基本構文を説明をしていきます。

TypeScriptは、以下のような基本的な型を提供しています。

・number型
・string型
・boolean型
・any型
・unknown型
・void型
・null型
・undefined型

この8つについて詳しく説明をしていきます。

その次に、型推論と型注釈の違いについて説明をします。

number型

TypeScriptのnumber型は、浮動小数点値を扱うための数値型です。この型は整数や浮動小数点数、正の数、負の数、NaN(非数)、Infinity（無限大）などを表現することがあります。

number型

//正の数
let integer: number = 10;
//小数点
let float: number = 10.5;
//負の数
let negative: number = -5;
//非数
let notANumber: number = NaN;
//無限大
let infinite: number = Infinity;

また、10進数、16進数、2進数、8進数の数値リテラルも表現できます。

進数表現

//10進数
let decimal: number = 10;
//16進数
let hexadecimal: number = 0xa3f;
//2進数
let binary: number = 0b1010;
//8進数
let octal: number = 0o744;

参考までにJavaScriptでは以下のように記述します。

数値型に関する静的な型チェックをしているかどうかがわかると思います。

javaScript

// 正の数
let integer = 10;
// 小数点
let float = 10.5;
// 負の数
let negative = -5;
// 非数
let notANumber = NaN;
// 無限大
let infinite = Infinity;
// 進数表現
//10進数
let decimal = 10;
//16進数
let hexadecimal = 0xa3f;
//2進数
let binary = 0b1010;
//8進数
let octal = 0o744;

string型

TypeScriptのstring型はJavaScriptの文字列と同じ性質を持ちます。

基本的には、文字列を表現・操作する際に使用されます。

String型

//シングルクォーテーション
let singleQuotatio:string = 'hello';
//ダブルクォーテーション
let doubleQuotatio:string = 'hello';
//バッククォーテーション
let backQuotatio:string =`hello`;

シングルクォーテーションとダブルクォーテションの役割は一緒です。

バッククォーテーションだけテンプレートリテラルとマルチラインの機能を持ちます。

テンプレートリテラルは、変数や式を文字列内に埋め込むことができます。

テンプレートリテラル

let personName = "Alice";
let greeting = `Hello, ${personName}!`;

マルチラインの書き方は以下になります。

マルチライン

let multilineString = `
これは文字列です
複数行に
わたっています。
`;

以下が参考までにJavaScriptの書き方になります。

javaScript

// シングルクォーテーション
let singleQuotation = 'hello';
// ダブルクォーテーション
let doubleQuotation = "hello";  
// バッククォーテーション 
let backQuotation = `hello`;

boolean型

boolean型は、真または偽の2つの値しか持たないデータ型です。

boolean型

let isTrue: boolean = true;
let isFalse: boolean = false;

以下が参考までにJavaScriptの書き方になります。

javaScript

let isTrue = true;
let isFalse = false;

any型

any型は、変数に任意の型の値を割り当てることができます。

ただし、型の安全性を放棄し、動的な JavaScript の柔軟性を利用できます。

any型の特徴の1つ目として、任意の型の値を持つことができます。

any型①

let anything: any = "Hello";
anything = 42;
anything = true;

any型の特徴の2つ目として、メソッドやプロパティへのアクセスがチェックされないことです。

any型②

let anything: any = {};
anything.someMethodThatDoesNotExist();

下記のように、TypeScript はエラーを発生させず、javaScript実行時にエラーが起きます。

$ tsc  index.ts
$ node index.js
anything.someMethodThatDoesNotExist();
         ^
TypeError: anything.someMethodThatDoesNotExist is not a function

any型の特徴の3つ目として、関数の戻り値として使用が可能なことです。

any型③

function uncertainFunction(flag: boolean): any {
    if (flag) {
        return "Hello, world!";
    } else {
        return 12345;
    }
}

const result1 = uncertainFunction(true);
console.log("result1:"+ result1);  // "Hello, world!"

const result2 = uncertainFunction(false);
console.log("result2:" + result2);  // 12345

unknown

anyの型の安全なバージョンです。特徴として具体的な型にアサートするまで、unknown型の変数に対して操作を行うことはできません。

そして、値を直接操作する前に型の確認が必要です。これにより、型の安全性が高まります。

unknown型とany型の違い

// any型の使用
let dataAny: any = "Hello";
let dataLengthAny: number = dataAny.length;  // 問題なく動作します。
console.log("dataLengthAny:" + dataLengthAny);
// unknown型の使用
let dataUnknown: unknown = "Hello";
//let dataLengthUnknown: number = dataUnknown.length;  // コンパイルエラー: Object is of type 'unknown'.
//値を直接操作する前に型の確認をすると、エラーが起こらない。
if (typeof dataUnknown === "string") {
  let dataLengthUnknown: number = dataUnknown.length;  // 型ガードを通過した後にのみ動作します。
  console.log("dataLengthUnknown:" + dataLengthUnknown);
}

関数とは

void型は、値を返さない関数の戻り値の型です。
void型を説明する前に関数について触れていきたいと思います。

関数は一連の処理に名前をつけてまとめたものです。

関数

//add関数は引数を与えられたら、足し算をして結果を返す。
function add(x: number, y: number): number {
    return x + y;
}
//add関数に引数を渡している
console.log(add(10, 20)); //30

void型

先ほどの説明では、「30」という返り値を返していましたが、voidでは値を返さない関数の戻り値の型です。

void

function add(x: number, y: number): void {
    console.log(40); //40
}

console.log(add(10, 20)); //undefined

voidは関数が何も返さない場合の返り値の型として使われるので、返り値のない関数は実際にはundefinedを返します。

$ tsc  index.ts
$ node index.js
40
undefined

null型

null型は何もない、または存在しないことを明示的に示すものです。

void

let currentUser = null; // 現在ログインしているユーザーがいないことを示す

undefined型

undefined型は、値がまだ割り当てられていないことを示すものです。

一般的な使用例:
・変数が宣言されているが、値がまだ割り当てられていない場合。
・オブジェクトの存在しないプロパティにアクセスしたとき。

undefined型

//変数が宣言されているが、値がまだ割り当てられていない場合
let value; 
console.log(value); // undefined

//オブジェクトの存在しないプロパティにアクセスしたとき
const obj = {};
console.log(obj.unknownProperty); // undefined

オブジェクトとは

次にオブジェクトについて説明をします。

オブジェクトは関連するデータや機能の集合体のことです。
オブジェクトはキーと値のペアの集合として考えることができます。
TypeScriptでは、オブジェクトの型を明示的に定義することができます。

オブジェクト

let person: { name: string, age: number } = {
    name: 'Bob',
    age: 25
};

このように、オブジェクトの構造を明示的に示すことで、コードの安全性を向上させることができます。

また、オブジェクトのプロパティには、ドット記法またはブラケット記法を使用してアクセスできます。

プロパティへのアクセス

//プロパティへのアクセス
console.log(person.name);  // 出力: Bob
console.log(person["age"]); // 出力: 25

型注釈と型推論

では、今回の本題である型注釈と型推論について説明をしていきます。

型注釈は、変数や関数のパラメータに対して、型を明示的に指定することを意味します。これにより、その変数や関数のパラメータが受け入れるデータの種類を明確にすることができます。

型推論は、ある変数の初期値からその変数の型を自動的に推論する能力です。これにより、多くの場合、変数の型を明示的に指定する必要はありません。

先ほど、number型、string型、boolean型でtypeScriptとJavaScriptの違いについて触れましたが、typeScriptの書き方が「型注釈」、JavaScriptの書き方が「型推論」になります。

//number型
let integer: number = 10;  // 「型注釈」
let integer2 = 10;  // 「型推論」
//string型
let singleQuotation:string = 'hello';  //「型注釈」
let singleQuotation2 = 'hello';  // 「型推論」
//boolean型
let isTrue: boolean = true;  // 「型注釈」
let isTrue2 = true;//「型推論」
//オブジェクト
let person: { name: string, age: number } = {
    name: 'Bob',
    age: 25
};//「型注釈」
let person2 = {
    name: "Bob",
    age: 25
};// 「型推論」