【TypeScript】TS完全ソリューション

1. TypeScript の概要

• TS公式ドキュメント
• TS 中国語リファレンス - メンテナンスは終了しました

(1) タイプスクリプト

• 背景: JS は 弱类型 言語であり、型エラーが発生しやすいです。プロジェクト開発中のバグの確認と修正に時間がかかり、効率に影響します
• 定義: TypeScript (TS と呼ばれる) は、すべての JS 関数と拡張機能类型支持関数を含む JavaScript のスーパーセットです。
• 違い
  • JavaScript: 動的型、执行 定期的な型チェック、コード执行时 エラーが見つかりました
  • TypeScript: 静的型、编译 は定期的に型チェックを行い、 コード执行前 はエラーを検出します。VSCode では、 コード 编写时エラーが見つかりました

(2) メリット

• プログラム内で常に利用できる代码提示ため、バグの確認と修正にかかる時間が短縮され、開発効率が向上します
• 強力な型システムによりコードの保守性が向上し、重构代码更加容易
• 最新の ECMAScript 構文をサポートし、最新の構文を優先的に体験します
• TS 型推論メカニズムでは、コード内のあらゆる場所に注釈型を表示する必要がありません。

2. TypeScriptを使用するための準備

(1) TS コンパイル用ツールキットのインストール

• 背景: Node.js/ブラウザは JS コードのみを認識するため、実行前に TS を JS コードに変換する必要があります
• インストールコマンド:npm i -g typescript
  • TS パッケージ: TS => JS を実装するための tsc コマンドを提供する、TS コードをコンパイルするためのパッケージ
  • バージョンの表示: tsc –v

(2) TSコードをコンパイルして実行する

• TS の作成: 新しい .ts ファイルを作成します。
• TS のコンパイル: ターミナルにコマンドを入力します。tsc file.ts
• JSの実行：ターミナルにコマンドを入力します。node file.js
  • 法定のJSコードはすべてTSコードなので、基本的にはJSのTSタイプを覚えるだけで済みます。
  • TS コンパイルにより同レベルの JS ファイルが生成され、コードには型情報が含まれません。

(3) TS実行手順の簡略化

• 簡単な方法: ts-node パッケージを使用して Node.js で TS コードを実行する
• インストールコマンド:npm i -g ts-node
• 使い方：ts-node file.ts
  • ts-node は js ファイルを生成しません

3. TypeScript の一般的な型

• 型システム: TS は JS のスーパーセットであり、JS のすべての機能に加えて追加の機能を提供します。类型系统
  • JSコードは全てTSコードです
  • JS 型は変更をチェックせず、TS は変数型の変更をチェックします
• 主な利点: コード内の予期しない動作に明示的にフラグを付けることができるため、エラーの可能性が軽減されます。

(1) 型アノテーション

1. 注釈を入力する

• 反映する：: number
• 効果：为变量添加类型约束

let age: number = 18

2. タイプエイリアスのタイプ

• 機能: すべての型の型エイリアスの作成をサポートし、通常は複雑なデータ型に使用されます。

// 创建类型别名
type Person = {
    
    
  name: string
  sayHi(): void
  greet(name: string): void // 普通函数带参数的方法类型
  meet: (name: string) => void // 箭头函数带参数的方法类型
}

// 使用类型别名作为对象的类型
let person: Person = {
    
    
  name: 'jack',
  sayHi() {
    
    }
  greet(name) {
    
    
    console.log(name)
  }
  meet(name) {
    
    
      console.log(name)
    }
}

(2) よく使われる基本型

1. JS にはすでに型があります

(1) オリジナルタイプ

• 特徴：JSの型名に従って記述されたシンプルな型
• 含まれる内容：数値 / 文字列 / ブール値 / null / 未定義 / 記号

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false
let nu: null = null
let un: undefined = undefined
let smb: symbol = symbol

(2) 配列型

• 写法一：arrType[]（推荐）
• 書き方 2:Array<arrType>

// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

(3) オブジェクトの種類

