サバイバルTypeScript

https://github.com/yytypescript/book
Admin
TypeScriptの入門書『サバイバルTypeScript』
Tokens:344,570
Snippets:1,480
Trust Score:5.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### TypeScript Handbook 'Get Started' Sections

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

Introductions within the TypeScript Handbook tailored for different programming backgrounds. These sections provide a quick overview and guide users to relevant learning paths.

```APIDOC
Get Started Sections:
  1. TypeScript for New Programmers
     URL: https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
     Target Audience: Programming beginners.
     Content: Introduction to JavaScript history, relationship with TypeScript, and guidance on learning JavaScript for TypeScript.

  2. TypeScript for JavaScript Programmers
     URL: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
     Target Audience: Programmers with JavaScript experience.
     Content: Quick introduction to TypeScript for those familiar with JavaScript.

  3. TypeScript for Java/C# Programmers
     URL: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html
     Target Audience: Programmers with Object-Oriented Programming (OOP) experience (e.g., Java, C#).
     Content: Introduction focusing on OOP concepts in TypeScript.

  4. TypeScript for Functional Programmers
     URL: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html
     Target Audience: Programmers with Functional Programming (FP) experience (e.g., Haskell, ML).
     Content: Introduction focusing on FP concepts in TypeScript.

  5. TypeScript Tooling in 5 minutes
     URL: https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
     Target Audience: Users who want to start using TypeScript immediately.
     Content: Covers installation and building a simple web application with TypeScript.
```

--------------------------------

### Project Setup and ESLint Installation

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

Commands to create a new project directory, initialize package.json, and install ESLint as a development dependency using Yarn.

```shell
mkdir eslint-tutorial
cd eslint-tutorial
```

```json
{
  "name": "eslint-tutorial",
  "license": "UNLICENSED"
}
```

```shell
yarn add -D 'eslint@^8'
```

```shell
npx eslint -v
```

--------------------------------

### Install ESLint Airbnb Base and Plugin Import

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

Installs the 'eslint-config-airbnb-base' package and 'eslint-plugin-import' using Yarn. These are essential for applying Airbnb's JavaScript style guide rules.

```shell
yarn add -D \
  'eslint-config-airbnb-base@^15' \
  'eslint-plugin-import@^2'
```

--------------------------------

### Start React Development Server

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/component-test.md

Starts the development server for the React application. This command automatically opens the application in the default web browser.

```shell
yarn start
```

--------------------------------

### Basic tsconfig.json Structure

Source: https://github.com/yytypescript/book/blob/master/docs/reference/tsconfig/tsconfig.json-settings.md

An example of a minimal tsconfig.json file, showing the structure for compiler options.

```json
{
  "compilerOptions": {
    "target": "es2018"
    // "lib": []
  }
}
```

--------------------------------

### Install Yarn

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/jest.md

Installs the Yarn package manager globally using npm. This is a prerequisite for the tutorial.

```shell
npm install -g yarn
```

--------------------------------

### Install Testing Library Dependencies

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/component-test.md

Installs the necessary testing libraries: `@testing-library/react` for React component testing, `@testing-library/jest-dom` for custom DOM matchers, and `@testing-library/user-event` for simulating user interactions.

```shell
yarn add \
  @testing-library/react@14 \
  @testing-library/jest-dom@5 \
  @testing-library/user-event@14
```

--------------------------------

### Directory Structure After ESLint Setup

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

Illustrates the typical directory structure of a project after setting up ESLint.

```text
.
├── .eslintrc.js
├── node_modules
├── package.json
└── yarn.lock
```

--------------------------------

### Install Yarn

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/component-test.md

Installs Yarn package manager globally. This is a prerequisite for creating the React project with Yarn.

```shell
npm install -g yarn
```

--------------------------------

### TypeScript Learning Roadmaps and Guides

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

Online resources offering structured learning paths and in-depth explanations for TypeScript. These include roadmap-style guides and comprehensive open-source books.

