索引:記号とキーワード

JavaScriptやTypeScriptのコードには?.のような記号やasのようなキーワードが使われます。こういった記号やキーワードはGoogleで検索しづらく、意味を調べるのは難しいものです。

この索引は、JavaScriptとTypeScriptの記号やキーワードから、その名前や意味を調べられるようにするためのものです。コードを読んでいて未知の記号やキーワードに出くわしたら、その意味や使い方を調べる手がかりにしてください。

ここで扱う記号とキーワードには、JavaScript由来のもの、つまり、JavaScriptとTypeScriptに共通して使えるものと、TypeScriptでのみ使えるものを併記しています。JavaScript由来のものにはのマークを、TypeScript固有のものにはマークを表示しています。

記号

! 論理否定演算子 (logical not operator)

真値と偽値を反転します。

! 非Nullアサーション (non-null assertion operator)

値がnullやundefinedでないことを宣言し、コンパイラーに値を非Nullとして解釈させます。

ts
function firstChar(text: string | undefined) {
  // コンパイルエラーにならない
  return text!.charAt(0);
}

ts
function firstChar(text: string | undefined) {
  // コンパイルエラーにならない
  return text!.charAt(0);
}

! Definite Assignment Assertion演算子 (definite assignment assertion operator)

クラスのプロパティが型アノテーションで示された型でセットされていることをコンパイラーに伝える記号です。

ts
class Example {
  public foo!: number;
}

ts
class Example {
  public foo!: number;
}

または、変数の値が型アノテーションで示された型でセットされていることをコンパイラーに伝える記号です。

ts
let numbers!: number[];

ts
let numbers!: number[];

📄️ definite assignment assertion

definite assignment assertionは、変数やプロパティが確実に初期化されていることをTypeScriptのコンパイラに伝える演算子です。

!! Double Bang

double bangはJavaScriptで定義されている演算子ではなく、論理否定演算子を2つ連続したイディオムです。値がtruthyかを求めるときに使われます。

!= 不等価演算子 (inequality operator)

左の値と右の値が異なるか判定します。型が異なる場合は型変換されて比較されます。

js
"1" != 1;
false

js
"1" != 1;
false

!== 厳密不等価演算子 (strict inequality operator)

型を含めて左の値と右の値が異なるか判定します。

js
1 !== "1";
true

js
1 !== "1";
true

" 文字列リテラル (string literal)

"foo"のように文字列リテラルの開始と終了に使われる記号です。

# プライベートプロパティ (private property)

クラスのプロパティのうち#で始まるプロパティはプライベートになります。

js
class ExampleClass {
  #privateField;
  #privateMethod() {}
  static #PRIVATE_STATIC_FIELD;
  static #privateStaticMethod() {}
}

js
class ExampleClass {
  #privateField;
  #privateMethod() {}
  static #PRIVATE_STATIC_FIELD;
  static #privateStaticMethod() {}
}

$ ドル変数 (dollar variable)

慣習的にjQueryなどのライブラリで変数として使われることがあります。変数名として$が使われる場合は、JavaScriptとしては変数以上の特別な意味はありません。

$ 文字列中の変数展開 (placeholder)

テンプレートリテラル内で変数を展開するときに用いられる記号です。

js
const name = "John";
console.log(`Hi, ${name}.`);
"Hi, John."

js
const name = "John";
console.log(`Hi, ${name}.`);
"Hi, John."

% 剰余演算子 (reminder operator)

左の値を右の値で割った余りを計算します。

js
12 % 5;
2

js
12 % 5;
2

%= 剰余代入 (reminder assignment)

左の変数の値に右の値で割り算した余りを左の変数に割り当てます。

& ビット論理積 (bitwise and)

左の値と右の値で共にビットが1である位置のビットを1に します。

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a & b);
00000001
// 出力: 1

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a & b);
00000001
// 出力: 1

& インターセクション型 (intersection type)

複数の型を組み合わせたインターセクション型を定義します。

ts
interface Swordsman {
  sword: string;
}
interface Wizard {
  magic: string;
}
type MagicalSwordsman = Swordsman & Wizard;

