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交換パーティションの詳細な例

MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...

Jenkins は Docker イメージを構築し、Harbor ウェアハウスにプッシュします

目次DockerファイルドキュメントJenkins の設定Spring Boot プロジェクトでは、...

おすすめの無料英語手書きフォント20選

Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します

前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...

Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能

最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...

HTML(divレイヤー)を介してFLASHにリンクを追加するための実装コード

今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...

画像の色を変更するための純粋なCSS

画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...

IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...