```APIDOC
Resource: roadmap.sh/typescript
Description: Provides a roadmap for learning TypeScript, outlining the overall structure and learning path.
Type: Online Guide

Resource: TypeScript Deep Dive (Japanese)
URL: https://typescript-jp.gitbook.io/deep-dive/
Description: An open-source online book offering advanced TypeScript concepts. Available in Japanese through community translation.
Type: Online Book

```

--------------------------------

### Install packages with type definitions

Source: https://github.com/yytypescript/book/blob/master/docs/reference/declaration-file.md

Shows how to install npm packages that either include their own type definition files or require separate installation of type definitions from DefinitelyTyped.

```bash
npm install date-fns
```

```bash
npm install express --save
npm install @types/express --save-dev
```

--------------------------------

### Install Dependencies (Source/Test Separation)

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/project-references.md

Command to install project dependencies after initializing a new project directory.

```bash
yarn install
```

--------------------------------

### プロダクションビルドと実行

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/nextjs.md

Next.jsアプリケーションのプロダクションビルドと実行コマンドを示します。`npm run build`で最適化されたコードを生成し、`npm run start`でアプリケーションを起動します。

```bash
npm run build
npm run start
```

--------------------------------

### ESLint Configuration File

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

Example of an ESLint configuration file (.eslintrc.js) with explanations for root, env, and parserOptions settings.

```js
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
};
```

--------------------------------

### Install Dependencies

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/project-references.md

Command to install all project dependencies in a monorepo using Yarn.

```bash
yarn install
```

--------------------------------

### Install TypeScript

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/jest.md

Installs TypeScript as a development dependency in the project.

```shell
yarn add -D typescript
```

--------------------------------

### VS Code ESLint Integration

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

Instructions for integrating ESLint with Visual Studio Code by installing the ESLint extension from the marketplace for real-time code analysis.

```APIDOC
VS Code ESLint Integration:
  Install ESLint Extension:
    - Go to the VS Code Marketplace.
    - Search for the ESLint extension (by dbaeumer.vscode-eslint).
    - Click 'Install'.
```

--------------------------------

### Create Monorepo Directory

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/project-references.md

Initializes a new directory for the monorepo and navigates into it. This is the first step in setting up the workspace.

```bash
mkdir typescript-monorepo-example
cd typescript-monorepo-example
```

--------------------------------

### Initialize tsconfig.json

Source: https://github.com/yytypescript/book/blob/master/docs/reference/tsconfig/tsconfig.json-settings.md

Command to generate a tsconfig.json file in a project with TypeScript installed as a dev dependency. If TypeScript is installed globally, a similar command can be used.

```bash
npx tsc --init
```

```bash
tsc --init
```

--------------------------------

### TypeScriptコンパイラのインストール

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/setup.md

npmを使用してTypeScriptコンパイラ（tsc）をグローバルにインストールします。インストール後、`tsc -v`コマンドでバージョンを確認し、正しくインストールされたかを確認します。

```shell
npm install -g typescript

tsc -v
```

--------------------------------

### Backend tsconfig.json Example (2020)

Source: https://github.com/yytypescript/book/blob/master/docs/reference/tsconfig/tsconfig.json-settings.md

A recommended tsconfig.json configuration for backend (Node.js) projects, targeting ES2020 and using CommonJS modules.

```json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "lib": ["es2020"],
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["dist", "node_modules"],
  "compileOnSave": false
}
```

--------------------------------

### Node.jsのインストール (Homebrew)

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/setup.md

Homebrewを使用してNode.jsのバージョン22をインストールします。インストール後、PATH環境変数にNode.jsのパスを追加して、ターミナルを再起動して設定を反映させます。

```shell
brew install node@22

echo 'export PATH="/usr/local/opt/node@22/bin:$PATH"' >> ~/.zshrc

node -v
```

--------------------------------

### Map.prototype.values() - Iterating Over Values

Source: https://github.com/yytypescript/book/blob/master/docs/reference/builtin-api/map.md

Shows how to use the `values` method to get an iterator for all the values in the Map. The example demonstrates converting the iterator to an array.

```typescript
const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
const values = [...map.values()];
console.log(values);
// @log: [1, 2, 3]
```

--------------------------------

### Map.prototype.keys() - Iterating Over Keys