ts
interface Swordsman {
  sword: string;
}
interface Wizard {
  magic: string;
}
type MagicalSwordsman = Swordsman & Wizard;

📄️ インターセクション型

考え方はユニオン型と相対するものです。ユニオン型がどれかを意味するならインターセクション型はどれもです。言い換えるとオブジェクトの定義を合成させることを指します。

&= ビット論理積代入 (bitwise and assignment)

左の変数の値と右の値で共にビットが1である位置のビットを1にした結果を左の変数に割り当てます。

js
let a = 1;
00000001
const b = 5;
00000101
a &= b;
console.log(a);
00000001
// 出力: 1

js
let a = 1;
00000001
const b = 5;
00000101
a &= b;
console.log(a);
00000001
// 出力: 1

&& 論理積 (logical and)

左の値がtruthyな場合は右の値を返します。そうでないときは左の値を返します。

特にboolean値が与えられた場合は、双方ともtrueのときにtrueを返し、そうでないときにfalseを返します。

js
console.log(true && true);
true
console.log(true && false);
false
 
console.log(1 && "");
""

js
console.log(true && true);
true
console.log(true && false);
false
 
console.log(1 && "");
""

&&= 論理積代入 (logical and assignment)

左の変数と右の値の&&論理積の結果を左の変数に割り当てます。

js
let a = true;
let b = 1;
a &&= b;
 
console.log(a);
1

js
let a = true;
let b = 1;
a &&= b;
 
console.log(a);
1

' 文字列リテラル (string literal)

'foo'のように文字列リテラルの開始と終了に使われる記号です。

() 即時実行関数の一部 (IIFE: immediately invoked function expression)

定義されるとすぐ実行される即時実行関数式(IIFE; Immediately Invoked Function Expression)の一部に用いられる書き方です。即時実行関数式そのものがデザインパターンで、その一部である()は関数呼び出しのカッコであり、JavaScriptの特別な演算子や構文というわけではありません。即時実行関数式は即時関数と呼ばれることがあります。

js
(function () {})();
//              ^^
(function () {})();
//              ^^
(() => {})();
//        ^^

js
(function () {})();
//              ^^
(function () {})();
//              ^^
(() => {})();
//        ^^

* 乗算演算子 (multiplication operator)

左の値と右の値を掛け算します。

* ジェネレーター関数の宣言 (generator)

Generatorオブジェクトを返すジェネレーター関数を宣言するときに用いられる記号です。

js
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 2;
}

js
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 2;
}

* yield*式 (yield)

別のジェネレーターに移譲する式を書くときに用いられる記号です。

js
function* func1() {
  yield 123;
}
 
function* func2() {
  yield* func1();
  //   ^ここ
}

js
function* func1() {
  yield 123;
}
 
function* func2() {
  yield* func1();
  //   ^ここ
}

*= 乗算代入 (multiplication assignment)

左の変数の値と右の値を掛け算した結果を左の変数に割り当てます。

** べき乗演算子 (exponentiation)

左の値を右の値でべき乗します。

js
2 ** 3;
8

js
2 ** 3;
8

**= べき乗代入 (exponentiation assignment)

左の変数の値を右の値でべき乗した結果を左の変数に割り当てます。

+ 単項正値演算子

number型に変換します。

js
+"1";
1

js
+"1";
1

+ 加算演算子 (addition operator)

2つの値を足し算します。

+ 文字列結合演算子 (concatenation operator)

2つの文字列を結合します。

+ 修飾子の付加

readonlyや?などの修飾子を追加します。

何も指定しない場合は暗黙的に+が付与されるので+を実際に利用する機会はおそらくありません。

ts
type MyPartial<T> = {
  [k in keyof T]+?: T[k];
};
 
type MyReadonly<T> = {
  +readonly [k in keyof T]: T[k];
};

ts
type MyPartial<T> = {
  [k in keyof T]+?: T[k];
};
 
type MyReadonly<T> = {
  +readonly [k in keyof T]: T[k];
};

+= 加算代入 (addition assignment)

