Twitter

Category

もっと見る

Tag

もっと見る

プログラミング言語

【TypeScript】基本構文と基本型、interfaceやType Aliasまでをご紹介

【TypeScript】基本構文と基本型、interfaceやType Aliasまでをご紹介

目次

  1. 型の基本構文
    1. 明示的な型付け
    2. 暗黙的な型付け
  2. 型の種類
  3. 型の注釈（interface）
  4. 型に別名をつける（Type Alias）
  5. 最後に

前回に引き続き、TypeScriptについて勉強したことをまとめていきたいと思います。

前回の記事をご覧になっていない方は先に下記をご覧ください。

前回の記事：【TypeScript】TypeScriptとは？概要やメリット、環境構築からHelloWorld表示
https://www.dailyupblog.com/languages/1680/

前回の記事で、TypeScriptの特徴として、変数にデータ型を宣言することができるということをご紹介しました。

今回は、基本構文と基本の型の種類をご紹介します。

また、それらに付随する形で、型の注釈として利用できるinterfaceや無名の型に別名をつけられるType Aliasもご紹介します。

それではいきましょう。

型の基本構文

typeScriptの型の基本構文を紹介していきます。

明示的な型付け

型の宣言は、変数の後にコロンをつけて記述します。

let {変数名}: {型} = {値}

例えば、下記の例だと、変数「message」にstring型（文字列型）の型付けをしています。

let message: string = "こんにちは";

message = 1; //エラー

string型の型付けをしているため、変数「message」に例えば数列を代入したら、コンパイルエラーになります。

また、関数の引数と返り値に型を指定することもできます。

例えば下記の例を見てみましょう。

const increament = (num: number): number => {
	return num + 1;
}

console.log(increament(1));　// 2

console.log(increament("あいうえお"));　// エラー

関数「increament」は引数と返り値にnumber型（数値型）を指定しています。

数値で受け取って、1を足した数値で返すというものです。

上の例のように、1を渡せば、特にエラーなく2が返ってきます。

例えば、この関数に他の型を引数で渡したり、引数は合っていても、返り値の型が間違っていたエラーになります。

const errorFunc = (num: number): number  => {
	return num.toString(); //string型を返すのでエラー
}

暗黙的な型付け

TypeScriptでは、コードから型を推測する機能がついています。

例えば、下記の例です。

let num = 1;

num = "こんにちは" //エラー

変数「num」は特に型宣言はしていませんが、number型の1を代入しています。

その後string型の「こんにちは」が代入されていますが、number型が推測されるので、エラーになります。

const increament = (num: number) => {
	return num + 1;
}

let num = increament(1);

num = "こんにちは"; //エラー

上記の例では、関数の返り値の型を指定していなパターンです。

引数をnumber型で受け取って、その数値に1を足して返すという関数なので、返り値はnumber型と推測されます。

なので、変数「num」に関数「increament」の返り値を代入しているので、numはnumber型が確定します。

その後にnumにstring型を代入したらエラーになります。

型の種類

TypeScriptで扱える型の種類をご紹介します。

TypeScriptでは、これから紹介する基本の型を「プリミティブ型」といいます。

string文字列
number数値
boolean真偽値
any型チェックしないことを明示
nullnull
undefinedundefined
void他のどの型でもないことを明示
Array配列
Tuple組み合わせ
Objectオブジェクト

string型

ダブルクォーテーションやシングルクォーテーションで囲った文字列はstring型となります。

let str: string = "あいうえお";

number型

javascriptで扱える数値を表す型です。10進数、2進数、8進数、16進数も取り扱いが可能です。

let num: number = 999;

boolean型

真偽値を表す型です。trueかfalseのどちらかをとります。

let flag: boolean = true;

any型

anyは型チェックを必要としない場合に使用します。

anyは型チェックの穴を作るためあまり使用は推奨しません。

せっかくのTypeScriptの強みがなくなってしまい、anyを使用することで台無しになってしまいます。

なので、使う場面は影響範囲が限定される場面など、考えて使うようにしましょう。

let num: any = 1;

let num = "あいうえお"; //エラーにならない

null型とundefined型

それぞれJavaScriptにおけるnullとundefinedに対応します。

TypeScriptでは、これらを他の型の変数に代入してもエラーにはなりません。

let num: number = null; //エラーにならない
let num: number = undefined; //エラーにならない

オプションstrictNullChecksをオンにすることで、非null型へのnullの代入および非undefined型へのundefinedの代入はコンパイルエラーになります。

nullやundefinedを期待しない変数に代入できてしまうので危険であり、公式でもstrictNullChecksをオンにするのは推奨されているので、strictNullChecksはtrueに設定するようにしましょう。

void型

voidは、他のどの型でもないことを明示します。

const testFunc = (message: string) => {
	console.log(message);
}

例えば、上記の関数の例だと、返り値を指定していません。

console.logで受け取った文字列を出力するだけの関数なので、返り値の指定は不要です。

VSCodeでこの関数を調べると、下記のように、返り値の型として、voideが指定されています。

これは何も返ってこないことを明示しているわけです。

Array型

Arrayはその名の通り、配列の型を表します。

Array型は長さは特に決まっていませんが、指定できる型の種類は一つです。

なので、その配列の値は全て指定した一つの型になります。

let array01: Array<number> = [1,2,3,4];
let array02: number[] = [1,2,3,4];

書き方は二つあり、上記のようになります。

Tuple型