Source: https://github.com/yytypescript/book/blob/master/docs/reference/builtin-api/map.md

Explains how to use the `keys` method to get an iterator for all the keys in the Map. The example shows converting the iterator to an array.

```typescript
const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
const keys = [...map.keys()];
console.log(keys);
// @log: ["a", "b", "c"]
```

--------------------------------

### Create React App with TypeScript

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/component-test.md

Creates a new React project named 'component-test-tutorial' using the TypeScript template. It then navigates into the newly created project directory.

```shell
yarn create react-app component-test-tutorial --template typescript
cd component-test-tutorial
```

--------------------------------

### Create Project Directory

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/jest.md

Creates a new directory for the Jest tutorial and navigates into it.

```shell
mkdir jest-tutorial
cd jest-tutorial
```

--------------------------------

### Frontend tsconfig.json Example (2020)

Source: https://github.com/yytypescript/book/blob/master/docs/reference/tsconfig/tsconfig.json-settings.md

A recommended tsconfig.json configuration for frontend projects, targeting ES2020 and using ESNext modules, with JSX support for React.

```json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["dist", "node_modules"],
  "compileOnSave": false
}
```

--------------------------------

### tsconfig.json with Explicit Lib

Source: https://github.com/yytypescript/book/blob/master/docs/reference/tsconfig/tsconfig.json-settings.md

Example of tsconfig.json where 'lib' is explicitly defined, specifying which TypeScript library versions to include. Omitting the first element of 'lib' can lead to missing functionalities.

```json
{
  "compilerOptions": {
    "target": "es2018",
    "lib": [
      "es2018",
      "esnext.AsyncIterable",
      "esnext.Array",
      "esnext.Intl",
      "esnext.Symbol"
    ]
  }
}
```

--------------------------------

### TypeScript Video Tutorial Series

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

A YouTube playlist offering easy-to-understand video tutorials for learning TypeScript basics.

```APIDOC
Playlist Title: 日本一わかりやすいTypeScript入門
Channel: とらゼミ
URL: https://www.youtube.com/watch?v=kd8VH10jXwc&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad
Description: A series of video tutorials that clearly explain the basics of TypeScript.

```

--------------------------------

### TypeScript Getters and Setters

Source: https://github.com/yytypescript/book/blob/master/docs/README.md

Demonstrates how to define getter and setter methods in TypeScript classes to control property access. Getters are defined with the 'get' keyword, and setters with the 'set' keyword. Includes an example of a Circle class with a private radius property and validation in the setter.

```typescript
class Circle {
  private _radius: number;

  constructor(radius: number) {
    this._radius = radius;
  }

  // ゲッター
  get radius(): number {
    return this._radius;
  }

  // セッター
  set radius(radius: number) {
    if (radius <= 0) {
      throw new Error("Invalid radius value");
    }
    this._radius = radius;
  }
}

const circle = new Circle(5);
console.log(circle.radius);
// @log: 5
circle.radius = 3;
console.log(circle.radius);
// @log: 3
circle.radius = -2;
// 例外: 'Invalid radius value'
```

--------------------------------

### TypeScript Getter and Setter Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/getters-and-setters.md

Demonstrates the definition and usage of getters and setters in TypeScript classes. Getters are used to retrieve property values, and setters are used to assign values to properties. Accessing getters and setters does not require parentheses.

```ts
class Human {
  private _name: string;

  public constructor(name: string) {
    this._name = name;
  }

  // Getter宣言
  get name(): string {
    return this._name;
  }

  // Setter宣言
  set name(name: string) {
    this._name = name;
  }
}

const human = new Human("");
// Setterを利用
human.name = `田中太郎`;
// Getterを利用
console.log(human.name);
// @log: 田中太郎
```

--------------------------------

### インストールされたReactのバージョン確認

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/react-like-button-tutorial.md

npm listコマンドを使用して、プロジェクトにインストールされているReactのバージョンを確認します。

```sh
npm list react
```

--------------------------------

### Next.jsプロジェクトの作成

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/nextjs.md

