JavaScript / TypeScriptでいざという時、忘れている表現備忘録

ちょっと目を離した隙に、何だったかと忘れてしまうJS関連の表現備忘録

型注釈

const value : number = 1;

//オブジェクト
const obj : {
	num: number;
	str: string;
} = {
	num : 1,
	str: 'abc'
}

//配列
const numList : number[] = [0,1,2];

プリミティブ型

- number
- string
- boolean
- null
- undefined
- any : 型チェックなしでエラースルー
- unknown : どの型でもOKだが、型チェックあり

型分割

const {num, str} = obj
console.log(num);
// 1
console.log(str);
// abc

Object宣言省略

オブジェクト宣言時、変数がプロバティ名と同一の場合は省略可能

const num = 1;
const str = 'bcd';

//普通に宣言
const obj = {
	num: num,
	str: str
}

//省略して宣言
const obj = {num, str}

オプショナルチェーン

let obj : any = undefined;
console.log(obj.property);
// Error
console.log(obj?.property);
// undefined

スプレッド構文

const numList :number[] = [1,2,3];
const extNumList :number[] = [...numList,4,5];

//オブジェクト
const obj = {
	num : 1,
	str : 'abc'
};
const extObj = {
	...obj,
	prop : 'prop',
}
// {num:1 ,str:'abc' ,prop:'prop'}

テンプレートリテラル

const str = 'world';
const message = `Hello, ${str}`;
console.log(message);

Null 合体演算子

左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返す

const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"

三項演算子

const age = 26;
const beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"

型注釈

function func(arg1: number, arg2: string): boolean{
	return true;
}

アロー関数

const func = (arg1: number, arg2: string): boolean => {
	return true;
}

//戻り値なし
const func = (arg1: number, arg2: string): void => {
	// do
}

型定義

type NewObj = {
	num: number;
	str: string;
}

//関数型定義
type FuncType = (arg1:number, arg2: staring) => boolean;
const func: FuncType = (arg1,arg2) => {
	return true;
}

//オブジェクト型定義
type NewObj1 = {
	num1: number;
	str1: string;
}
type NewObj2 = {
	num2: number;
	str2: string;
}

//ユニオン型
type unionType = NewObj1 | NewObj2;
const obj1 : unionType = {
	num1: 1,
	str1: 'abc'
}

//インターセクション型
type unionType = NewObj1 & NewObj2;
const obj2 : unionType = {
	num1: 1,
	str1: 'abc',
	num2: 2;
	str2: 'def';
}

ジェネリクス

const genFunc = <T>(arg: T) : T => {
	return arg;
}

genFunc<string>('abc');
//以下と同じ意味
const genFunc = (arg: string): string => {
	return arg
}

ユーティリティ型

type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};

//すべてのプロパティをオプションプロパティにする
type PartialPerson = Partial<Person>;

//以下と同じ意味
type PartialPerson = {
  surname?: string;
  middleName?: string;
  givenName?: string;
};

//すべてのプロパティからオプショナルであることを意味する?を取り除く
type RequiredPerson = Required<Person>;

//以下と同じ意味
type RequiredPerson = {
  surname: string;
  middleName: string;
  givenName: string;
};