• JS のオブジェクトはプロパティとメソッドで構成され、TS オブジェクト タイプは次のとおりです。描述对象结构
  • オブジェクトの構造を記述するには {} を使用します
  • 属性采用 key:type 形式
  • 方法采用 fn():type 形式

// 空对象
let person: {
    
    } = {
    
    }

// 有属性的对象
let person: {
    
     name: string } = {
    
    
  name: '同学'
}

// 既有属性又有方法的对象
let person: {
    
    
  name: string
  sayHi(): void
} = {
    
    
  name: 'jack',
  sayHi() {
    
    }
}

• オブジェクトのオプションのプロパティ
  • 定義: オブジェクトのプロパティまたはメソッド (オプション)
  • 構文: ? を使用して を表します

type Config = {
    
    
  url: string
  method?: string
}

function myAxios(config: Config) {
    
    
  console.log(config)
}

(4) 機能の種類

• 特点：约束函数参数和返回值的类型
• 個別に指定する

// 函数声明
function add(num1: number, num2: number): number {
    
    
  return num1 + num2
}

// 箭头函数
const add = (num1: number, num2: number): number => {
    
    
  return num1 + num2
}

• 同時に指定する
  • 機能:函数表达式アロー関数のような構文を使用して関数に型を追加できますが、関数の宣言ではサポートされていません

type AddFn = (num1: number, num2: number) => number // 使用 type

const add: AddFn = (num1, num2) => {
    
    
  return num1 + num2
}

• 関数のオプションパラメータ
  • 特徴: パラメータが固定されていない場合、関数パラメータの指定タイプは可选参数
  • 構文: 未固定パラメータ名の後に追加します。?
  • 注:オプションのパラメータはパラメータ リストの最後にのみ指定できます。つまり、オプションのパラメータをオプションのパラメータの後に指定することはできません。< /span>

function mySlice(start?: number, end?: number): void {
    
    
  console.log('起始索引：', start, '结束索引：', end)
}

2.TSニュータイプ

(1) ユニオンタイプ

• 定義: 2 つ以上の他の型で構成される型。表現はこれらの型のいずれかになります。
• 構文: | Union を使用します。

let arr: (number | string)[] = [1, 'a', 3, 'b']

(2) カスタムタイプ/タイプエイリアス

• 定义：为任意类型起别名
• 構文: type を使用してエイリアスを宣言します。エイリアスは大文字で始めることをお勧めします
• シナリオ: 同じ型 (複合型) が複数回使用される場合、型の使用を簡素化するために型エイリアスを使用できます。

type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

(3)インターフェース

• 定義:对象类型 のインターフェースを追加します。
• 構文: interface 宣言を使用します。インターフェイス名は I で始めることをお勧めします。
• シナリオ: オブジェクト タイプが複数回使用される場合、インターフェイスを使用してオブジェクト タイプを記述し、再利用を実現できます。

interface IPerson {
    
    
  name: string
  age: number
  sayHi(): void
}

let person: IPerson = {
    
    
  name: 'jack',
  age: 19,
  sayHi() {
    
    }
}

• インターフェイスとタイプ
  • 同じ: オブジェクトにタイプを割り当てることができます
  • 違う
    • インターフェース: オブジェクトのタイプのみを指定し、継承を行います。
    • 型エイリアス: オブジェクトの型を指定するだけでなく、任意の型の型指定もサポートします。

// 为对象类型提供类型接口
interface IPerson {
    
    
  name: string
  age: number
  sayHi(): void
}

// 为对象类型创建类型别名
type IPerson = {
    
    
  name: string
  age: number
  sayHi(): void
}

// 为联合类型创建类型别名
type NumStr = number | string

• インターフェースの継承
  • 構文: extends 継承を使用します。

interface Point2D {
    
     x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
    
    
  z: number
}

(4) タプル

• 機能: 配列内の元素类型およびを決定します。元素个数
• 構文: タプルTuple

// 普通数组，不确定元素个数
let position: number[] = [116.2317, 39.5427]

// 元祖，确定元素类型和个数
let position: [number, number] = [39.5427, 116.2317]

