TypeScriptのインストールと使用方法と基本的なデータ型

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることです

npmを使用してインストールする

npm インストール -g タイプスクリプト

cnpmを使用してインストールする

cnpm インストール -g タイプスクリプト

yarnを使ってインストールする

糸グローバルTypescriptを追加

ステップ2 TypeScriptを初期化する

TypeScriptを初期化する

vscodeターミナルで>>ビルドタスクを実行>> tsc: monitor tsconfig.json

監視

次は、Typescriptの旅を始めましょう〜

TypeScript 基本データ型

// ブール型 boolean 数値型 number 文字列型 string 配列型 array タプル型 tuple 列挙型 enum any 型 void 型 never 型 // ブール型 let flag:boolean = true
console.log(フラグ) //true
 
// 数値型 let num:number = 11234
コンソール.log(数値) // 112
 
// 文字列型 let str:string = 'str str str~'
let str1:string = `hello this is string ${ num }` // テンプレート文字列もサポートします console.log(str) // str str str~

// 配列型 // type1 要素型の後に [] を追加して、この型の要素の配列を示すことができます。let list:number[] = [1,2,3]
list1:文字列[] = ['a','b','c']とします
// type2 は配列ジェネリックを使用します。Array<要素の型>
list3:配列<数値> = [1,2,3]とします。
list4:Array<文字列> = ['a','b','c'] とします。

//タプル型タプル
タプル型を使用すると、既知の数と型の要素の配列を表すことができ、各要素は異なる型にすることができます。
let x:[文字列, 数値]
let y:[ 数値, 文字列 ]
x = [ 1, 'a' ] // エラー
x = [ 'a', 1 ] // 真 
y = [ 1,'a' ] // 真
// 範囲外の要素にアクセスする場合は、代わりにユニオン型が使用されます。
x[3] = 'yuejie' // 成功 文字列は (文字列 | 数値) 型をサポートします x[4] = true // エラー bool は (文字列 | 数値) 型ではありません // 列挙 enum Color { blue, red, orange }
列挙フラグ { 成功 = 1、エラー = 2 }
列挙型 Color1 { 青、赤 = 4、オレンジ、緑 }
c:Color = Color.red // 0 とします
result:Flag = Flag.success // 1 とします
d:Color1 = Color1.orange // 5 とします 
e:Color1 = Color1.blue // 0 とします

// 任意の型
// ユーザーが動的に入力する値がわからない場合は、強力な型言語の検出を回避します。 any型を使用してlet notSure:any = 4をマークすることができます。
notSure = 'これはどれか' // ok
notSure = true // 正常
list0:any[] = [1,true,'free']とします
list0[2] = 1 //ok、型が指定されていません // Void型 // 型がないことを意味します。関数が値を返さない場合、その戻り値の型は通常 void になります。
function user():void { console.log( 'this is void' ) } // 戻り値なし function user1 ():number { return 123 } // 数値型を返す let user2:void = undefined | null // 役に立たない、undefined と null のみ使用可能 

// Null と Undefined については説明されていません let u: undefined = undefined;
n: null = null とします。

// Never never 型は決して存在しない値の型を表します。 never 型は、常に例外をスローするか、まったく値を返さない関数式またはアロー関数式の戻り値型です。
neve = 123 // エラー
// never を返す関数は到達不可能なエンドポイントを持つ必要があります neve = (() => { throw new Error('err') })() // 成功
関数 loop(): 決して {
 (true) { } の間
}

// PS 今日のチュートリアルはここで終了です。オブジェクトタイプは後で更新されます。

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

以下もご興味があるかもしれません:
  • TypeScript 基本データ型
  • 1つの記事でTypeScriptのデータ型について学ぶ

<<:  Docker は次の「Linux」になれるか?

>>:  MySQL 5.6.36 Windows x64 バージョンのインストールチュートリアルの詳細

推薦する

MySQL データベース内の同じテーブルを同時にクエリして更新する方法

通常のプロジェクトでは、1 回の入札で同時にデータを更新および照会する必要があるという問題によく遭遇...

マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュートリアル

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...

CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...

Docker Compose の実践とまとめ

Docker Compose は、Docker コンテナ クラスターのオーケストレーションを実現しま...

Dockerイメージとコンテナの一般的な操作の詳細な説明

画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

フロア効果を実現するためのJavaScript

この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

ドラッグ位置プレビューを実装するネイティブJS

この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...

ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ​...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

自動行折り返し機能付き CSS Flex レイアウトのサンプル コード

フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけで...