TS 静的型は、人為的に 2 つのカテゴリに分類できます。 基本型: オブジェクト タイプ:配列、関数、オブジェクト、列挙、タプルなど。 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に代入する })() 基本型は比較的単純で、特に TS には たとえば、 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], ] 上記のコードでは、[ 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' 型に割り当てることはできません })()
これは 3.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" 型には存在しません }) })() 上記のコードでは、まず 関数式のパラメータに型注釈を追加すると、コンテキスト型は無視され、エラーは報告されません。 サンプルコードは次のとおりです。 // コンテキストに型情報が指定されている場合、コンテキストは無視されます。 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
TypeScript の基本型に関する記事はこれで終わりです。TypeScript の基本型についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLはデフォルトのエンジンと文字セットの詳細を変更します
1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...
まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...
MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...
関連する依存関係をインストールするnpm i lib-flexible --save npm i p...
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...
メインライブラリの実行 CREATE DATABASE test CHARACTER SET utf...
目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...
Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...
実稼働環境で起こる最も嬉しいことは、シナリオによっては、更新または削除時にパラメータを無視せざるを得...
1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...
XQuery は、XML ドキュメントからデータを抽出するための言語です。 XQuery は、XML...