(5) リテラル型

• 定義: 任意の JS リテラル (オブジェクト、数値など) を TS の型として使用できます。

let str1 = 'Hello TS' // let 定义 str1 是变量
let str1: string = 'Hello TS'

const str2 = 'Hello TS' // const 定义 str2 是常量
const str2: 'Hello TS' = 'Hello TS'

• 使用パターンとシナリオ
  • 機能: グループを表すために共用体タイプとともに使用されます。明确的可选值列表
  • 利点: 文字列型と比較して、リテラル型はより正確で厳密です。

// 比如在贪吃蛇游戏中，游戏的方向可选值只能是上、下、左、右
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
    
    
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

(6) 列挙（理解）

• 機能: リテラル型と共用体型の組み合わせと同様に、明确的可选值 のグループを表すこともでき、枚举名称 の直接使用もサポートしています。型アノテーション
• 構文: enum キーワードを使用して列挙を定義します
  • 規則の列挙名は大文字で始まります
  • enum 名の型注釈としての使用をサポート

// 创建枚举
enum Direction {
    
     Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
    
    
  console.log(direction)
}

// 调用函数时，通过点（.）语法访问枚举 Direction 成员
changeDirection(Direction.Up)

• 数値の列挙
  • 機能: 列挙型メンバーの値は、デフォルトでは 0 から始まる数値です。列挙型メンバーの値を初期化することもできます。

// Down -> 11、Left -> 12、Right -> 13
enum Direction {
    
     Up = 10, Down, Left, Right }

enum Direction {
    
     Up = 2, Down = 4, Left = 8, Right = 16 }

• 文字列列挙型
  • 特徴: 列挙型メンバーの値は文字列であり、自動インクリメント動作がないため、各メンバーには初期値が必要です。

