真偽値

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で定義する

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);