【デイトラ学習記録】DAY27 TypeScriptの基本的な型と関数

今回はTypeScriptでよく使われる、基本的な型と関数について学習していきます。

TypeScriptの基本的な型と関数 Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

boolean: 真偽値型

TypeScript

const isOpen: boolean = true;
console.log(isOpen); // true

number: 数値型

TypeScript

const decimal: number = 6;
const float: number = 6.66;
console.log(decimal); // 6
console.log(float); // 6.66

string: 文字列型

TypeScript

const message: string = "Hello, TypeScript!";
console.log(message); // Hello, TypeScript!

Array: 配列型

TypeScript

const fruits: string[] = ["apple", "banana", "cherry"];
console.log(fruits); // ["apple", "banana", "cherry"]

TypeScript

const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers); // [1, 2, 3, 4, 5]

TypeScript

const numbers: Array<number> = [1, 2, 3, 4, 5];
console.log(numbers); // [1, 2, 3, 4, 5]

any: 任意の型

TypeScriptのメリットが薄れるため基本的には使わない。取り急ぎ指定する場合に使用する

TypeScript

let anyType: any = 4;
anyType = "string";
anyType = false;

undefined と null

TypeScript

const u: undefined = undefined;
const n: null = null;
console.log(u); // undefined
console.log(n); // null

型注釈と型推論の概念

型注釈

型を明示的に指定します。

TypeScript

const isDone: boolean = false;

型推論

型を明示的に指定しなくても、初期値から型を推論してくれる。
現場では型推論で書かれていることが多い。

TypeScript

const isDone = false;
// isDone: boolean

Type Alias

TypeScript

type UserID = number;
const userId: UserID = 1;

Type Alias (オブジェクト)

TypeScript

type UserInfo = {
  id: number;
  name: string;
  email: string;
};

const userInfo: UserInfo = {
  id: 1,
  name: "Taro",
  email: "taro@gmail.com",
};

console.log(userInfo);
// { id: 1, name: 'Taro', email: 'taro@gmail.com', }

ユニオン型

TypeScript

type Response = "Yes" | "No";
let value: Response = "Yes";
value = "No";
value = "Maybe"; // エラー

オプショナル型

TypeScript

type User = {
  id: number;
  name: string;
  email?: string;
};

const user: User = {
  id: 1,
  name: "Taro",
};

console.log(user);
// { id: 1, name: 'Taro' }  emailがなくてもエラーにならない

戻り値の型を指定

TypeScript

/**
 * 2つの数値を加算します。
 * 
 * @param a - 1番目の数値
 * @param b - 2番目の数値
 * @returns 加算結果の数値
 */
const add = (a: number, b: number): number => {
  return a + b;
};
console.log(add(1, 2)); // 3

引数をオブジェクトとして受け取る

TypeScript

type Point = {
  x: number;
  y: number;
  z: string;
};

const printPoint = (point: Point): void => {
  console.log(point.x, point.y, point.z);
};
printPoint({ x: 1, y: 2, z: "3" });
// 1 2 "3"

オプショナルとデフォルトの組み合わせ

TypeScript

type UserInfo = {
  id: number;
  name: string;
  email?: string;
};

const createUser = (user: UserInfo, isAdmin: boolean = false): void => {
  console.log(user, isAdmin);
};

createUser({ id: 1, name: "Taro" }); 
// { id: 1, name: 'Taro' } false

createUser({ id: 2, name: "Yamada", email: "yamada@gmail.com" }, true); 
// { id: 2, name: 'Yamada', email: 'yamada@gmail.com' } true

オプショナルとデフォルトの組み合わせ2

現場では、こちらで書かれていることが多い

TypeScript

type UserInfo = {
  id: number;
  name: string;
  email?: string;
  isAdmin: boolean;
};

const createUser = ({ id, name, email = "no email", isAdmin = false }: UserInfo): void => {
  console.log({ id, name, email, isAdmin });
};
createUser({ id: 1, name: "Taro", isAdmin: true });
// { id: 1, name: 'Taro', email: 'no email', isAdmin: true }

感想

TypeScriptの型について学習してきました。

このような基本の部分を疎かにしていると、発展した時に詰まりやすいのでしっかり理解したいと思います。

型推論の概念を知れてよかったです。明示的な方の指定は必須ではなく、現場では型推論で書かれていることが多いとも知れて勉強になりました。