TypeScript の基本型の紹介

TypeScript の基本型の紹介

TS 静的型は、人為的に 2 つのカテゴリに分類できます。

基本型: booleannumberstringAnyVoidNullUndefinedNever

オブジェクト タイプ:配列、関数、オブジェクト、列挙、タプルなど。

1. 基本タイプ

TS の型定義は、サンプル コードに示されているように、主に次のように定義されます。

;(関数 () {
  /*
   * TS では、let 変数名: データ型 = 変数値 を使用してデータ型 (型注釈) を定義できます。
   * 定義時にデータ型を指定することはできません。TS がデータ型を推測します。*/
  // ブール型 let boo: boolean = false // ブール値以外の値を代入すると例外が発生します // 数値型 let num: number = 100

  // 文字列 let str: string = 'string' // 位置を指定するために一重引用符または二重引用符を使用します str = `template string` // テンプレート文字列定義を使用します // 任意の型 -> 型が動的型である可能性があることを示し、コンパイル時に型チェックを削除します let AnyType: any = 123
  AnyType = true // 重複した代入は例外をスローしません // Void 型 -> 通常、戻り値のない関数型に使用されます ​​function demo(): void {
    console.log('void 型のテスト')
  }
  デモ()

  // 2つの特別な型、nullとundefinedがあります
  // これら 2 つの型はすべての型のサブタイプです。つまり、これら 2 つの型は数値や文字列などの型に割り当てることができます。let u: undefined = undefined
  num = u // 数値型変数の値をundefinedに代入する
  n: null = null とします
  boo = n // ブール変数をnullに代入する
})()

基本型は比較的単純で、特にJavaScriptに似ています。一見すると、 JavaScript

TS にはNeverタイプもあります。この型は、決して存在しない値を表します。

たとえば、 never型は、常に例外をスローするか、値をまったく返さない関数式またはアロー関数式の戻り値の型です。

2. オブジェクトタイプ

2.1 配列

TS の配列は JS の配列とは異なります。TS で配列を使用すると、変数を配列として定義できるだけでなく、配列内の型を見つけることもできます。

サンプルコードは次のとおりです。

;(関数 () {
  // 数値のみを含む配列型を定義する let arr1: number[] = [1, 2, 3]
  コンソールログ(arr1)
  // 数値、文字列、ブール値を保持できる配列を定義します。let arr2: (number | string | boolean)[] = ['1', '2', true]
  コンソールログ(arr2)
  // 任意の型の配列を定義する let arr3 = [1, ['1', '2', true], true]
  コンソールログ(arr3)

  // オブジェクト型の配列を定義します。オブジェクトには、name と age の 2 つのプロパティが必要です。const objectArray: { name: string; age: number }[] = [
    { 名前: 'Yiwan Zhou'、年齢: 18 }、
  ]
  // または型エイリアスで宣言する // 型エイリアスを型で定義する type User = { name: string; age: number }
  const objectArr: User[] = [{ name: '一碗周', age: 18 }]
})()

2.2 タプル

タプル型を使用すると、要素の数と型が既知の配列を表すことができます。要素は同じ型である必要はありません。

サンプルコードは次のとおりです。

;(関数 () {
  // 値がそれぞれ文字列と数値であるタプルを定義します。let tuple: [string, number] = ['123', 123]
  console.log(タプル) // [ '123', 123 ]
  // インデックスでtuple[0] = 'string'を割り当てる
  console.log(タプル) // [ '文字列', 123 ]
  // 他の型を割り当てる // tuple[0] = true
  // console.log(tuple) // 例外をスローします })()

タプルの主な機能は、配列内の各項目と配列の長さを制限することです。

タプルと配列はネストできます。構文構造は次のとおりです。

// ネストされたタプルと配列 let tuples: [string, number][] = [
    ['123', 123],
    ['456', 456],
]

上記のコードでは、[ string , number ] はタプルを表します。最後に [] を追加すると、タプルを格納する配列を示します。

2.3 オブジェクト

オブジェクトには上記のすべての型を含めることができます。サンプル コードは次のとおりです。

;(関数 () {
  // MyName と age という 2 つのプロパティを持つオブジェクトを定義します。MyName は文字列型で、age は数値型です。let obj: {
    MyName: 文字列
    年齢: 番号
  }
  // オブジェクトの割り当て。割り当てが上記で指定した型に従って実行されない場合は、例外がスローされます。obj = {
    私の名前: 'Yiwan Zhou'、
    年齢: 18歳
  }
  console.log(obj) // { MyName: '一碗周', age: 18 }
})()

TS では、型推論によって余分なコードを書かずに機能を実現できるため、あらゆる場所で型に注釈を付ける必要はありません。ただし、コードをより読みやすくしたい場合は、それぞれの型を記述することができます。

3. 型推論

