TypeScript 基礎をまとめる
型の定義の仕方
- アノテーション
- type alias
- interface
アノテーション
アノテーションの書き方は変数名に対して
定義したい物:type
とかくことで型を定義できる。
//例
const typeString: string = "文字列";
const typeNumber: number = 2;
const typeBoolean: boolean = true;
type alias
type alias(型エイリアス)の書き方は
type 型を定義する名前 = 型
と書くことで定義ができます。
型エイリアスは名前をつけるためのものです。
//例
type typeString = string;
const name: typeString = "山田 太郎";
type typeNumber = number;
const age: typeNumber = 25;
interface
interface はオブジェクトや関数、クラスの仕様の定義をするために使います。
type と interface の使い分けは作るコードの全体に関わる様なものは interface を局所的に使うなら type という使い分けがいいかと思います。class という設計図を作るときには全体に関わってくる場合が多いと思うので interface を使うといいと思います。
書き方は
interface 型を定義する名前 { 型 }
と書くことで定義できます。
interface Person {
name: string
age: number
}
const person:Person = { name: '山田 太郎',age:20 }
class person2 implements Person {
constructor(){
this.name= ""
this.age= 0
}
name = '田中 太郎'
age = 25
}
const tanaka = new person2()
型について
- String 型
- Number 型
- Boolean 型
- Array 型 tuple 型
- Object 型
- null と undefined
- 関数
- any
String 型
string 型は文字列の型です。
typescript だとダブルクオート""や、シングルクオート''、バッククオート``(テンプレートリテラル)で挟んでやることでかけます。
//例
const typeString1: string = "文字列";
const typeString2: string = "文字列";
const typeString3: string = `文字列`;
Number 型
number 型はその名の通り数値の型です。
数値なので整数、負の整数、少数と数値だったらなんでもこれに当たります。
//例
const typeNumber1: number = 1;
const typeNumber2: number = -1;
const typeNumber3: number = 0.1;
Boolean 型
boolean 型は真偽値の型です。
true と false の２種類の値を持ちます。
//例
const typeBoolean1: boolean = true;
const typeBoolean2: boolean = false;
const typeBoolean3: boolean = 20 + 30 === 50; //true
Array 型 tuple 型
Array 型は配列の型を表します。
配列の中身の型も定義できます。
const typeArray1: string[] = ["おはよう", "こんにちは", "こんばんは"];
const typeArray2: number[] = [1, 2, 3, 4, 5, 6];
tuple 型は Array 型より厳格に配列を定義できます。
またスプレッド構文を用いて残りの要素に対して型を定義することも可能です。
const typeTuple1:[string,number]=["山田",20]
const typeTuple2:[string,...number[]]=["歳",20,30,23,25,19,10]
Object 型
Object 型は key と値をセットにしたものの型を表します。
Object 型はその key に対してどの型が入るのかをひとつひとつ定義することができます。
//例 アノテーション
const typeObject1:{
name:string
age:number
hobby:string[]
}={
name:"山田 太郎",
age:20,
hobby:["絵","歌"]
}
//型エイリアス
type TypeObject = {
name:string
age:number
hobby:string[]
}
const typeObject2:TypeObject={
name:"田中 太郎",
age:23,
hobby:["サッカー","車鑑賞"]
}
null undefined
null は定義はしているが値が入っていないことを指します。
undefined は定義もしていないしあたいも入っていないことを指します。
const typeNull: null = null;
const typeUndefined: undefined = undefined;
関数
関数は戻り値がある時とない時で型が違います。
戻り値がある時はその戻り値の型を指定します。
戻り値のない時は void 型を返します。
また、引数の型も定義できます。
//例 アノテーション
const arg = "戻り値なし";
//戻り値なし
const typeFunction1 = (arg: string): void => {
console.log(arg1);
};
//戻り値あり
const typeFunction2 = (num: number): number => {
return num + 20;
};
//型エイリアス
//戻り値なし
type TypeFunction3 = {
(arg: string): void
};
const typeFunction3: TypeFunction3 = (arg) => {
console.log(arg1);
};
//戻り値あり
type TypeFunction4 = {
(arg: string): number
};
const typeFunction4: TypeFunction4 = (num) => {
return num + 20;
};
any
anyは全ての型を通します。なんでもオッケー!
ただ型定義できるのにanyを使うとtypescriptを使っている意味がないです。
//以下はまた後日更新します。
その他の型
- union 型
- 交差型
- unknown 型
Discussion