TypeScript｜プログラミングのーと

2023.04.10

kurumin

Contents

数字
文字列
配列
二次元配列
オブジェクト
void
null
underfined
never
型エイリアス
インターフェイス
型ガード
インターセクション型
ユニオン型
リテラル型
列挙型（enum型）

数字

let suuji: number = 1;

文字列

let moji: string = '文字';

配列

let numbers: number[] = [1, 2, 3];

let strings: string[] = [''Tokyo, 'Osaka', 'Kyoto'];

下記の書き方もできるが非推奨。

let numbers2: Array<number> = [1, 2, 3];

共用型（文字列か数字かbooleanか）

let iroiro: (string | number | boolean)[] = [1, false, 'Japan'];

タプル型（制約が強い、VSCodeで予測を出してくれないから覚える）

let iroiro2: [string, number, boolean] = [1, false, 'Japan'];

二次元配列

let nijigenhairetu: number[][] = {
  [50, 100],
  [150, 300]
};

オブジェクト

// なんでも
let profile1: object = {
  name: 'Taro'
};
let profile2: {} = {
  name: 'Hanako'
};
// アノテーション
let profile3: { name: string } = {
  name: 'Hanako'
};

アノテーションで正確な制約を行う。
以下はaxiosライブラリを使用して、APIを外部から取得しコンソールで中身を出力する例。

import axios from 'axios';
export { };

let url: string =
  'https://udemy-utils.herokuapp.com/api/v1/articles?token=token123';

axios.get(url).then(function (response) {
  interface Article {
    id: number;
    title: string;
    description: string;
  }
  let data: Article[];
  console.log(response.data);
});

void

underfinedを返す時はvoid。returnがない時に使う。

function returnNothing(): void {
  console.log("I don't return anything!");
}

console.log(returnNothing());

下記の書き方もできるが非推奨。

function returnNothing(): undefined {
  console.log("I don't return anything!");

  return undefined;
}

console.log(returnNothing());

null

len nai: null = null;

underfined

関数以外はunderfined？

len nai: underfined = underfined;

never

呼び元に戻ってこないときに使用。使うのは例外のときだけ？

function error(message: string): never {
  throw new Error(message)
}

型エイリアス

// 先頭は大文字
type Mojiretsu = string;
const fooString: Mojiretsu = 'Hello';

複雑なもので、他の場所でも使うものであれば、下記のようにタイプを作って流用するといい。

type Profile = {
  name: string;
  age: number;
}

const example1: Profile = {
  name: 'Taro',
  age: 20
};

下記のように書くとタイプを取り出すことができる。

type Profile2 = typeof example1;

インターフェイス

型エイリアスと同じでタイプを指定できるが、こっちは=いらない。

interface ObjectInterface {
  name: string;
  age: number;
}

const user: ObjectInterface = {
  name: 'Taro',
  age: 20
};

型ガード

if文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の処理を安全に実行すること

const kansu = (): number => 43;

let numberAny: any = kansu();
let numberUnknown: unknown = kansu();

let sumAny = numberAny + 10;
// any型では問題なく実行されるが、unknown型の下記コードではエラーが発生する
let sumUnknown = numberUnknown + 10;

// それを回避するために、if文で型を調べて、安全に実行する
if (typeof numberUnknown === 'number') {
  let sumUnknown = numberUnknown + 10;
}

インターセクション型

型を再利用してくっつける

type  Pitcher1 = {
  throwingSpeed: number;
}
type Batter1 = {
  battingAverage: number;
}

type TwoWayPlayer = Pitcher1 & Batter1;

Const Otani: TwoWayPlayer = {
  throwingSpeed: 231
  battingAverage: 0.544
}

ユニオン型

型を複数指定できる。よく使われる。

let value: number | string = 1;

リテラル型

文字列のリテラル型

let dayOfTheWeek: string = '日';
dayOfTheWeek = '31';
//上記ができないように下記の書き方をする
let dayOfTheWeek2: '日' | '月' | '火' | '水' | '木' | '金' | '土' = '日';
dayOfTheWeek2 = '31';  // エラーになる

数値のリテラル型

let month: number = 12;
month = 13;
//上記ができないように下記の書き方をする
let month2: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | = 12;
month2 = 13; // エラーになる

真偽値のリテラル型

制約を付ける必要はあまりないが、このような書き方もできる

let TRUE: true = true;
TRUE = false; //エラーになる

列挙型（enum型）

連番を自動的に付与してほしいときに

enum Months {
  January,
  February,
  March,
  April,
  May,
  Jun,
  July,
  August,
  September,
  October,
  November,
  December
}

console.log(Months.January);  // 0が出力
console.log(Months.April);  // 3が出力

連番を1から付与してほしいときは下記

enum Months {
  January = 1,
  February,
  March,
  April,
  May,
  Jun,
  July,
  August,
  September,
  October,
  November,
  December
}

console.log(Months.January);  // 1が出力
console.log(Months.April);  // 4が出力

ちなみにバニラJSの場合、下記の書き方になる

Const Months {
  January: 0,
  February: 1,
  March: 2,
  April: 3,
  May: 4,
  Jun: 5,
  July: 6,
  August: 7,
  September: 8,
  October: 9,
  November: 10,
  December: 11
}

console.log(Months.January);  // 0が出力
console.log(Months.April);  // 3が出力

キーと値を設定することもできる（バニラJSの書き方はエラーが分かりにくいのでTypeScript使ってる場合は積極的に使う）

enum COLORS {
  RED = '#FF0000',
  WHITE = '#FFFFFF',
  GREEN = '#008000',
  BLUE = '#0000FF',
  BLACK = '#000000'
}

let green = COLORS.GREEN;
console.log({ green }); // #008000

console.log(COLORS.YELLOW); // エラー

// 後から付け足せる
enum COLORS {
  YELLOW = '#FFFF00'
}

COLORS.YELLOW;

ABOUT ME

数字

文字列

配列