左の変数の値とに右の値を足し算した結果を左の変数に割り当てます。

++ インクリメント (increment)

変数に1を足す演算子です。

js
let x = 3;
x++;
console.log(x);
4

js
let x = 3;
x++;
console.log(x);
4

, 関数引数の区切り

複数の引数を関数に与えたり、複数の引数を受け取る関数宣言に用いる記号です。

js
function plus(x, y, z) {
  return x + y + z;
}
plus(1, 2, 3);

js
function plus(x, y, z) {
  return x + y + z;
}
plus(1, 2, 3);

, 配列要素の区切り

複数の要素を持つ配列を宣言するときに用いる記号です。

js
const numbers = [1, 2, 3];

js
const numbers = [1, 2, 3];

, オブジェクトプロパティの区切り

複数のプロパティを持つオブジェクトを宣言するときに用いる記号です。

js
const data = {
  property1: 1,
  property2: true,
  property3: "hello",
};

js
const data = {
  property1: 1,
  property2: true,
  property3: "hello",
};

, タプル型の要素の区切り

複数の要素を持つタプル型を宣言するときに用いる記号です。

ts
type Tuple = [number, string, boolean];

ts
type Tuple = [number, string, boolean];

, カンマ演算子 (comma operator)

左から右に式を評価をして、一番右の評価した値を返します。

js
let x = -1;
const a = (x++, x++, x > 0);
console.log(a);
true

js
let x = -1;
const a = (x++, x++, x > 0);
console.log(a);
true

- 単項負値演算子

正負を反転してnumber型に変換します。

js
-"1";
-1

js
-"1";
-1

- 減算演算子 (subtraction operator)

2つの値を引き算します。

- 修飾子の削除

readonlyや?などの修飾子を削除します。

ts
type MyRequired<T> = {
  [k in keyof T]-?: T[k];
};
 
type Writable<T> = {
  -readonly [k in keyof T]: T[k];
};

ts
type MyRequired<T> = {
  [k in keyof T]-?: T[k];
};
 
type Writable<T> = {
  -readonly [k in keyof T]: T[k];
};

-= 減算代入 (subtraction assignment)

左の変数の値から右の値を引き算した結果を左の変数に割り当てます。

-- デクリメント (decrement)

変数に1を引き算する演算子です。

js
let x = 3;
x--;
console.log(x);
2

js
let x = 3;
x--;
console.log(x);
2

. プロパティへのアクセス (dot operator)

オブジェクトのプロパティにアクセスするときに用いる記号です。

js
const object = { property: 123 };
object.property;
123

js
const object = { property: 123 };
object.property;
123

... スプレッド構文 (spread syntax)

配列などの反復可能オブジェクトを関数の引数にする構文です。

js
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
6

js
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
6

または、配列などの反復可能オブジェクトを配列要素に展開する構文です。

js
const numbers = [1, 2, 3];
const newNumbers = [0, ...numbers, 4];
console.log(newNumbers);
[ 0, 1, 2, 3, 4 ]

js
const numbers = [1, 2, 3];
const newNumbers = [0, ...numbers, 4];
console.log(newNumbers);
[ 0, 1, 2, 3, 4 ]

または、オブジェクトのプロパティを展開する構文です。

js
const object = { x: 1, y: 2 };
const newObject = { ...object, z: 3 };
console.log(newObject);
{ x: 1, y: 2, z: 3 }

js
const object = { x: 1, y: 2 };
const newObject = { ...object, z: 3 };
console.log(newObject);
{ x: 1, y: 2, z: 3 }

... 残余構文 (rest syntax)

関数の残りの引数をひとつの配列として受け取るのに用いられる構文です。

js
function func(a, b, ...rest) {
  return rest;
}
console.log(func(1, 2, 3, 4, 5));
[ 3, 4, 5 ]

js
function func(a, b, ...rest) {
  return rest;
}
console.log(func(1, 2, 3, 4, 5));
[ 3, 4, 5 ]

または、配列などの反復可能オブジェクトの残りの要素を取り出す構文です。

