TypeScriptの基本型の詳細な説明

TypeScriptの基本型の詳細な説明

ブール型

// ブール型 ---> boolean
// 変数名: データ型 = 値 フラグ: ブール値 = true;
console.log(フラグ)

数値型

//数値型--->数値
let a1: number = 10 // 10進数 let a2: number = 0b1010 // 2進数 let a3: number = 0o12 // 8進数 let a4: number = 0xa // 16進数 console.log(a1 + a2 + a3 + a4)

文字列型

// 文字列型 ---> 文字列
let str1: string = 'ベッドの前で月が明るく輝いている';
let str2: string = '地面に靴が2足';
コンソール.log(文字列1 + ',' + 文字列2)

文字列と数値を連結する

let str3: string = '私の現在の年齢:'
a5: 数値 = 24 とする
コンソールログ(`${str3}${a5}`)

要約: ts には元々どのようなタイプの変数がありますか? 後で値を割り当てるときは、このタイプのデータのみを使用できます。現在の変数に他のタイプのデータを割り当てることはできません。

未定義およびnull

 // undefined と null はどちらも他の型のサブクラスとして使用でき、undefined と null を他の型の変数に割り当てることができます。例: 数値型変数 let und: undefined = undefined
n1l: null = null とします
console.log(と)
コンソール.log(n1l)

配列型

// 方法 1: let 変数名: データ型 [] = [値 1, 値 2, 値 3, ...]
arr1: 数値[] = [10, 20, 30, 40, 50]とします
コンソールログ(arr1);
 // 方法 2: 汎用的な記述 // 構文: let 変数名: Array<データ型>=[値1, 値2, 値3]
arr2: 配列<数値> = [100, 200, 300]
コンソールログ(arr2);

注意: 配列を定義した後、配列内のデータ型は配列を定義したときの型と一致している必要があります。一致していない場合はエラー メッセージが表示され、コンパイルされません。

タプル型

// タプル型: 配列を定義する場合、データの型と数は最初から制限されます。let arr3: [string, number, boolean] = ['小甜甜', 100, true];
コンソールログ(arr3)
// 注意: タプル型を使用する場合、データのデータ型、位置、数は、タプルを定義するときのデータ型と位置と一致している必要があります。console.log(arr3[0].split(''));
コンソールにログ出力します。

列挙型

列挙型カラー{
       赤、
       緑、
       青
}
// 列挙値を受け取るための Color 列挙型の変数を定義します。let color: Color = Color.red
コンソールログ(色);
コンソール.log(色[2])

あらゆるタイプ

str5: any = 100 とします。
str5 = 'うちはオビト'
コンソールログ(str5);
// 配列に数や型が不明な複数のデータを格納する場合は、 any 型を使用して配列を定義することもできます。let arr6: any = [100, 'Uchiha Obito', true];
コンソール.log(arr6)
// この場合、エラー メッセージは表示されません。any 型には利点と欠点があります。console.log(arr6[1].split(''));

void型

関数 getobj(obj: オブジェクト): オブジェクト {
       コンソールにログ出力します。
       戻る {
           名前:「カカシ」
           年齢: 27
       }
}
console.log(getobj({ name: 'サスケ', age: 20 }))

ユニオン型

 // 要件 1: 数値または文字列値の文字列値を取得する関数を定義する function getString(str: number | string): string {
      str.toString() を返します。
}
console.log(getString('萨给'))
 
// 要件 2: 数値または文字列値の長さを取得する関数を定義する function getString1(str: number | string): number {
      str.toString().length を返す
      if ((<文字列>str).length) {
          (str を文字列として) の長さを返す
      } それ以外 {
          str.toString().length を返す
      }
}
  コンソールログ(getString1(12345))
  コンソールログ(getString1('12345'))

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • TypeScriptの一般的な型と応用例の説明
  • Typescriptタイプを使用してフィボナッチを計算する方法を教えます
  • TypeScript マッピング型の詳細
  • TypeScript 列挙型
  • TypeScript の基本型の紹介
  • TypeScriptの型を一緒に学びましょう

<<:  MySQL における tinyint と int の違いの詳細な説明

>>:  CSS3で実装された水平ヘッダーメニュー

推薦する

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

Vue でルートをジャンプする方法をご存知ですか?

目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...

type="file" の入力ボックスのスタイル変更の概要

入力タイプ「file」とは何ですか?これが何なのかは説明する必要はないと思います。誰もが知っているこ...

マークアップ言語 - CSS レイアウト

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

HTML 言語百科事典

123WordPress.com-HTML noscriptオブジェクトolオプションPパラントプレ...

要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

HTML にネストされた div の無効なマージンに対する解決策

div がネストされているときに margin が機能しない問題の解決策を次に示します。さて、マージ...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

Vue プロジェクトでの支払い機能の実装 (WeChat 支払いと Alipay 支払い)

目次プロジェクトにおける一般的な支払い方法Alipay決済微信ペイプロジェクトにおける一般的な支払い...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...