Typescriptの基本的な型定義 @yukilulu0229

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html


## 真偽値

```sample.ts
const hasValue: boolean = true;
console.log(hasValue);
```
boolean

## 数字

```sample.ts
const count: number = 10;
console.log(count);
const float: number = 3.14;
console.log(float);
const negative: number = -30;
console.log(negative);
```

number

## 文字列

```sample.ts
const single: string = "single";
console.log(single);
const double: string = "double";
console.log(double);
const back: string = `back`;
console.log(back);
```

string


## オブジェクト

```sample.ts
const person: {
  name: string;
  age: number;
} = {
  name: "yukilulu",
  age: 20,
};
console.log(person);
console.log(person.name);
console.log(person.age);
```

{}, object

### 詳細に書く場合

```
{
  name: string;
  age: number;
}
```

### ネストした場合

```sample.ts
const person2: {
  name: {
    firstName: string;
    lastName: string;
  };
  age: number;
} = {
  name: {
    firstName: "yukilulu",
    lastName: "0229",
  },
  age: 20,
};
console.log(person2);
console.log(person2.name.firstName);
console.log(person2.name.lastName);

```

```
{
  name: {
    firstName: string;
    lastName: string;
  };
  age: number;
}
```

## 配列
```sample.ts
const fruits: string[] = ["Apple", "Banana"];
console.log(fruits)
```

string[]

配列型を指定してその中に入るのは文字列のみと指定している

### なんでも入るようにする

```sample.ts
const fruits2: any[] = ["Apple", "Banana", 2];
console.log(fruits2)
```
any[]

## Tuple型

```sample.ts
const book: [string, number, boolean] = ["manga", 600, false];
console.log(book)
```

[string, number, boolean]

配列の中の順番に型指定したいときなどに使う

### 列挙型(enum)

```sample.ts
enum CoffeeSize  {
  SHORT = "SHORT",
  TALL =  "TALL",
  GRANDE =  "GRANDE",
}

const coffee: {
  hot: boolean
  size: string
} = {
  hot: true,
  size: CoffeeSize.SHORT
}

console.log(coffee.size);
```

```
enum CoffeeSize  {
  SHORT = "SHORT",
  TALL =  "TALL",
  GRANDE =  "GRANDE",
}
```

enumで定義する

https://qiita.com/KokiSakano/items/51cafbf7bda527a9d5bf


## union型

複数の型を持ちたいとき

```sample.ts
let unionType: number | null;
unionType = null;
console.log(unionType);
unionType = 10;
console.log(unionType);
```

```number | null```
```|``` で複数にわける

### 配列の中身を複数の型で持ちたいとき

```sample.ts
let unionType2: (string | number)[] = [21, "hello"]
console.log(unionType2);
```

```(string | number)[]```で使う

## リテラル型

特定のものしか代入できなくなする

```sample.ts
const apple: "apple" = "apple"
console.log(apple);
```

```: "apple"```

これによって文字列のappleしか代入できなくなる

### 複数のリテラル型

```sample.ts
let clothSize : "small" | "medium" | "large" = "large";
const cloth: {
  color: string;
  size: "small" | "medium" | "large"
} = {
  color: "white",
  size: clothSize,
}
console.log(cloth.size);

```

```"small" | "medium" | "large"```
ユニオン型でつなげる

```
const cloth: {
  color: string;
  size: "small" | "medium" | "large"
} = {
  color: "white",
  size: clothSize,
}
```

オブジェクトの型指定は合わせて上げたほうがいい


## typeエイリアス

型をエイリアス化して簡潔に当てていけるようにする

```sample.ts
type ClothSize = "small" | "medium" | "large"

let clothSize : ClothSize = "large";
const cloth: {
  color: string;
  size: ClothSize
} = {
  color: "white",
  size: clothSize,
}
console.log(cloth.size);

```

```type ClothSize = "small" | "medium" | "large"```
で変数のように指定する

```let clothSize : ClothSize = "large";```
で型を変数にように扱える

```
const cloth: {
  color: string;
  size: ClothSize
}
```
使い回しもできる

## 関数の型指定

```sample.ts
function add(num1: number, num2: number):number {
  return num1 + num2;
}
console.log(add(3, 5))
```

```num1: number, num2: number```
引数に型指定


```function add(num1: number, num2: number):number```
返り値の型指定 ()の後ろに