js
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(rest);
[ 3, 4, 5 ]

js
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(rest);
[ 3, 4, 5 ]

または、オブジェクトの残りのプロパティを取り出す構文です。

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object;
console.log(rest);
{ c: 3, d: 4 }

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object;
console.log(rest);
{ c: 3, d: 4 }

/ 除算演算子 (division operator)

左の値を右の値で割り算します。

/ 正規表現リテラル (regular expression literal)

/[0-9]+/のような正規表現リテラルの前後に書かれる記号です。

/= 除算代入 (division assignment)

左の変数の値を右の値で割り算した結果を左の変数に割り当てます。

// 一行コメント (one line comment)

行コメントの開始を表す記号です。

/* 複数行コメント (multiline comment)

複数行コメントの開始を表す記号です。

js
/*
 コメント
 */

js
/*
 コメント
 */

/** JSDoc

慣習的にJSDocなどのドキュメンテーションコメントの開始を表す記号です。これはJavaScriptやTypeScriptの構文ではなく、複数行コメントを用いたドキュメンテーションに慣習的に用いられるものです。

: オブジェクトの一部

オブジェクトプロパティのキーと値の対関係を表すのに用いられる記号です。

js
const object = { a: 1, b: 2, c: 3, d: 4 };

js
const object = { a: 1, b: 2, c: 3, d: 4 };

: 三項演算子の一部 (conditional operator)

a ? b : cのような三項演算子のelseを表すのに用いられる記号です。

: 型アノテーション (type annotation)

変数の型アノテーションに用いられる記号です。

ts
const variable: number = 20;

ts
const variable: number = 20;

または、関数の引数や戻り値の型アノテーションに用いられる記号です。

ts
function numberToString(x: number): string {
  return x.toString();
}

ts
function numberToString(x: number): string {
  return x.toString();
}

< 小なり演算子 (less than operator)

左の値が右の値よりも小さいか判定します。

< ジェネリクス (generic)

ジェネリクスの型引数の開始に用いられる記号です。

ts
function func<T>(x: T) {}
const result = func<string>("hello");

ts
function func<T>(x: T) {}
const result = func<string>("hello");

📄️ ジェネリクス

型の安全性とコードの共通化の両立は難しいものです。あらゆる型で同じコードを使おうとすると、型の安全性が犠牲になります。逆に、型の安全性を重視しようとすると、同じようなコードを量産する必要が出てコードの共通化が達成しづらくなります。こうした問題を解決するために導入された言語機能がジェネリクスです。ジェネリクスを用いると、型の安全性とコードの共通化を両立することができます。

< JSX

JSXと呼ばれるXMLリテラルの開始に現れる記号です。

Hello.tsx
tsx
function Hello() {
  return <div>HELLO</div>;
}

Hello.tsx
tsx
function Hello() {
  return <div>HELLO</div>;
}

< 型アサーション (type assertion)

型アサーションに用いられる記号です。asの別の書き方です。

ts
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

ts
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

<= 小なりイコール演算子 (less than or equal)

左の値が右の値以下か判定します。

<< ビット左シフト演算子 (left shift operator)

左の値のビットを右の値の数だけ左にずらします。

js
const a = 1;
00000001
const b = 3;
console.log(a << b);
00001000
// 出力: 8

js
const a = 1;
00000001
const b = 3;
console.log(a << b);
00001000
// 出力: 8

<<= 左シフト代入 (left shift assignment)

左の変数の値のビットを右の値の数だけ左にずらした結果を左の変数に割り当てます。

js
let a = 1;
00000001
const b = 3;
a <<= b;
console.log(a);
00001000
// 出力: 8

js
let a = 1;
00000001
const b = 3;
a <<= b;
console.log(a);
00001000
// 出力: 8

= 代入演算子 (assignment)

左の変数に右の値を割り当てます。

== 等価演算子 (equality)

左の値と右の値が等しいか判定します。型が異なる場合は型変換されて比較されます。

js
"1" == 1;
true

js
"1" == 1;
true

=== 厳密等価演算子 (strict equality)

型を含めて左の値と右の値が等しいか判定します。

js
"1" === 1;
false

js
"1" === 1;
false

=> アロー関数の一部 (arrow function)

アロー関数の引数と関数ボディーの間に書かれる記号です。

js
const increment = (num) => num + 1;

js
const increment = (num) => num + 1;

> 大なり演算子 (greater than)

左の値が右の値よりも大きいか判定します。

>= 大なりイコール演算子 (greater than or equal)

左の値が右の値以上か判定します。

>> ビット右シフト演算子 (right shift)

左の値のビットを右の値の数だけ右にずらします。

js
const a = 8;
00001000
const b = 3;
console.log(a >> b);
00000001
// 出力: 1

js
const a = 8;
00001000
const b = 3;
console.log(a >> b);
00000001
// 出力: 1

>>= 右シフト代入 (right shift assignment)

左の変数の値のビットを右の値の数だけ右にずらした結果を左の変数に割り当てます。

>>> 符号なし右シフト演算子 (unsigned right shift)

左の値のビットを右の値の数だけ右にずらします。左に入る符号ビットは常に0になります。

js
const a = -2;
11111111111111111111111111111110
const b = 3;
console.log(a >>> b);
00011111111111111111111111111111
// 出力: 536870911

js
const a = -2;
11111111111111111111111111111110
const b = 3;
console.log(a >>> b);
00011111111111111111111111111111
// 出力: 536870911

>>>= 符号なし右シフト代入 (unsigned right shift assignment)

左の変数の値のビットを右の値の数だけ右にずらした結果を左の変数に割り当てます。左に入る符号ビットは常に0になります。

? 三項演算子の一部 (conditional operator)

三項演算子a ? b : cの一部で、条件式の終わりに置かれる記号です。

? オプション修飾子 (optional property)

オブジェクトのプロパティを任意プロパティとして定義します。

ts
interface User {
  name: string;
  // name は必須
  age?: number;
  // age は任意
}
const user: User = { name: "taro" };

ts
interface User {
  name: string;
  // name は必須
  age?: number;
  // age は任意
}
const user: User = { name: "taro" };

または、関数の引数を必須ではなくします。

ts
function func(x?: number) {}
func();
// xがなくてもOK

ts
function func(x?: number) {}
func();
// xがなくてもOK

?. オプショナルチェーン (optional chaining)

プロパティのアクセス元がnullまたはundefinedのときにエラーを発生させずにundefinedを返します。

js
const user = null;
console.log(user.name);
Cannot read property 'name' of null
console.log(user?.name);
undefined

js
const user = null;
console.log(user.name);
Cannot read property 'name' of null
console.log(user?.name);
undefined

?? Null合体 (nullish coalescing operator)

左の値がnullまたはundefinedのときに右の値を返します。そうでない場合は左の値を返します。

js
console.log(undefined ?? 1);
1
console.log(2 ?? 1);
2

js
console.log(undefined ?? 1);
1
console.log(2 ?? 1);
2

??= Null合体代入 (logical nullish assignment)

左の変数の値がnullまたはundefinedの場合のみ右の値を左の変数に割り当てます。

js
const user1 = { name: undefined };
user1.name ??= "taro";
console.log(user1.name);
taro
 
const user2 = { name: "kaori" };
user2.name ??= "taro";
console.log(user2.name);
kaori

js
const user1 = { name: undefined };
user1.name ??= "taro";
console.log(user1.name);
taro
 
const user2 = { name: "kaori" };
user2.name ??= "taro";
console.log(user2.name);
kaori

@ デコレーター (decorator)

デコレーターはクラスやクラスメンバーに注釈を追加するもので、デコレーターを使うのに用いられる記号です。

[ 配列リテラル (array literal notation)

[1, 2, 3]のような配列リテラルの開始に用いられる記号です。

[ アクセッサー (bracket notation)

配列の要素やオブジェクトのプロパティにアクセスするときに用いられる記号です。

js
const numbers = [1, 2, 3];
numbers[0];
1
const object = { a: 1, b: 2 };
object["a"];
1

js
const numbers = [1, 2, 3];
numbers[0];
1
const object = { a: 1, b: 2 };
object["a"];
1

[ 配列の分割代入 (destructuring assignment)

配列などの反復可能オブジェクトの分割代入の開始に用いられる記号です。

js
const numbers = [1, 2, 3];
const [first, ...rest] = numbers;
// 分割代入
console.log(first, rest);
1 [ 2, 3 ]
 
// 分割代入
function func([first, ...rest]) {
  console.log(first, rest);
}
func([1, 2, 3]);
1 [ 2, 3 ]

js
const numbers = [1, 2, 3];
const [first, ...rest] = numbers;
// 分割代入
console.log(first, rest);
1 [ 2, 3 ]
 
// 分割代入
function func([first, ...rest]) {
  console.log(first, rest);
}
func([1, 2, 3]);
1 [ 2, 3 ]

[ インデックス型 (index signature)

インデックス型(index signature)の開始に用いられる記号です。

ts
type StringKeysAndStringValues = {
  [key: string]: string;
};

ts
type StringKeysAndStringValues = {
  [key: string]: string;
};

📄️ インデックス型

TypeScriptで、オブジェクトのフィールド名をあえて指定せず、プロパティのみを指定したい場合があります。そのときに使えるのがこのインデックス型(index signature)です。たとえば、プロパティがすべてnumber型であるオブジェクトは次のように型注釈します。

[] 配列型 (array type)

配列型を表現するのに用いられる記号です。

ts
let names: string[];
type FooList = Foo[];

ts
let names: string[];
type FooList = Foo[];

\ 文字列エスケープシーケンス (escaping character)

文字列のエスケープシーケンスの開始に用いられる記号です。

js
const lineBreak = "\n";

js
const lineBreak = "\n";

^ ビット排他的論理和 (bitwise xor)

左の値と右の値でビットの値が異なる位置のビットを1にします。

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a ^ b);
00000100
// 出力: 4

js
const a = 1;
00000001
const b = 5;
00000101
console.log(a ^ b);
00000100
// 出力: 4

^= ビット排他的論理和代入 (bitwise xor assignment)

左の変数の値と右の値でビットの値が異なる位置のビットを1にした結果を左の変数に割り当てます。

_ 数値の区切り文字

数値の可読性のために、桁区切りとして用いられる記号です。

js
const hyakuman = 1_000_000;

js
const hyakuman = 1_000_000;

_ アンダースコア変数

慣習的にlodashなどのライブラリで変数として使われることがあります。変数名として_が使われる場合は、JavaScriptとしては変数以上の特別な意味はありません。

また、慣習的に使わない変数の受け取り先に使われることがあります。たとえば、2つの引数を受け取るコールバック関数で、第2引数だけを使う場合、第1引数をアンダースコアにする書き方をするコードが中にはあります。

js
[1, 2, 3].map((_, index) => {
  //  _ は 1, 2, 3のような要素値。それを使わないという意味で _ にしている
});

js
[1, 2, 3].map((_, index) => {
  //  _ は 1, 2, 3のような要素値。それを使わないという意味で _ にしている
});

` テンプレートリテラル (template literal)

テンプレートリテラル(テンプレート文字列)の前後に置かれる記号です。

js
`string text`;

js
`string text`;

{ ブロック文 (block)

if文やfor文などの構文に付随して使われる記号です。

js
if (isOK) {
  // ...
} else {
  // ...
}

js
if (isOK) {
  // ...
} else {
  // ...
}

if文やfor文などの構文を伴わないブロック文は、単に変数のスコープを分けることを目的にしていることがあります。

js
{
  const value = 1;
}
{
  const value = 2;
  // 上と同じ変数名で初期化しているが、スコープが別になるためエラーにならない。
}

js
{
  const value = 1;
}
{
  const value = 2;
  // 上と同じ変数名で初期化しているが、スコープが別になるためエラーにならない。
}

{ オブジェクトの分割代入 (destructuring assignment)

オブジェクトの分割代入に用いられる記号です。

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object; // 分割代入
console.log(a, b, rest);
1 2 { c: 3, d: 4 }
 
// 分割代入
function func({ a, b, ...rest }) {
  console.log(a, b, rest);
}
func(object);
1 2 { c: 3, d: 4 }

js
const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = object; // 分割代入
console.log(a, b, rest);
1 2 { c: 3, d: 4 }
 
// 分割代入
function func({ a, b, ...rest }) {
  console.log(a, b, rest);
}
func(object);
1 2 { c: 3, d: 4 }

| ビット論理和 (bitwise or)

左の値と右の値でどちらのビットが1である位置のビットを1にします。

js
const a = 0b010;
const b = 0b101;
console.log((a | b) === 0b111);
true

js
const a = 0b010;
const b = 0b101;
console.log((a | b) === 0b111);
true

| ユニオン型 (union type)

複数の型を組み合わせたユニオン型を定義します。

ts
type ID = string | number;
const id1 = "e29b41"; // OK
const id2 = 100; // OK
const id3 = true; // ERROR

ts
type ID = string | number;
const id1 = "e29b41"; // OK
const id2 = 100; // OK
const id3 = true; // ERROR

|= ビット論理和代入 (bitwise or assignment)

左の変数の値と右の値でどちらかがのビットが1である位置のビットを1にした結果を左の変数に割り当てます。

|| 論理和 (logical or)

左の値がtruthyな場合はそれを返します。そうでないときは右の値を返します。

特にboolean値の場合は、ひとつでもtrueのときにtrueを返し、そうでない場合にfalseを返します。

js
console.log(true || false);
true
console.log(false || false);
false
 
console.log(false || "abc");
"abc"

js
console.log(true || false);
true
console.log(false || false);
false
 
console.log(false || "abc");
"abc"

||= 論理和代入 (logical or assignment)

左の変数と右の値の||論理和の結果を左の変数に割り当てます。

js
let a = false;
let b = 1;
a ||= b;
console.log(a);
1

js
let a = false;
let b = 1;
a ||= b;
console.log(a);
1

~ ビット否定演算子 (bitwise not)

ビットを反転します。

js
const a = 1;
00000001
console.log(~a);
11111110
// 出力: -2

js
const a = 1;
00000001
console.log(~a);
11111110
// 出力: -2

~~ Double Tilde

ビット否定演算子を2つ重ねたもので、小数点以下を消し去る計算をするイディオムです。JavaScriptにこういう演算子があるわけではなく慣習的なものです。double tildeの計算結果は、正の数についてはMath.floorと同じに、負の数はMath.ceilと同じになります。

js
~~1.5;
1
Math.floor(1.5);
1
Math.ceil(1.5);
2
 
~~-1.5;
-1
Math.floor(-1.5);
-2
Math.ceil(-1.5);
-1

js
~~1.5;
1
Math.floor(1.5);
1
Math.ceil(1.5);
2
 
~~-1.5;
-1
Math.floor(-1.5);
-2
Math.ceil(-1.5);
-1

キーワード

as 型アサーション (type assertion)

TypeScriptコンパイラーが解釈した型を上書きする「型アサーション」に用いられるキーワードです。

as const constアサーション (const assertion)

変数に含まれるハードコーディングされた値をそのリテラル型で宣言し、読み取り専用にします。

ts
let hello = "hello";
     
let hello: string
let bye = "bye" as const;
    
let bye: "bye"
const wolf = { caniformia: "Wolf" };
       
const wolf: {
    caniformia: string;
}
const fox = { caniformia: "Fox" } as const;
      
const fox: {
    readonly caniformia: "Fox";
}

ts
let hello = "hello";
     
let hello: string
let bye = "bye" as const;
    
let bye: "bye"
const wolf = { caniformia: "Wolf" };
       
const wolf: {
    caniformia: string;
}
const fox = { caniformia: "Fox" } as const;
      
const fox: {
    readonly caniformia: "Fox";
}

const const

ブロックスコープを持つ定数定義です。スコープ内では再代入も再宣言もできません。

get ゲッター (get)

オブジェクトのプロパティが参照されたときに対応する関数が呼ばれます。

js
const exam = {
  scores: [50, 70, 90, 80, 100, 60],
  get best() {
    return Math.max(...this.scores);
  },
};
 
console.log(exam.best);
100

js
const exam = {
  scores: [50, 70, 90, 80, 100, 60],
  get best() {
    return Math.max(...this.scores);
  },
};
 
console.log(exam.best);
100

in in演算子 (in operator)

プロパティがオブジェクトにある場合にtrueを返す演算子です。

js
const book = { name: "サバイバルTypeScript" };
console.log("name" in book);
true
console.log("price" in book);
false

js
const book = { name: "サバイバルTypeScript" };
console.log("name" in book);
true
console.log("price" in book);
false

in for-in構文

オブジェクトの列挙可能プロパティをループするfor-in構文です。

js
const drink = { name: "Coffee", price: 500 };
for (const property in drink) {
  console.log(property);
}

js
const drink = { name: "Coffee", price: 500 };
for (const property in drink) {
  console.log(property);
}

in Mapped Types

Mapped Typesに現れるinです。

ts
type MappedType = {
  [key in "foo" | "bar"]: string;
};

ts
type MappedType = {
  [key in "foo" | "bar"]: string;
};

📄️ Mapped Types

インデックス型では設定時はどのようなキーも自由に設定できてしまい、アクセス時は毎回undefinedかどうかの型チェックが必要です。入力の形式が決まっているのであればMapped Typesの使用を検討できます。

is 型アサーション関数の一部 (user-defined type guard)

型ガードに用いる型アサーション関数の戻り値の型アノテーション部分に用いられるキーワードです。

ts
function isDuck(animal: Animal): animal is Duck {
  return animal.legs === 2;
}

ts
function isDuck(animal: Animal): animal is Duck {
  return animal.legs === 2;
}

keyof keyof型演算子 (keyof)

オブジェクト型からプロパティ名を型として返す型演算子です。

n bigintリテラル (bigint literal)

数字がbigintリテラルであることを表すのに用いる記号です。

js
100n; // bigint型の100

js
100n; // bigint型の100

typeof typeof演算子 (typeof)

与えられた値の型を表す文字列を返します。

js
console.log(typeof 123);
"number"

js
console.log(typeof 123);
"number"

typeof typeof型演算子 (typeof)

変数から型を抽出する演算子です。

set セッター (set)

オブジェクトのプロパティを変更するときに対応する関数が呼ばれます。

js
const prize = {
  latest: "",
  history: [],
  set winner(winner) {
    this.latest = winner;
    this.history.push(winner);
  },
};
 
prize.winner = "Stanislas Wawrinka";
prize.winner = "Rafael Nadal Parera";
prize.winner = "Novak Đoković";
 
console.log(prize.latest);
"Novak Đoković"
console.log(prize.history);
[ 'Stanislas Wawrinka', 'Rafael Nadal Parera', 'Novak Đoković' ]

js
const prize = {
  latest: "",
  history: [],
  set winner(winner) {
    this.latest = winner;
    this.history.push(winner);
  },
};
 
prize.winner = "Stanislas Wawrinka";
prize.winner = "Rafael Nadal Parera";
prize.winner = "Novak Đoković";
 
console.log(prize.latest);
"Novak Đoković"
console.log(prize.history);
[ 'Stanislas Wawrinka', 'Rafael Nadal Parera', 'Novak Đoković' ]

void void演算子 (void)

戻り値をundefinedにします。

js
console.log(void 123);
undefined

js
console.log(void 123);
undefined

void void型 (void)

戻り値がundefinedあるいはない場合に使用します。

ts
function returnUndefined(num: number): void {
  if (num === 0) {
    return undefined;
  }
 
  return;
}

ts
function returnUndefined(num: number): void {
  if (num === 0) {
    return undefined;
  }
 
  return;
}

📄️ 戻り値がない関数とvoid型

TypeScriptで戻り値がない関数の戻り値を型注釈するにはvoid型を用います。void型は関数の戻り値を型注釈するためにある特別な型です。