enum Direction {
    
    
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

• 列挙の実装原理
  • 他の型は単なる型ですが、列挙型は型であるだけでなく、値も提供します (すべての列挙型メンバーには値があります)。つまり、他の型は JS コードにコンパイルされるときに自動的に削除されますが、列挙型は JS コードにコンパイルされます。

enum Direction {
    
    
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 编译为以下 JS 代码
var Direction;

(function (Direction) {
    
    
  Direction['Up'] = 'UP'
  Direction['Down'] = 'DOWN'
  Direction['Left'] = 'LEFT'
  Direction['Right'] = 'RIGHT'
})(Direction || Direction = {
    
    })

(7) void型

• 機能: 函数无返回值 の場合に使用されます。void

function greet(name: string): void {
    
    
  console.log('Hello', name)
}

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {
    
    }
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {
    
    }

// 如果指定返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
    
    
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

(8) 任意のタイプ (非推奨)

• 機能: 値のタイプが any の場合、コード プロンプトを表示せずに値に対してあらゆる操作を実行できますが、これはお勧めできません。

let obj: any = {
    
     x: 0 }

obj.bar = 100
obj()
const n: number = obj

• 使用するシーン
  • 長くて複雑な型の記述を避けるために、一時的に any を使用します。
  • 暗黙的に any 型を持つその他のケース

(3) TS型方式

1. 型推論

• 定義: 型が指定されていない TS では、TS の型推論メカニズムが型の提供に役立ちます。
• シーン
  • 変数を宣言して初期化する場合
  • 関数の戻り値を求める場合

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
    
    
  return num1 + num2
}

• 使用
  • 型アノテーションによりコストを節約し、TS 型推論の機能を最大限に活用して開発効率を向上させることができます。
  • VSCode プロンプトを使用して、変数名の上にマウスを置くと型を表示できます。
  • VSCode でコードを記述するときは、メソッドと属性の型に注意してください

2. 型アサーション

• 特徴: 開発者は TS よりも値の型についてより具体的であり、型アサーションを使用してより具体的な型を指定します。
• 構文: as キーワードを使用して型アサーションを実装し、その後により具体的な型を指定します。
  • ヒント: ブラウザ コンソールで、__proto__ を使用して DOM 要素のタイプを取得します

// 返回类型为 HTMLElement，只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
const aLink = document.getElementById('link')

// 使用类型断言指定更加具体的类型，HTMLAnchorElement 是 HTMLElement 的子类型
const aLink = document.getElementById('link') as HTMLAnchorElement

• 構文: <> 構文を使用します (非推奨)

// 在react的jsx中使用会报错
const aLink = <HTMLAnchorElement>document.getElementById('link')

3、種類

• 機能: TS は、型コンテキストで参照する typeof 演算子を提供します变量或属性类型 (型クエリ)
• シナリオ: 既存の変数の値に基づいて型を取得し、型の記述を簡素化する

let p = {
    
     x: 1, y: 2 }

// 简化前
function formatPoint(point: {
    
     x: number; y: number }) {
    
    }

// 简化后
function formatPoint(point: typeof p) {
    
    }

4. TypeScript の高度な型

(1) ジェネリック医薬品

• 定義: 型安全性を確保するという前提の下で、関数が複数の型と連携して再利用を実現できるようにするもので、関数、インターフェイス、クラスでよく使用されます。
• 要件: 渡されたデータをすべて返す id 関数を作成します (つまり、パラメーターと戻り値の型が同じです)。

1. 汎用関数を作成する

• 構文: 関数名の後に <类型变量 Type> を追加します。これは特殊なタイプの変数であり、タイプ コンテナと同等です

function id<Type>(value: Type): Type {
    
     return value }

function id<T>(value: T): T {
    
     return value }

2. 汎用関数の呼び出し

• 構文: 関数名の後に追加<指定类型>

const num = id<number>(10)
const str = id<string>('a')

// 简化泛型函数调用，省略 <指定类型>，TS 进行类型参数推断
let num = id(10)
let str = id('a')

3. 一般的な制約

• 背景: ジェネリック関数の型変数 Type は任意の型を表すことができるため、特定のプロパティにアクセスできなくなり、ジェネリック関数に制約を追加する必要があります。收缩类型

(1) より具体的な種類を指定する

• 方法: タイプを関連する特定のタイプに変更します。

function id<Type>(value: Type[]): Type[] {
    
    
  console.log(value.length)
  return value
}

(2) 制約を追加する

• インターフェイスの作成: 制約を記述するインターフェイス Ixxx を作成し、インターフェイスに関連する属性を提供するように要求します。
• 制約の追加: extends キーワードを通じてこのインターフェースを使用して、ジェネリックの制約と属性を追加します

// 创建一个接口
interface ILength {
    
     length: number }

// Type extends ILength 添加泛型约束
// 传入类型必须满足 ILength 接口要求，即 number 类型的 length 属性
function id<Type extends ILength>(value: Type): Type {
    
    
  console.log(value.length)
  return value
}

4、キーオフ

• 定義: ジェネリック型変数は複数の型を持つことができ、类型变量之间可以约束
• 構文: keyof キーワードは型変数を受け取り、そのキー名の共用体型を生成します。
  • 型変数 Key は Type によって制約され、Type のすべてのキーの 1 つにすぎず、オブジェクト内に存在するプロパティのみにアクセスできます。

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    
    
// keyof Type 获取 person 对象所有键的联合类型，即`'name' | 'age'`
  return obj[key]
}
let person = {
    
     name: 'jack', age: 18 }
getProp(person, 'name')

// Type extends object：Type 应该是一个对象类型
// 对象类型，应该用 object ，而不是 Object
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
    
    
  return obj[key]
}

5. 汎用インターフェース

• 定義: インターフェイスをジェネリックと組み合わせて使用​​すると、柔軟性と再利用性が向上します。
• 文法
  • 定義: インターフェイス名の後に追加します。<类型变量>
  • 使用法: 特定のタイプを明示的に指定する必要があるIxxx<类型>

interface IdFunc<Type> {
    
    
  id: (value: Type) => Type
  ids: () => Type[]
}