npx create-next-appコマンドを使用して新しいNext.jsプロジェクトを作成します。対話的なプロンプトに従って、TypeScript、ESLint、Tailwind CSS、App Router、Turbopackなどの設定を選択します。

```sh
npx create-next-app random-cat
```

--------------------------------

### TypeScript FAQ

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

A collection of frequently asked questions about TypeScript, hosted on the project's GitHub wiki. It addresses common queries regarding behavior and practices.

```APIDOC
TypeScript FAQ:
  URL: https://github.com/microsoft/TypeScript/wiki/FAQ
  Description: Frequently Asked Questions about TypeScript.
  Content: Answers to common questions categorized by Why, What, How, and Should, providing insights into behavior and best practices.
  Usage: Quickly find answers to common questions and understand the reasoning behind certain design decisions or behaviors.
  Related Resources: TypeScript Documentation, Roadmap
```

--------------------------------

### Install Jest and Related Packages

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/jest.md

Installs Jest, ts-jest, and @types/jest as development dependencies. ts-jest enables Jest to work with TypeScript.

```shell
yarn add -D 'jest@^29.7.0' 'ts-jest@^29.3.4' '@types/jest@^29.5.14'
```

--------------------------------

### Create package.json

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/jest.md

Creates an empty package.json file and then populates it with basic project information.

```shell
touch package.json
```

--------------------------------

### tsconfig.cjs.json Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/tsconfig-for-dual-package-developers.md

An example of a tsconfig.cjs.json file that extends a base tsconfig and configures the compiler for CommonJS module output, specifying the output directory.

```json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./dist/cjs"
    // ...
  }
}
```

--------------------------------

### Prettier 設定ファイル作成 (YAML)

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/prettier.md

Prettierの設定をYAML形式で記述する例です。YAMLはインデントベースの構文で読みやすく、設定ファイルとして広く利用されています。

```yaml
tabWidth: 2
semi: true
singleQuote: true
```

--------------------------------

### tsconfig.esm.json Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/advanced-topics/tsconfig-for-dual-package-developers.md

An example of a tsconfig.esm.json file that extends a base tsconfig and configures the compiler for ES Module output, specifying the output directory.

```json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "esnext",
    "outDir": "./dist/esm"
    // ...
  }
}
```

--------------------------------

### Map.prototype.size - Getting the Number of Elements

Source: https://github.com/yytypescript/book/blob/master/docs/reference/builtin-api/map.md

Shows how to access the `size` property to get the total number of key-value pairs stored in the Map.

```typescript
const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);
console.log(map.size);
// @log: 3
```

--------------------------------

### TypeScript Handbook Structure Overview

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

This section provides a high-level overview of the TypeScript Handbook's structure, listing key pages and their content.

```typescript
/*
  The TypeScript Handbook Structure:

  - Introduction: Handbook overview and purpose.
  - The Basics: Fundamental TypeScript concepts.
  - Everyday Types: Commonly used types.
  - Narrowing: Type narrowing techniques.
  - More on Functions: Advanced function typing.
  - Object Types: Detailed object type explanations.
  - Type Manipulation:
    - Creating Types from Types: Deriving types.
    - Generics: Parameterized types.
    - Keyof Type Operator: Using 'keyof'.
    - Typeof Type Operator: Using 'typeof'.
    - Indexed Access Types: Accessing type subsets.
    - Conditional Types: Type-level conditional logic.
    - Mapped Types: Transforming existing types.
    - Template Literal Types: Modifying mapped types with template literals.
  - Classes: Class syntax and type annotations.
  - Modules: Module resolution and usage.
*/
```

--------------------------------

### Intermediate Step: Using typeof to Get Object Type

Source: https://github.com/yytypescript/book/blob/master/docs/tips/generates-type-from-object-key.md

Shows the intermediate step of using `typeof` on an object to get its type, which is then used with `keyof`.

```ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "Está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
};
type TypeOfLanguage = typeof conf;
```

--------------------------------

### 新規ページの追加とサイドバー設定

Source: https://github.com/yytypescript/book/blob/master/docs/writing/how-to-change.md