### アロー関数のとき

```sample.ts
const add2 = (a: number, b: number): number => {
  return a + b;
};
console.log(add2(1, 3));
```

```const add2 = (a: number, b: number): number```

同じように()の後ろに返り値を書く

### 関数の戻り値がない場合 voidを使う

```sample.ts
function sayHello(): void {
  console.log("Hello");
}

sayHello();
```

```function sayHello(): void```
戻り値がないのでカッコの後ろに```void```

## 特定の関数のみを代入できる変数

```sample.ts

function add(num1: number, num2: number): number {
  return num1 + num2;
}

const anotherFunction: (n1: number, n2: number) => number = add;
console.log(anotherFunction(3, 4));
```

```anotherFunction: (n1: number, n2: number) => number```
add関数の引数を()で指定している
```=>``` のあとに戻り値を指定している

### アロー関数

```sample.ts
const doubleNumber:(num: number) => number = num => num * 2;
console.log(doubleNumber(2));
```

```doubleNumber:(num: number) => number```
変数のほうに型定義してあげるとスッキリする


## コールバック関数を取り扱う

```sample.ts
const doubleNumber:(num: number) => number = (num:number) => num * 2;

function doubleLog(num: number, callBackFunction: (num: number) => number):void {
  const doubleNumber: number = callBackFunction(num * 2);
  console.log(doubleNumber);
}

doubleLog(3, doubleNumber);

```

```doubleLog(3, doubleNumber);```

ここの```doubleNumber```関数を引数にいれてるのがコールバック関数


```
function doubleLog(num: number, callBackFunction: (num: number) => number):void {
  const doubleNumber: number = callBackFunction(num * 2);
  console.log(doubleNumber);
}
```

```callBackFunction: (num: number) => number)```
ここの部分がdoubleNumber関数と一致している
```const doubleNumber:(num: number) => number = (num:number) => num * 2;```


## まとめ

```sample.ts
const hasValue: boolean = true;
console.log(hasValue);

const count: number = 10;
console.log(count);
const float: number = 3.14;
console.log(float);
const negative: number = -30;
console.log(negative);

const single: string = "single";
console.log(single);
const double: string = "double";
console.log(double);
const back: string = `back`;
console.log(back);

const person: {
  name: string;
  age: number;
} = {
  name: "yukilulu",
  age: 20,
};
console.log(person);
console.log(person.name);
console.log(person.age);

const person2: {
  name: {
    firstName: string;
    lastName: string;
  };
  age: number;
} = {
  name: {
    firstName: "yukilulu",
    lastName: "0229",
  },
  age: 20,
};
console.log(person2);
console.log(person2.name.firstName);
console.log(person2.name.lastName);

const fruits: string[] = ["Apple", "Banana"];
console.log(fruits);

const book: [string, number, boolean] = ["manga", 600, false];
console.log(book);

enum CoffeeSize {
  SHORT = "SHORT",
  TALL = "TALL",
  GRANDE = "GRANDE",
}
const coffee: {
  hot: boolean;
  size: string;
} = {
  hot: true,
  size: CoffeeSize.SHORT,
};
console.log(coffee.size);

let unionType: number | null;
unionType = null;
console.log(unionType);
unionType = 10;
console.log(unionType);

const unionType2: (string | number)[] = [21, "hello"];
console.log(unionType2);

const apple = "apple";
console.log(apple);

type ClothSize = "small" | "medium" | "large";

const clothSize: ClothSize = "large";
const cloth: {
  color: string;
  size: ClothSize;
} = {
  color: "white",
  size: clothSize,
};
console.log(cloth.size);

function add(num1: number, num2: number): number {
  return num1 + num2;
}
console.log(add(3, 5));

const add2 = (a: number, b: number): number => {
  return a + b;
};
console.log(add2(1, 3));

function sayHello(): void {
  console.log("Hello");
}
sayHello();

const anotherFunction: (n1: number, n2: number) => number = add;
console.log(anotherFunction(3, 4));


const doubleNumber:(num: number) => number = (num:number) => num * 2;
console.log(doubleNumber(2));

function doubleLog(num: number, callBackFunction: (num: number) => number):void {
  const doubleNumber: number = callBackFunction(num * 2);
  console.log(doubleNumber);
}

doubleLog(3, doubleNumber);


```