// 接口中所有成员都可以使用类型变量
let obj: IdFunc<number> = {
    
    
  id(value) {
    
     return value }, // 参数和返回值类型是 number
  ids() {
    
     return [1, 3, 5] }  // 返回值类型是 number[]
}

• JS の汎用インターフェイス
  • JS 配列は TS の汎用インターフェイスです
  • 配列を使用する場合、TS は配列のさまざまな型に応じて型変数を対応する型に自動的に設定します。
  • 特定の型情報を表示するには、Ctrl + マウスの左ボタン (Mac: Command + マウスの左ボタン) を使用します。

const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

const nums = [1, 3, 5]
// 鼠标放在 forEach 上查看类型
nums.forEach

6. 一般的なツールの種類

• 定義: TS には、TS での一般的な操作を簡素化するためのいくつかの一般的なツール タイプが組み込まれています。

（1）一部

• 定義: 型を構築し、Type のすべてのプロパティをオプションに設定します。
• 文法：Partial<Type>

type Props =  {
    
    
  id: string
  children: number[]
}

// 构造出的新类型 PartialProps 结构和 Props 相同，但所有属性都为可选
type PartialProps = Partial<Props>

（2）読み取​​り専用

• 定義: 型を構築し、型のすべてのプロパティを読み取り専用に設定します。
• 文法：Readonly<Type>

type Props =  {
    
    
  id: string
  children: number[]
}

// 构造出的新类型 PartialProps 结构和 Props 相同，但所有属性都为只读
type ReadonlyProps = Readonly<Props>

// 错误演示
let props: ReadonlyProps = {
    
     id: '1', children: [] }
props.id = '2'

（3）ピック

• 定義: タイプからプロパティのセットを選択して、新しいタイプを構築します
• 文法：Pick<Type, Keys>

interface Props {
    
    
  id: string
  title: string
  children: number[]
}

// 第二个类型变量传入的属性只能是第一个类型变量中存在的属性
// 构造出来的新类型 PickProps，只有 id 和 title 两个属性类型
type PickProps = Pick<Props, 'id' | 'title'>

（4）省略

• 定義: タイプから一連の属性を削除して、新しいタイプを構築します。
• 文法：Omit<K,T>

interface Props {
    
    
  id: string
  title: string
  children: number[]
}

// 第二个类型变量传入的属性只能是第一个类型变量中存在的属性
// 构造出来的新类型 OmitProps，只有 children 属性类型
type OmitProps = Omit<Props, 'id' | 'title'>

(2) インデックス署名の種類

• ほとんどの場合、オブジェクトを使用する前にその構造を決定し、オブジェクトに正確な型を追加します。
• オブジェクト内にどの属性があるかを判断できない場合 (またはオブジェクト内に任意の数の属性が存在する可能性がある場合)、インデックス署名タイプが使用されます。

interface AnyObject {
    
    
  [key: string]: number
}
let obj: AnyObject = {
    
    
  a: 1,
  b: 2,
}

• 説明する：
  1. [key: string] を使用して、このインターフェースで許可される属性名を制限します。属性名が文字列型である限り、オブジェクト内に表示できることを示します。
  2. このようにして、任意の数の属性 (a、b など) をオブジェクト obj に含めることができます。
  3. key 只是一个占位符、任意の有効な変数名に置き換えることができます。
  4. 隠された事前知識:JS 中对象({})的键是 string 类型的。

配列インデックス型のシグネチャ

• JS では、配列は特殊なタイプのオブジェクトであり、配列内のキー (インデックス) は数値タイプです。
• さらに、配列には任意の数の要素を含めることもできます。したがって、インデックス署名タイプは、配列に対応する汎用インターフェイスでも使用されます。

interface MyArray<T> {
    
    
  [n: number]: T
}
let arr: MyArray<number> = [1, 3, 5]

• 説明する：
  1. MyArray インターフェイスはネイティブ配列インターフェイスをシミュレートし、[n: number] をインデックス署名タイプとして使用します。
  2. このインデックス署名タイプは、キー (インデックス) が数値タイプである限り、配列内に出現することができる、または配列内に任意の数の要素が存在できることを意味します。
  3. また、配列インデックスが数値型であるという前提にも準拠します。