TypeScript では、型を明示的に指定する必要がない場合があります。次のコードのように、コンパイラが適切な型を自動的に推測します。

;(関数 () {
  let myName = '一碗の周'
  myName = true // エラー: 'boolean' 型を 'string' 型に割り当てることはできません
})()

myName変数を定義したとき、そのデータ型を指定せず、単に文字列値を割り当てました。ただし、この値をstring以外の値に再割り当てすると、コンパイラは例外をスローします。

これはTypeScriptで最も単純な型推論であり、右側の値に基づいて変数のデータ型を推論します。

3.1 型結合における型推論

型結合の詳細については、「結合型、交差型、型保護」を参照してください。

変数に複数の型の値がある場合、 TypeScript複数の型を 1 つのユニオン型にマージします。

サンプルコードは次のとおりです。

let arr = [1, '2'] // 文字列と数値を含む配列を定義する // 上記で定義した配列に値を再割り当てする // arr = [true, false] // エラー 'boolean' 型を 'string | number' 型に割り当てることはできません

// 次の例もあります let val = arr.length === 0 ? 0 : '配列の長さは 0 ではありません'
// val = false // エラー: 'boolean' 型を 'string | number' 型に割り当てることはできません


3.2 コンテキストの種類

前に紹介した例はすべて、= の右側の値に基づいて = の左側の型を推測できます。これから紹介するコンテキスト型は、これまでの型推論とは異なります。コンパイラは、変数が現在配置されているコンテキストに基づいて、変数の型を推論します。

サンプルコードは次のとおりです。

;(関数 () {
  // インターフェースを定義する interface Person {
    名前: 文字列
    年齢: 番号
  }
  // 上記で定義したインターフェースを通じて配列を定義します。let arr: Person[] = [{ name: '一碗周', age: 18 }]
  // 定義された配列を走査する arr.forEach(item => {
    // 現在の環境に基づいて、コンパイラはアイテムが hobby 型であり、 hobby 属性を持たないことを自動的に推測します console.log(item.hobby) // 属性 "hobby" は "Person" 型には存在しません
  })
})()

上記のコードでは、まずPersonインターフェイスを定義し、次にこのインターフェイスを使用して配列を定義します。配列を走査すると、コンパイラはitemPerson型であると推測し、例外をスローします。

関数式のパラメータに型注釈を追加すると、コンテキスト型は無視され、エラーは報告されません。

サンプルコードは次のとおりです。

// コンテキストに型情報が指定されている場合、コンテキストは無視されます。
arr.forEach((項目: 任意) => {
    // 現在の環境に基づいて、コンパイラはアイテムが hobby 型であり、 hobby 属性を持たないことを自動的に推測します console.log(item.hobby) // 属性 "hobby" は "Person" 型には存在しません
})

4. 型アサーション

いわゆる型アサーションとは、この値のデータ型が特定の型であることを TS に伝えることであり、それをチェックする必要はありません。

これを行うと、実行時間には影響せず、コンパイル時間のみに影響します。

サンプルコードは次のとおりです。

let SomeValue: any = 'これは文字列です'
// 構文 1 let StrLength1: number = (<string>SomeValue).length
// 構文 2 構文 let StrLength2: number = (SomeValue as string).length

TS で JSX を使用する場合、2 番目の構文のみがサポートされることに注意してください

TypeScript の基本型に関する記事はこれで終わりです。TypeScript の基本型についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で Typescript を使用するサンプルコード
  • TypeScript の関数とクラスを理解していますか?
  • TypeScript のインターフェースとジェネリックを理解していますか?
  • TypeScript 列挙型
  • 1つの記事でTypeScriptのデータ型について学ぶ
  • TypeScript型注釈の使い方の詳細な説明

<<:  MySQLはデフォルトのエンジンと文字セットの詳細を変更します

>>:  jQueryはクッキーを操作する

推薦する

SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

オンラインショッピングモールデータベース - ユーザー情報データ運用プロジェクトの説明電子商取引の台...

Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...

MySQLデータベースの追加、削除、変更操作の詳細な説明

データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...

Dockerプライベートライブラリの実装

プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...

TCPパフォーマンスチューニングの実装原理とプロセス分析

3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...

Node.js のイベント モジュールに関する知識ポイントのまとめ

Node の研究と応用を通じて、NodeJS はシングルスレッド、イベント駆動型、非ブロッキング I...

Vue2.0は適応解像度を実装する

この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

JS正規RegExpオブジェクトについての簡単な説明

目次1. RegExpオブジェクト2. 文法2.1 定義2.2 修飾子2.3 角括弧2.4 メタ文字...

CSSスタイルの記述順序と命名規則と注意事項

書き順の重要性ブラウザのリフローを減らし、ブラウザのDOMレンダリングパフォーマンスを向上させる①:...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

Vue で ToDo アプリケーションを実装する例

背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...