Typescript 基礎 備忘録

ドットインストールで学習して重要だと思った部分をまとめていきます。

変数の型が決まっていない言語:動的型付け言語

変数の型が決まっている言語:静的型付け言語

型推論:booleanは変数の後に明示しなくてもよい。

// undefined型の型付け
let x: undefined = undefined;

// null型の型付け
let y: null = null;

// union型の型付け
let product: string | number | boolean;

// literal型(宣言したもの以外は受け付けない)とunion型(複数の宣言)の組み合わせ
// 宣言したもの以外は受け付けない
let result: 'pass' | 'fail';

// 型に別名をつける。一つ一つ個別に編集する必要がなくなる。
type ResultStatus = 'Pass' | 'Fail';
let englishResult = ResultStatus;
let mathResult = ResultStatus;

// 配列の型付け
const arr: (string | number)[] = ['taro', 70, 'jiro'];

// 配列の要素を変更したくないときはreadonlyをつける
const arr: readonly number[] = [40, 70, 80];

// tuple:順序と型を指定する
const values: [string, number] = ['Taro', 70];

// objectの型付け
// objectに型の別名をつけるときは、typeではなくinterfaceを使うことが多い
interface User {
  name: string;
  age: number;
}

const user : User = {
  name: 'Taro', // JavaScriptと同様に = ではなく、: を使う
  age: 3,
};

// objectでも変更できない場合はreadonly、また、あってもなくても構わないものには?をつける
interface User {
  readonly userName: string;
  score: number;
  address?: string;
}

// 関数の型付け
// 仮引数と返り値の型を明示することで、どのような値が返ってくるか分かりやすくなる
function double(num: number): number {
  return num * 2;
}

// 返り値がない関数にはvoidをつける
function displayName(name: string): void {
  console.log(name);
}

// 関数式の型付け
const double = (num: number): number => {
  return num * 2;
}

// 変数を先に宣言して、そこに関数式を代入するとき
let double: (num: number) => number;
double = (num: number): number => {
  return num * 2;
}

// genericsでどのような型の実引数も受け取れるようにする
// <T>のTの部分は何でも良いが、TypeのTが一般的に使われる
function printTwice<T>(value: T): void {
  console.log(value);
  console.log(value);
}

printTwice('OK');
printTwice(20);