(3) マッピングの種類

• マッピング タイプ:古いタイプに基づいて新しいタイプ (オブジェクト タイプ) を作成して、重複を減らし、開発効率を向上させます。
  たとえば、タイプ PropKeys には x/y/z があり、別のタイプ Type1 にも x/y/z があり、Type1 の x/y/z のタイプは同じです。あ>

type PropKeys = 'x' | 'y' | 'z'
type Type1 = {
    
     x: number; y: number; z: number }

• これは正しいですが、x/y/z が 2 回書かれています。この場合、マッピング タイプを使用して簡素化できます。

type PropKeys = 'x' | 'y' | 'z'
type Type2 = {
    
     [Key in PropKeys]: number }

• 説明する：
  1. マッピング タイプはインデックス署名タイプに基づいているため、構文はインデックス署名タイプと同様であり、[] も使用されます。
  2. Key in PropKeysKey が、forin(let k in obj) と同様の PropKeys 共用体型のいずれかであることを示します。
  3. マップされた型を使用して作成されたタイプ Type2 とタイプ Type1 の新しいオブジェクトは、まったく同じ構造を持ちます。
  4. 注:マップされた型は型エイリアスでのみ使用でき、インターフェイスでは使用できません。

オブジェクトから作成

共用体タイプに基づいて新しいタイプを作成することに加えて、オブジェクト タイプに基づいてマッピング タイプを作成することもできます。

type Props = {
    
     a: number; b: string; c: boolean }
type Type3 = {
    
     [key in keyof Props]: number }

• 説明する：
  1. まず、keyof Props を実行して、オブジェクト タイプ Props 内のすべてのキーの共用体型、つまり「a」 | 「b」 | 「c」を取得します。
  2. その後、Key in ... は、Key が Props 内の任意のキー名になる可能性があることを意味します。

組み込みマッピング型の実装分析

• 実際、前述の汎用ツール タイプ (たとえば、Partial) はすべてマッピング タイプに基づいて実装されています。
• たとえば、Partial の実装は次のとおりです。

type Partial<T> = {
    
    
  [P in keyof T]?: T[P]
}

type Props = {
    
     a: number; b: string; c: boolean }
type PartialProps = Partial<Props>

• 説明する：
  1. keyof Tつまり、keyof Props は、Props のすべてのキー、つまり「a」 | 「b」 | 「c」を取得することを意味します。
  2. [] の後に ? (疑問符) を追加して、これらの属性を 可选 に変更し、Partial 機能を実現します。
  3. コロンの後の T[P] 表示获取 T 中每个键对应的类型。たとえば、「a」の場合、タイプは数値であり、「b」の場合、タイプは文字列です。
  4. 最終的に、新しいタイプの PartialProps は、すべてのタイプがオプションになることを除いて、古いタイプの Props とまったく同じ構造になります。

インデックスアクセスタイプ

• 今使用した T[P] 構文は、TS では と呼ばれます索引访问类型
• 機能:属性のタイプをクエリするために使用されます。

type Props = {
    
     a: number; b: string; c: boolean }
type TypeA = Props['a']

• 説明:Props['a'] は、クエリ タイプ Props の属性「a」に対応するタイプ番号を表します。したがって、TypeA の型は数値となります。
• 注:[] はクエリされたタイプに存在する必要があります。存在しない場合はエラーが報告されます。

複数のインデックスの種類を同時にクエリします

• インデックス クエリ タイプを使用するその他の方法: 複数のインデックス タイプを同時にクエリする

type Props = {
    
     a: number; b: string; c: boolean }

type TypeA = Props['a' | 'b'] // string | number

• 説明: 文字列リテラルの共用体型を使用して、属性 a および b に対応する型を取得します。結果は、string |number となります。

type TypeA = Props[keyof Props] // string | number | boolean

• 説明: keyof 演算子を使用して、Props 内のすべてのキーに対応する型を取得します。結果は、文字列 | 数値 | ブール値となります。