新しいMarkdownページを`docs`ディレクトリに追加し、`sidebars.js`ファイルでそのページへのパスを設定する方法です。カテゴリやサブカテゴリの作成も含まれます。

```shell
mkdir -p docs/カテゴリ名/サブカテゴリ名
touch docs/カテゴリ名/サブカテゴリ名/new-page.md
```

```js
module.exports = {
  // ...
  tutorialSidebar: [
    {
      type: "category",
      label": "カテゴリ名",
      items: [
        {
          type: "category",
          label": "サブカテゴリ名",
          items: [
            // highlight-next-line
            "カテゴリ名/サブカテゴリ名/new-page",
          ],
        },
      ],
    },
  ],
};
```

--------------------------------

### Formatted Code Example

Source: https://github.com/yytypescript/book/blob/master/docs/writing/markdown.md

Displays the result of Prettier's automatic code formatting, showing how code is standardized. The example also includes a block that was explicitly ignored from formatting.

```ts
f = (x) => x;
```

```ts
<!--prettier-ignore-->
f = x => x;
```

--------------------------------

### Next.js 猫画像ジェネレーターのボタンテキスト変更

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/vercel-deploy.md

このコードスニペットは、Next.jsアプリケーションのボタンのテキストを「他のにゃんこも見る」から「One more cat!」に変更する方法を示しています。これは、Vercelでの自動デプロイとプレビュー環境のテストに使用されます。

```tsx
"use client";
import { useState } from "react";
import { fetchImage } from "./fetch-image";
import styles from "./page.module.css";
type CatImageProps = {
  url: string;
};
export function CatImage({ url }: CatImageProps) {
  const [imageUrl, setImageUrl] = useState<string>(url);
  const refreshImage = async () => {
    setImageUrl("");
    const image = await fetchImage();
    setImageUrl(image.url);
  };
  return (
    <div className={styles.page}>
      <button onClick={refreshImage} className={styles.button}>
        One more cat!
      </button>
      <div className={styles.frame}>
        {imageUrl && <img src={imageUrl} className={styles.img} />}
      </div>
    </div>
  );
}
```

--------------------------------

### Recommended TypeScript Books

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

Key books for learning TypeScript, covering fundamental concepts, type safety, and advanced usage. These resources are suitable for beginners and those looking to deepen their understanding.

```APIDOC
Book Title: プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
Publisher: O'Reilly Japan
Description: An introductory book that explains fundamental concepts like type safety and the type checker from the ground up, enabling a thorough understanding of TypeScript's type system.
ISBN: 9784873119045

Book Title: プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (aka. ブルーベリー本)
Publisher: Gihyo
Description: An introductory book that also covers JavaScript fundamentals, known as the "Blueberry Book."
ISBN: 978-4-297-12747-3

```

--------------------------------

### Exclude<T, U> - Example with Pull Request States

Source: https://github.com/yytypescript/book/blob/master/docs/reference/type-reuse/utility-types/exclude.md

Provides a practical example of using Exclude<T, U> with pull request states to define a type representing mergeable states.

```typescript
type PullRequestState = "draft" | "reviewed" | "rejected";
type MergeableState = Exclude<PullRequestState, "draft" | "rejected">;

// MergeableState is equivalent to: "reviewed";
```

--------------------------------

### Interface Usage Example: Node.js ProcessEnv

Source: https://github.com/yytypescript/book/blob/master/docs/reference/object-oriented/interface/interface-vs-type-alias.md

Provides an example of how interfaces are used in Node.js type definitions (`@types/node/process.d.ts`) for `ProcessEnv`, allowing for extension by consuming packages.

```ts
declare module "process" {
  global {
    namespace NodeJS {
      interface ProcessEnv extends Dict<string> {
        TZ?: string;
      }
    }
  }
}
```

```ts
// src/types/global.d.ts
declare module "process" {
  global {
    namespace NodeJS {
      interface ProcessEnv {
        NODE_ENV: "development" | "production";
      }
    }
  }
}
```

--------------------------------

### ReturnType Utility Type Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/type-reuse/conditional-types/infer.md

Demonstrates the ReturnType utility type, which infers the return type of a function. The example shows how to define and use ReturnType with a sample asynchronous function.

