Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: ✏️ タプルにラベルの説明を追加 #898

Merged
merged 2 commits into from
Oct 4, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion docs/reference/values-types-variables/tuple.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ sidebar_label: タプル

# タプル (tuple)

TypeScriptの関数は1値のみ返却可能です。戻り値に複数の値を返したい時に、配列に返したいすべての値を入れて返すことがあります。なお次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
TypeScriptの関数は1値のみ返却できます。ですが実際は複数の値を返したくなる時もあります。そんな時は配列に返したいすべての値を入れて返すことがあります。

次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。

```ts twoslash
function tuple() {
Expand Down Expand Up @@ -51,6 +53,18 @@ function tuple(): [number, string, boolean] {

配列の型は`T[]`と`Array<T>`のふたつの書き方がありましたがタプルはこの書き方しか存在しません。

### タプルにラベルをつける

同じ型の値ばかりをタプルにして返却する関数の場合、その型が何を示しているのか分かりにくくなることがあります。そんな時はタプルにラベルをつけることができます。

```ts twoslash
declare function tuple(): [x: number, y: number, z: number];
// ---cut---
const coordinate: [x: number, y: number, z: number] = tuple();
```

この例であれば3次元座標を返す関数の戻り値であることが分かりやすくなります。

## タプルへのアクセス

タプルを受けた変数はそのまま中の型が持っているプロパティ、メソッドを使用できます。
Expand Down Expand Up @@ -78,6 +92,22 @@ list[5];

そのため`list.push()`のような配列の要素を増やす操作をしてもその要素を使うことはできません。

### ラベルをつけたタプルへのアクセス

あくまでもラベルは可読性の向上のために使われるもので、実際のコードの中でラベルを使ってアクセスすることはできません。

```ts twoslash
// @errors: 2339
const tuple = (): [x: number, y: number, z: number] => {
return [1, 2, 3];
};
// ---cut---
const coordinate: [x: number, y: number, z: number] = tuple();

coordinate[0];
coordinate.x;
```

### 分割代入を使ってタプルにアクセスする

上記関数`tuple()`の戻り値は分割代入を使うと次のように受けることができます。
Expand Down
Loading