5. オリジナルプロジェクトでTSを使用する

新しいプロジェクトを作成する

• 注文：npx create-react-app my-app --template typescript

• 注: コマンド ラインに --template typescript を追加して、TS をサポートするプロジェクトを作成します

• プロジェクト ディレクトリへの変更:

  1. プロジェクトのルート ディレクトリにはもう 1 つのファイルがあります。tsconfig.json
     • TS設定ファイル
  2. src ディレクトリで、ファイルのサフィックスが元の .js から .ts または に変更されました。.tsx
     • .tsファイル拡張子はts
     • .tsxこのサフィックスは、TS で React コンポーネントを使用する場合に必要です
  3. src ディレクトリにはさらにreact-app-env.d.ts ファイルがあります
     • .d.ts型を指定するために使用される型宣言ファイル

tsconfig ドキュメントの紹介

• tsconfig ドキュメントの紹介
• tsconfig.json は、tsc --init によって生成される TS プロジェクトの構成ファイルです。
• すべての設定項目をマウスで移動して、設定項目の説明を表示できます。

{
    
    
  // 编译选项
  "compilerOptions": {
    
    
    // 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
    // 命令行： tsc --target es5 11-测试TS配置文件.ts
    "target": "es5",
    // 指定要包含在编译中的 library
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    "allowJs": true,
    // 跳过类型声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导出
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件
    "isolatedModules": true,
    // 编译时不生成任何文件（只进行类型检查）
    "noEmit": true,
    // 指定将 JSX 编译成什么形式
    "jsx": "react-jsx"
  },
  // 指定允许 ts 处理的目录
  "include": ["src"]
}

(1) Typescript宣言ファイル

• 背景: ほぼすべての JS アプリケーションは、タスク要件を完了するためにサードパーティ ライブラリを導入します。TS で記述されているかどうかに関係なく、サードパーティ ライブラリには対応する TS タイプがあります。
• 定義: Typescript 宣言ファイルは、コード プロンプトや型保護などのメカニズムを備えた既存の JS ライブラリの型情報を提供します。

1. TS の 2 つのファイル タイプ
2. 型宣言ファイルの使用手順

1.TSの2つのファイルタイプ

• .ts ファイル
  • 既包含类型信息又可执行代码
  • .js ファイルにコンパイルしてコードを実行できます。
  • 目的: プログラムコードを書く場所
• .d.ts ファイル
  • 只包含类型信息型宣言ファイル
  • .js ファイルは生成されません。実行可能コードは許可されません。型情報を提供するためにのみ使用されます。
  • 目的: JS の型情報を提供します。
• 概要: .ts は implementation (コード実装ファイル)、.d.ts は宣言 (型宣言ファイル) です

2. 型宣言ファイルの使用方法

(1) 組み込み型宣言ファイル

• • TS は、JS ランタイムで使用できるすべての標準化された組み込み API の宣言ファイルを提供します

const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

• 実際、これらはすべて TS によって提供される組み込みの型宣言ファイルです。
• Ctrl + マウスの左ボタン (Mac: Command + マウスの左ボタン) を使用して、組み込み型宣言ファイルの内容を表示できます。
• たとえば、forEach メソッドの型宣言を表示すると、VSCode は自動的にlib.es5.d.ts型宣言ファイルにジャンプします。
• もちろん、ウィンドウやドキュメントなどの BOM および DOM API にも、対応する型宣言があります (lib.dom.d.ts)

(2) サードパーティライブラリの型宣言ファイル