```ts
type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any;
```

```ts
const request = (url: string): Promise<string> => {
  return fetch(url).then((res) => res.text());
};

type X = ReturnType<typeof request>;
//   ^?
```

--------------------------------

### Reactプロジェクトの作成

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/react-like-button-tutorial.md

Viteを使用してReactテンプレートから新しいプロジェクトを作成します。`react-swc-ts`テンプレートを指定してTypeScriptとSWCを使用します。

```sh
npm create vite@latest like-button -- --template react-swc-ts
```

--------------------------------

### Lexical Scope Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/statements/variable-scope.md

Shows lexical scope where a function can access variables defined in its outer scope (where it was defined). The example demonstrates a function accessing a variable from its parent scope.

```javascript
const x = 100;

function a() {
  console.log(x); // Outer variable is visible
}

a();
// @log: 100
```

--------------------------------

### プルリクエストでのIssue関連付け

Source: https://github.com/yytypescript/book/blob/master/docs/writing/how-to-change.md

プルリクエスト作成時にGitHubのキーワードを使用して関連するIssueを紐付ける方法です。これにより、プルリクエストのマージ時にIssueが自動的にクローズされます。

```markdown
Close #123
```

--------------------------------

### Readonly<T> Usage Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/type-reuse/utility-types/readonly.md

Demonstrates how to use the Readonly<T> utility type to create a new type with all properties of the original type set to read-only. This example shows the transformation from a mutable type to an immutable one.

```ts
type Person = {
  surname: string;
  middleName?: string;
  givenName: string;
};
type ReadonlyPerson = Readonly<Person>;
//    ^?
```

```ts
type ReadonlyPerson = {
  readonly surname: string;
  readonly middleName?: string;
  readonly givenName: string;
};
```

--------------------------------

### ローカル開発サーバーの起動

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/react-like-button-tutorial.md

React開発サーバーを起動し、ローカル環境でアプリケーションを確認できるようにします。起動後、表示されるURLをブラウザで開きます。

```sh
npm run dev
```

--------------------------------

### NonNullable<T> Examples

Source: https://github.com/yytypescript/book/blob/master/docs/reference/type-reuse/utility-types/nonnullable.md

Demonstrates the usage of the NonNullable<T> utility type in TypeScript. It shows how to remove 'null' and 'undefined' from union types, resulting in a type that only includes the non-nullable members. Examples include removing null, undefined, or both from a string type.

```ts
type String1 = NonNullable<string>;
//   ^?
type String2 = NonNullable<string | null>;
//   ^?
type String3 = NonNullable<string | undefined>;
//   ^?
type String4 = NonNullable<string | null | undefined>;
//   ^?
```

```ts
type Never1 = NonNullable<null>;
//   ^?
type Never2 = NonNullable<undefined>;
//   ^?
```

--------------------------------

### Create Test File

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/component-test.md

Creates a new test file named SimpleButton.test.tsx in the current directory.

```shell
touch SimpleButton.test.tsx
```

--------------------------------

### PrettierのCLIオプションによる整形ルールの変更

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/prettier.md

CLIオプションを使用してPrettierの整形ルール（セミコロンの有無、インデント幅）を変更し、ファイルを書き換えるコマンド例です。

```shell
yarn prettier --no-semi --tab-width 4 --write src
```

--------------------------------

### Callback Hell Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/single-process-and-callback.md

Illustrates the problem of 'callback hell' where nested callbacks for asynchronous operations make code difficult to read and maintain. This example shows multiple sequential AJAX calls, each with its own callback.

```ts
declare function ajax(uri: string, callback: (res: Response) => void): void;
// ---
ajax("https://...", (res1: Response) => {
  ajax("https://...", (res2: Response) => {
    // ...
  });
});
```

```ts
declare function ajax(uri: string, callback: (res: Response) => void): void;
// ---
ajax("https://...", (res1: Response) => {
  ajax("https://...", (res2: Response) => {
    ajax("https://...", (res3: Response) => {
      ajax("https://...", (res4: Response) => {
        ajax("https://...", (res5: Response) => {
          ajax("https://...", (res6: Response) => {
            // ...
          });
        });
      });
    });
  });
});
```