長さが特に決まっていない代わりに指定できる型の種類が1つのArray型に対して、Tuple型は長さを明示する必要はありますが、異なる複数の型を指定することができます。

let array01: [string, number] = ["あいうえお",1];

Object型

Objectも型として表すことが可能です。

const introduction = (member: {name: string, age: number}): string => {
	return `私の名前は${member.name}です。年齢は${member.age}歳です。`;
}

console.log(introduction({name: "太郎", age: 26}));　//私の名前は太郎です。年齢は26歳です。

上記の例を見てみると、関数「introduction」は自己紹介の関数で、引数にObjectをとっています。

なので、関数を呼び出すときに引数に「{name: “太郎”, age: 26}」とObjectを指定しています。

型の注釈（interface）

TypeScriptでは、インターフェースを利用して、型のチェックを行うことが可能です。

インターフェースとは、主にオブジェクト指向として利用されることがしばしばですが、TypeScriptではもちろんオブジェクト指向での利用も可能ですが、型チェックとして利用することもできます。

これを型注釈といいます。

オブジェクト指向での利用に関しては今回は省きます。（また別の記事で紹介します。）

例えば、下記の例です。

interface Member {
	name: string,
	age: number
}

let member01: Member = {
	name: "太郎",
	age: 26
}

const memberReference = (member: Member): string => {
	return `名前：${member.name}\n年齢：${member.age}`;
}

console.log(memberReference(member01));
//
名前：太郎
年齢：26

「Member」という型を前もって作成しておきました。

この型の中身はstring型のプロパティ「name」とnumber型のプロパティ「age」が含まれています。

その次の変数「member01」は、事前に作っておいたMemberインターフェースを型として指定しており、中身もMember型の内容にあったものになっています。

その後の関数「memberReference」は、引数にMember型を取るようにしています。

この関数は、受け取ったメンバーデータの内容を表示するものです。

このように、型注釈は、事前にインターフェースで型のようなものを作成して、独自の型として指定することが可能です。

ただし、この例だと、必ずMember型では、nameとageを設定しなければなりません。

例えば、下記のように、プロパティが不足しているとエラーになります。

let member01: Member = {
	name: "太郎"
}

このように特定のプロパティは任意設定できるようにしたい場合もあると思います。

その場合は下記のように記述すれば良いです。

interface Member {
	name: string,
	age?: number
}

//エラーにならない
let member01: Member = {
	name: "太郎"
}

プロパティの名前の後に「?」の修飾子をつけることで、そのプロパティは任意設定になります。

インターフェース内のプロパティに付けられる修飾子は他にもあり、例えば、プロパティの名前の前に「readonly」をつければ、そのプロパティは読み取り専用になります。（書き換え不可）

interface Member {
	readonly name: string,
	age: number
}

let member01: Member = {
	name: "太郎",
	age: 26
}

member01.name = "次郎";　//エラーになる

また、下記のように記述することで、インターフェース内のプロパティの名前（キー）を任意につけることができます。

その際にプロパティの名前の型も指定できます。

interface Member {
	name: string,
	[key: string]: string //string型の値を設定できるstring型の任意のキー名を設定
}

let member01: Member = {
	name: "太郎",
	hobby: "映画鑑賞"
}

let member02: Member = {
	name: "太郎",
	age: 26　//エラーになる
}

また、型注釈は関数の引数や戻り値の型である関数型もインターフェースで作成が可能です。

例えば下記の例です。

interface testFunc {
	(num: number): number
}

const increment: testFunc = (num: number): number => {
	return num + 1;
}

console.log(increment(1));　//2

インターフェース「testFunc」の中で、引数と戻り値をそれぞれnumber型で指定しています。

その後の関数「increment」では、testFunc型を指定しており、引数も戻り値もnumber型にしています。

ここで、引数や戻り値をstring型などにしたらエラーになります。

型に別名をつける（Type Alias）

特定の型に別名をつけることも可能です。

例えば、下記の例です。

type ID = number;

let memberId: ID = 1;

memberId = "あいうえお";　//エラーになる

number型に別名で「ID」を付けています。

これでその後の変数「memberId」にID型を設定することで、number型の値以外代入できなくなります。

もちろんstring型の値を代入すれば、エラーになります。

これをType Aliasといいます。

先ほど紹介した型注釈のinterfaceのように使うこともできます。

type Member = {
	name: string,
	age: number
}

let member01: Member = {
	name: "太郎",
	age: 26
}

先ほどのinterfaceの例と全く同じ内容をType Aliasで記述しました。

先ほどのinterfaceはあくまで型注釈としての機能でしたが、こちらは型に別名をつける機能なので、用途は似ていますが、性質は違います。

最後に

今回は、TypeScriptの型の基本構文から、型の種類、interfaceとType Aliasまでをご紹介しました。

今回の記事で、TypeScriptの性質を何となく掴めたのではないでしょうか。

次回は、TypeScriptの型の他の種類や機能を紹介していきます。

今回紹介したのは基本で、TypeScriptにはまだまだ様々な使い方があるので、これからも学習したことを記事にしていこうと思います。

本記事をご覧いただき、ありがとうございました。

前回の記事：【TypeScript】TypeScriptとは？概要やメリット、環境構築からHelloWorld表示
https://www.dailyupblog.com/languages/1680/

次の記事：【TypeScript】Union TypesとGenericsの使い方をご紹介 〜型操作応用編〜
https://www.dailyupblog.com/languages/1741/

関連記事

関連記事