• 一般的に使用されるサードパーティ ライブラリには、対応する型宣言ファイルがあります。
  • ライブラリには、axios などの型宣言ファイルが付属しています。node_modules/axios ディレクトリを参照してください。
  • 高品質の TS 型宣言を提供する github リポジトリである DefinitelyTyped によって提供されます
  • 実際のプロジェクト開発では、サードパーティ ライブラリには独自の宣言ファイルはなく、VSCode が明確な指示を与えます。
  • TS 公式ドキュメントには、@types/* ライブラリ をクエリできるページが用意されています。

(3) 独自の型宣言ファイルを作成する

• プロジェクト内での共有タイプ
  • 同じタイプが複数の .ts ファイルで使用されています。この時点で、.d.ts ファイルを作成してこのタイプを提供し、タイプの共有を実現できます
  • ステップ
    • Index.d.ts 型宣言ファイルを作成します。
    • 共有する必要があるタイプを作成し、export を使用してエクスポートします。
    • 共有タイプを使用する必要がある .ts ファイルで、インポートを通じてそれをインポートします。
• 既存の JS ファイルの型宣言を提供する
  • 背景
    • JS プロジェクトを TS プロジェクトに移行する場合、既存の .js ファイルに型宣言を含めるために
    • ライブラリの作成者になり、他の人が使用できるライブラリを作成します

(4) 型宣言ファイルの使用方法

• 注: .js ファイルは TS プロジェクトで使用できます。.js ファイルをインポートすると、TS は .js と同じ名前の .d.ts ファイルを自動的にロードして、型宣言を提供します。
• 宣言: 型宣言に使用され、新しい変数を作成する代わりに、他の場所 (.js ファイルなど) に既に存在する変数の型を宣言します。
  • タイプやインターフェイスなどの明示的な TS タイプの場合、declare キーワードは省略できます。
  • let、function などには二重の意味があり (JS と TS で使用可能)、型宣言に使用されることを明確に指定するには、declare キーワードを使用する必要があります。

let count = 10
let songName = '痴心绝对'
let position = {
  x: 0,
  y: 0
}

function add(x, y) {
  return x + y
}

function changeDirection(direction) {
  console.log(direction)
}

const fomartPoint = point => {
  console.log('当前坐标：', point)
}

export { count, songName, position, add, changeDirection, fomartPoint }

型宣言ファイルを定義する

declare let count:number

declare let songName: string

interface Position {
  x: number,
  y: number
}

declare let position: Position

declare function add (x :number, y: number) : number

type Direction = 'left' | 'right' | 'top' | 'bottom'

declare function changeDirection (direction: Direction): void

type FomartPoint = (point: Position) => void

declare const fomartPoint: FomartPoint

export {
  count, songName, position, add, changeDirection, FomartPoint, fomartPoint
}

(2) 既存プロジェクトへのTS追加

• CRA が TS ドキュメントを追加
• ステップ
  • インストールパッケージ:yarn add typescript @types/node @types/react @types/react-dom @types/jest
  • jsconfig.json を path.tsconfig.json に変更します
  • React スキャフォールディングを通じて最初に作成された TS プロジェクトの tsconfig.json の構成を独自のプロジェクトにコピーします。
  • path.tsconfig.json ファイルを作成し、元の jsconfig.json ファイルの内容を取得します

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": "./",
    "paths": {
    
    
      "@/*": ["src/*"],
      "@scss/*": ["src/assets/styles/*"]
    }
  }
}

• tsconfig.json で構成を追加します

{
    
    
  // 添加这一句
  "extends": "./path.tsconfig.json",

  "compilerOptions": {
    
    
    ...
  }
}

• React スキャフォールディングを通じて作成された TS プロジェクトの src/react-app-env.d.ts を自分のプロジェクトの src ディレクトリにコピーします
• プロジェクトを再開する
• 説明する
  • プロジェクトで TS を使用する場合、js ファイルと ts ファイルの両方を含めることができます。
    • .js、.jsx (JS を使用する場合、React コンポーネントに対応するファイルの接尾辞)
    • .ts、.tsx (TS を使用する場合、React コンポーネントに対応するファイル拡張子)、.d.ts
  • 既存のプロジェクトにTSを追加する場合の推奨モード
    • 新機能には TS を使用する
    • 実装された機能については、引き続き JS ファイルを保持し、徐々に TS に変更することができます。
  • React コンポーネントに対応するファイルのサフィックスは次のように変更されます。.tsx
  • ツール関数に対応するファイル接尾辞。次のように変更します。.ts または型宣言ファイルを追加します。 .d.ts