--------------------------------

### TypeScript Class Definitions for Variance Examples

Source: https://github.com/yytypescript/book/blob/master/docs/reference/generics/variance.md

Provides class definitions (A, B, C) where B extends A, and C extends B. These classes are used in subsequent examples to demonstrate how variance affects type assignments based on inheritance relationships.

```typescript
class A {
  public a(): void {
    console.log("a");
  }
}

class B extends A {
  public b(): void {
    console.log("b");
  }
}

class C extends B {
  public c(): void {
    console.log("c");
  }
}
```

--------------------------------

### JavaScriptファイル (src/helloWorld.js) - 初期状態

Source: https://github.com/yytypescript/book/blob/master/docs/tutorials/eslint.md

ESLintのチェック対象となるJavaScriptファイルの初期状態を示します。このコードには、キャメルケース違反と`console.log`の使用という2つのESLintルール違反が含まれています。

```js
export const hello_world = "Hello World";
console.log(hello_world);
```

--------------------------------

### TypeScript Shorthand Property Names Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/values-types-variables/object/shorthand-property-names.md

This example shows how to use shorthand property names in TypeScript. When the object key and the variable name are identical, you can simply list the variable name to assign its value to the property. This is a concise way to initialize objects.

```typescript
type Wild = {
  name: string;
  no: number;
  genre: string;
  height: number;
  weight: number;
};

const name = "pikachu";
const no = 25;
const genre = "mouse pokémon";
const height = 0.4;
const weight = 6.0;

const pikachu: Wild = {
  name,
  no,
  genre,
  height,
  weight,
};
```

--------------------------------

### 既存ページの移動とリダイレクト設定

Source: https://github.com/yytypescript/book/blob/master/docs/writing/how-to-change.md

既存のMarkdownファイルを移動またはリネームした場合の対応方法です。`sidebars.js`のパス更新と`vercel.json`でのリダイレクト設定が必要です。

```json
{ "source": "/tutorials/setup", "destination": "/getting-started/setup" }
```

--------------------------------

### TypeScript Handbook Versions

Source: https://github.com/yytypescript/book/blob/master/docs/learning-resources.md

Information regarding the evolution of the TypeScript Handbook, highlighting the transition from v1 to v2.

```APIDOC
Handbook Evolution:
  - TypeScript has a history of over 10 years with continuous updates.
  - The official documentation has also evolved alongside language updates.
  - The 'Handbook' is a critical section, serving as a comprehensive guide to TypeScript language features and behavior.

Version Transition:
  - A new version of the Handbook, 'v2', was released in 2021.
  - The previous version is referred to as 'v1' and is available in an archived repository.

Caution:
  - Many existing introductory books and online resources may reflect v1 content, as the v2 Handbook is relatively recent.
```

--------------------------------

### Flatten Utility Type Example

Source: https://github.com/yytypescript/book/blob/master/docs/reference/type-reuse/conditional-types/infer.md

Illustrates a custom Flatten utility type that infers the element type of an array. If the input type is an array, it returns the element type; otherwise, it returns never. Examples show its behavior with different array and tuple types.

```ts
type Flatten<T> = T extends (infer U)[] ? U : never;

type A = Flatten<string>;
//   ^?
type B = Flatten<string[]>;
//   ^?
type C = Flatten<string[][]>;
//   ^?
type D = Flatten<[string, number]>;
//   ^?
```

--------------------------------

### リポジトリのクローンと依存関係のインストール

Source: https://github.com/yytypescript/book/blob/master/docs/writing/how-to-change.md

プロジェクトのリポジトリをローカルにクローンし、必要な依存関係をインストールする手順です。一般ユーザーとプロジェクト権限を持つユーザーでクローン方法が異なります。

```shell
# 一般の方
git clone git@github.com:自分のアカウント/フォーク先のリポジトリ名.git

# 当プロジェクトにコミット権限がある方
git clone git@github.com:yytypescript/book.git
```

```shell
yarn
```
Tokens:
Raw