Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YukiLulu0229(yukilulu0229)

Typescriptの基本的な型定義 @yukilulu0229

Last updated at Posted at 2024-02-17

真偽値

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);
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?