個人的には、ジャンルの制限を厳しくすることには賛成できません。結局のところ、私たちはジャンルを変えるようなさまざまな執筆スタイルに慣れているのです。 私の最近のプロジェクトの 1 つは この記事のタイトルの「前」に注意してください。この記事の目的は、 1. 公式の足場を使って構築するnpm インストール -g @vue/cli # または 糸グローバル追加 @vue/cli 新しい 次に、コマンド ラインでプリセットを選択するように求められます。矢印キーを使用して 次に、以下に示すように、 これを実行したら、 次に、残りの設定を下の画像のように構成します。 Vue CLI ツールはすべての依存関係をインストールし、プロジェクトをセットアップします。 次にプロジェクトを実行します 2. プロジェクトディレクトリ分析
ここでは 要約すると次の 2 つの文になります。
さて、おなじみの <テンプレート> <div class="hello"> <h1>{{ メッセージ }}</h1> <!-- 省略 --> </div> </テンプレート> <script lang="ts"> 'vue-property-decorator' から { Component, Prop, Vue } をインポートします。 @成分 デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します。 @Prop() プライベートメッセージ!: 文字列; } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイル スコープ></style> この時点で、新しい章を始める準備が整いました 3. TypeScript のクイックスタート3.1 基本型と拡張型
1. 基本型コレクション // 数値、2進数、8進数、16進数はすべてサポートされています let decLiteral: number = 6; hexLiteral: 数値 = 0xf00d; // 文字列、一重引用符または二重引用符は OK です let name: string = "bob"; let sentence: string = `こんにちは、私の名前は${ name }です。 // 配列、2 番目の方法は配列ジェネリックを使用することです。Array<要素の型>: リスト: number[] = [1, 2, 3]; リスト: 配列<数値> = [1, 2, 3]; u: undefined = undefined とします。 n: null = null とします。 2. 特殊なタイプ 1. タプルは、データ型を正しい順序で事前に定義する必要がある整理された配列と考えてください。 const messyArray = ['something', 2, true, undefined, null]; 定数タプル: [数値、文字列、文字列] = [24、"Indrek"、"Lasn"] ( 2. // デフォルトでは要素番号は 0 から始まりますが、手動で 1 から始めることもできます enum Color {Red = 1、Green = 2、Blue = 4} c:Color = Color.Green; とします。 colorName: 文字列 = Color[2]; console.log(colorName); // 上記のコードでは値が 2 なので、「Green」を出力します。 もう 1 つの優れた例は、列挙型を使用してアプリケーションの状態を保存することです。 3. 戻り値がない場合、エラーが報告されます。 戻り値を 現時点では 4. えーっと…どんなタイプでも大丈夫です。どんなタイプを扱っているのかわからないときに使えます。 しかし、使いすぎると T を使用する目的が達成されなくなるため、注意して使用する必要があります。 let person: any = "フロントエンド説得教師" 人 = 25 人 = 真実 主な適用シナリオは次のとおりです。
5. 簡単に言えば、「 具体的な動作は次のとおりです。
3. 型アサーション 簡単に定義すると、値の型を手動で指定するために使用できます。 これを記述する方法には、山括弧と let someValue: any = "これは文字列です"; strLength: number = (<文字列>someValue).length; とします。 strLength: number = (someValue as string).length; とします。 使用例としては次のようなものがあります。 TypeScript がユニオン型の変数の型を不明な場合は、ユニオン型のすべての型に共通するプロパティまたはメソッドにのみアクセスできます。 関数 getLength(何か: 文字列 | 数値): 数値 { something.length を返します。 } // index.ts(2,22): エラー TS2339: プロパティ 'length' は型 'string | number' に存在しません。 // プロパティ 'length' はタイプ 'number' には存在しません。 長さにアクセスすると、エラーが報告されます。型がまだ決定されていないときに、型のプロパティまたはメソッドにアクセスする必要がある場合があります。このとき、エラーを回避するにはアサーションが必要です。 関数 getLength(何か: 文字列 | 数値): 数値 { if ((<文字列>something).length) { (<文字列>something).length を返します。 } それ以外 { something.toString().length を返します。 } } 3.2 ジェネリックソフトウェア エンジニアリングの主要部分はコンポーネントの構築です。構築されたコンポーネントは明確な定義と統一されたインターフェースを持つ必要があるだけでなく、再利用可能である必要もあります。既存のデータ型と将来追加されるデータ型をサポートするコンポーネントは、大規模なソフトウェア システムの開発プロセスに大きな柔軟性をもたらします。 1. ジェネリックメソッド TypeScript では、ジェネリック メソッドを宣言する方法が 2 つあります。 関数gen_func1<T>(引数: T): T { 引数を返します。 } // または let gen_func2: <T>(arg: T) => T = function (arg) { 引数を返します。 } 電話をかける方法も 2 つあります。 gen_func1<文字列>('Hello world'); gen_func2('こんにちは世界'); // 2 番目の呼び出しメソッドでは、渡されたパラメータに基づいてコンパイラが対応する型を自動的に識別するため、型パラメータを省略できます。 2. ジェネリックと 特殊な型
// 方法 1: 任意のパラメータを持つメソッド function any_func(arg: any): any { console.log(引数の長さ); 引数を返します。 } // 方法 2: 配列ジェネリックメソッド function array_func<T>(arg: Array<T>): Array<T> { console.log(引数の長さ); 引数を返します。 } 3. ジェネリック型 汎用インターフェース: インターフェース Generics_interface<T> { (引数: T): T; } 関数 func_demo<T>(引数: T): T { 引数を返します。 } func1: Generics_interface<number> = func_demo とします。 func1(123); // 正しい型の実際のパラメータ func1('123'); // 間違った型の実際のパラメータ 3.3 カスタム型: インターフェースと型エイリアス
1. 類似点 オブジェクトまたは関数を説明するために使用できます。 インターフェース ユーザー { 名前: 文字列 年齢: 番号 } タイプ ユーザー = { 名前: 文字列 年齢: 番号 }; インターフェースSetUser{ (名前: 文字列、年齢: 数値): void; } タイプ SetUser = (名前: 文字列、年齢: 数値): void; どちらも拡張機能を許可します: インターフェースはインターフェースを拡張する インターフェース名 { 名前: 文字列; } インターフェース User は Name を拡張します { 年齢: 番号; } 型は型を拡張する タイプ名 = { 名前: 文字列; } User = Name & { age: number } と入力します。 インターフェースは型を拡張する タイプ名 = { 名前: 文字列; } インターフェース User は Name を拡張します { 年齢: 番号; } 型はインターフェースを拡張する インターフェース名 { 名前: 文字列; } タイプ ユーザー = 名前 & { 年齢: 番号; } 2. 相違点
// 基本型エイリアス type Name = string //ユニオン型インターフェース Dog { ウォン(); } インターフェース Cat { ミャオ(); } ペットの種類 = 犬 | 猫 // 配列内の各位置の型を具体的に定義します type PetList = [Dog, Pet] // 変数の型を取得したい場合はtypeofを使用します div = document.createElement('div'); とします。 タイプ B = typeof div その他のトリック type StringOrNumber = 文字列 | 数値; タイプ Text = 文字列 | { テキスト: 文字列 }; NameLookup = Dictionary<文字列、Person>と入力します。 型 Callback<T> = (data: T) => void; 型 Pair<T> = [T, T]; type Coordinates = Pair<number>; Tree<T> = T | { 左: Tree<T>、右: Tree<T> }; と入力します。
インターフェース ユーザー { 名前: 文字列 年齢: 番号 } インターフェース ユーザー { 性別: 文字列 } /* ユーザーインターフェースは{ 名前: 文字列 年齢: 番号 性別: 文字列 } */ オプション属性 インターフェース内のすべての属性が必須というわけではありません。 特定の条件下でのみ存在するものや、まったく存在しないものもあります。 たとえば、関数に渡されるパラメーター オブジェクトの一部のプロパティにのみ値が割り当てられます。オプション属性を持つインターフェースは、オプション属性名の定義の後に インターフェース Person { 名前: 文字列; 年齢?: 番号; 性別?: 番号; } 読み取り専用プロパティ 名前が示すように、このプロパティは書き込み可能ではなく、オブジェクト プロパティの値はオブジェクトが作成された直後にのみ変更できます。 次に示すように、プロパティ名の前に インターフェース ユーザー { 読み取り専用ログイン名: 文字列; パスワード: 文字列; } 上記の例は、User オブジェクトが初期化された後は loginName を変更できないことを示しています。 3.4 実装と継承: implements と extends implement の基本的な使い方: インターフェースIDeveloper { 名前: 文字列; 年齢?: 番号; } // わかりました クラス dev は IDeveloper を実装します { 名前 = 'アレックス'; 年齢 = 20; } // わかりました クラスdev2はIDeveloperを実装します{ 名前 = 'アレックス'; } // エラー クラスdev3はIDeveloperを実装します{ 名前 = 'アレックス'; 年齢 = '9'; } そして、
3.5 宣言ファイルと名前空間:declareとnamespace先ほど、Vue プロジェクトの // シムス-tsx.d.ts Vue をインポートします。{ VNode } から 'vue'; グローバル宣言 { 名前空間 JSX { // tslint: 空のインターフェースを無効にする インターフェース Element は VNode を拡張します {} // tslint: 空のインターフェースを無効にする インターフェース ElementClass は Vue {} を拡張します。 インターフェースIntrinsicElements { [要素: 文字列]: 任意; } } } // shims-vue.d.ts モジュール '*.vue' を宣言します。 'vue' から Vue をインポートします。 デフォルトの Vue をエクスポートします。 } よく使われるものをいくつか紹介します。
他のJSライブラリとの連携 モジュールと同様に、名前空間を使用する他の JS ライブラリの 名前空間D3を宣言する{ エクスポートインターフェースセレクター{...} } var d3: D3.Base を宣言します。 つまり、上記の 2 つのファイルは次のようになります。
3.6 アクセス修飾子: private、public、protected実のところ、理解するのはとても簡単です。
クラス動物{ プライベート名: 文字列; コンストラクター(theName: 文字列) { this.name = 名前; } } let a = new Animal('Cat').name; // エラー、'name' はプライベートです
クラス動物{ 保護された名前: 文字列; コンストラクター(theName: 文字列) { this.name = 名前; } } クラスRhinoはAnimalを拡張します{ コンストラクタ() { スーパー('Rhino'); } 取得名() { console.log(this.name) //ここでの名前はAnimalクラスの名前です } } 3.7 オプション パラメーター (?:) と非 Null アサーション演算子 (!.)オプションパラメータ 関数buildName(firstName: 文字列、lastName?: 文字列) { firstName + ' ' + lastName を返す } // エラーのデモンストレーション buildName("firstName", "lastName", "lastName") // buildName("firstName") の正しいデモンストレーション // buildName("firstName", "lastName") の正しいデモンストレーション 非 null アサーション演算子: 変数値が確実に空でないことが確実な場合に使用します。 オプション パラメータとは異なり、非 null アサーション演算子は null または undefined から保護しません。 let s = e!.name; // e が null でないことをアサートし、name プロパティにアクセスします 拡大する
4. VueコンポーネントのTs記述vue2.5 以降、vue は ts をより適切にサポートするようになりました。公式ドキュメントによると、TypeScript と組み合わせて Vue を記述する方法は 2 つあります。 Vue.extend 'vue' から Vue をインポートします const コンポーネント = Vue.extend({ // 型推論が有効 }) vue クラス コンポーネント 'vue-property-decorator' から { Component, Vue, Prop } をインポートします。 @成分 デフォルトのクラスTestをエクスポートし、Vueを拡張します。 @Prop({ 型: オブジェクト }) プライベートテスト: { 値: 文字列 } 理想的には、 ただし、 つまり、コードヒントの欠落、型チェック、コンパイルエラーなどの問題が発生します。 選択をするのは新人だけであり、大物は最善のものを選ぶ。 2番目について直接話しましょう: 4.1 vueクラスコンポーネント
<テンプレート> <div class="hello"> <h1>{{ メッセージ }}</h1> <!-- 省略 --> </div> </テンプレート> <script lang="ts"> 'vue-property-decorator' から { Component, Prop, Vue } をインポートします。 @成分 デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します。 @Prop() プライベートメッセージ!: 文字列; } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイル スコープ></style> 公式にサポートされているライブラリである 1. 関数修飾子 「@」は関数の変更というよりも、変更する関数への参照または呼び出しです。 あるいは、平易な言葉で言うと: たとえば、次のコードには呼び出されないが出力結果も生成する 2 つの関数があります。 テスト(f){ console.log("前..."); f() console.log("後..."); } @テスト 関数(){ console.log("func が呼び出されました"); } 直接実行して結果を出力します。
上記のコードから、次のことがわかります。
ただし、インタープリターが関数修飾子「@」を読み取る場合、次の手順が実行されます。
つまり、修飾子を持つ関数のエントリ パラメータは、以下の関数全体になります。これは、 2.
元の Vue コンポーネント テンプレートを見てみましょう。 '@/components' から {componentA,componentB} をインポートします。 エクスポートデフォルト{ コンポーネント: { コンポーネントA、コンポーネントB}、 小道具: { propA: { 型: 数値 }, propB: { デフォルト: 'デフォルト値' }, propC: { 型: [文字列、ブール値] }, } // コンポーネントデータ data() { 戻る { メッセージ: 'こんにちは' } }, // 計算プロパティ computed: { 逆メッセージ(){ this.message.split('').reverse().join('') を返します } // Vuexデータステップ() { this.$store.state.count を返します } }, メソッド: { メッセージの変更 () { this.message = "さようなら" }, 取得名() { name = this.$store.getters['person/name']とします。 戻り名 } }, // ライフサイクルが作成されました () { }, マウントされた(){}、 更新されました () { }, 破壊されました () { } } 上記のテンプレートは、修飾子の記述ルールに置き換えられます。 'vue-property-decorator' から { Component, Vue, Prop } をインポートします。 'vuex-class' から { State, Getter } をインポートします。 '@/person' から { count, name } をインポートします '@/components' から {componentA, componentB } をインポートします。 @成分({ コンポーネント:{コンポーネントA、コンポーネントB}, }) デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します{ @Prop(Number) 読み取り専用 propA!: number | undefined @Prop({ default: 'デフォルト値' }) 読み取り専用 propB!: 文字列 @Prop([String, Boolean]) 読み取り専用 propC!: 文字列 | ブール値 | 未定義 // 元のデータ メッセージ = 'こんにちは' // 計算プロパティ private get riversMessage(): string[] { this.message.split('').reverse().join('') を返します } // Vuex データ @State((state: IRootState) => state . booking. currentStep) step!: number @Getter( '人/名前') 名前!: 名前 // 方法 パブリックchangeMessage(): void { this.message = 'さようなら' }, パブリックgetName(): 文字列{ storeName = 名前とします ストア名を返す } // ライフサイクル private created (): void { }, プライベートマウント():void { }, プライベート更新():void { }, プライベート破棄(): void { } } ご覧のとおり、ライフサイクル リストに 4.2 グローバルツールの追加グローバル モジュールを導入するには、 'vue' から Vue をインポートします。 './App.vue' からアプリをインポートします。 './router' からルーターをインポートします。 './store' からストアをインポートします。 Vue.config で productionTip を false に設定します。 新しいVue({ ルーター、 店、 レンダリング: (h) => h(App), }).$mount('#app'); 'vue' から Vue をインポートします。 './App.vue' からアプリをインポートします。 './router' からルーターをインポートします。 './store' からストアをインポートします。 // 新しいモジュール import i18n from './i18n'; Vue.config で productionTip を false に設定します。 新しいVue({ ルーター、 店、 i18n, // 新しいモジュールのレンダリング: (h) => h(App), }).$mount('#app'); しかし、これだけでは十分ではありません。 //グローバルメソッドを宣言する。declare module 'vue/types/vue' { インターフェースVue { 読み取り専用 $i18n: VueI18Next; $t: 翻訳関数; } } 後で 4.3 Axiosの使用とパッケージング
TSで $ npm i axios vue-axios 'vue' から Vue をインポートします 'axios' から axios をインポートします 'vue-axios' から VueAxios をインポートします Vue.use(VueAxios、axios) を使用します 次に、それをコンポーネントで使用します。 Vue.axios.get(api).then((レスポンス) => { コンソールログ(応答データ) }) this.axios.get(api).then((レスポンス) => { コンソールログ(応答データ) }) this.$http.get(api).then((レスポンス) => { コンソールログ(応答データ) }) 1. 新しいファイル ファイルディレクトリ: -api - main.ts // 実際に -utils を呼び出す - request.ts // インターフェースのカプセル化 2. 'axios' から * を axios としてインポートします。 '@/store' からストアをインポートします。 // これは、使用される特定の UI コンポーネント ライブラリに応じて置き換えることができます。import { Toast } from 'vant'; 'axios' から { AxiosResponse、AxiosRequestConfig } をインポートします。 /* baseURL は実際のプロジェクトに応じて定義されます */ 定数 baseURL = process.env.VUE_APP_URL; /* axiosインスタンスを作成する */ const サービス = axios.default.create({ ベースURL、 timeout: 0, // リクエストタイムアウト maxContentLength: 4000, }); service.interceptors.request.use((config: AxiosRequestConfig) => { 設定を返します。 }, (エラー: 任意) => { Promise.reject(エラー); }); サービスインターセプターレスポンスの使用( (レスポンス: AxiosResponse) => { 応答ステータスが 200 の場合 Toast.fail('リクエストエラー!'); } それ以外 { 応答データを返します。 } }, (エラー: 任意) => { Promise.reject(error) を返します。 }); デフォルト サービスをエクスポートします。 便宜上、axios によって返される固定形式を定義し、新しい エクスポートインターフェースAjaxResponse { コード: 番号; データ: 任意; メッセージ: 文字列; } 3. // api/main.ts '../utils/request' からリクエストをインポートします。 // 得る エクスポート関数 getSomeThings(params:any) { リクエストを返す({ URL: '/api/getSomethings', }); } // 役職 エクスポート関数 postSomeThings(params:any) { リクエストを返す({ url: '/api/postSomethings', メソッド: 'post'、 データ:パラメータ }); } 5. コンポーネントを書く 時間を節約するために、 <テンプレート> <div class="blogpost"> <h2>{{ 投稿.タイトル }}</h2> <p>{{ post.body }}</p> <p class="meta">{{ post.author }} が {{ date } に書いたもの } </p> </div> </テンプレート> <script lang="ts"> 'vue-property-decorator' から { Component, Prop, Vue } をインポートします。 // ここでデータを制限します export interface Post { タイトル: 文字列; 本文: 文字列; 著者: 文字列; 投稿日: 日付; } @成分 デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します。 @Prop() プライベート投稿!: 投稿; 日付を取得する() { `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}` を返します。 } } </スクリプト> <スタイルスコープ> h2 { テキスト装飾: 下線; } p.meta { フォントスタイル: 斜体; } </スタイル> 次に、 <テンプレート> <div class="home"> <img alt="Vue ロゴ" src="../assets/logo.png"> <HelloWorld v-for="blogPosts 内の blogPost" :post="blogPost" :key="blogPost.title" /> </div> </テンプレート> <script lang="ts"> 'vue-property-decorator' から Component、Vue } をインポートします。 import HelloWorld, { Post } from '@/components/HelloWorld.vue'; // @ は /src へのエイリアスです @成分({ コンポーネント: こんにちは世界、 }, }) デフォルトクラスHomeをエクスポートし、Vueを拡張します。 プライベートブログ投稿: Post[] = [ { タイトル: 「初めてのブログ投稿です!」 本文: 'Lorem ipsum dolor sit amet.', 著者: 'エルケ'、 投稿日: 新規日付(2019, 1, 18) }, { タイトル: 「見てよ、私はブログを書いているのよ!」 本文: 'やったー、これが2回目の投稿だ!', 著者: 'エルケ'、 投稿日: 新規日付(2019, 1, 19) }, { タイトル: 「またひとつ?!」 本文: 'もう一つ!', 著者: 'エルケ'、 投稿日: 新規日付(2019, 1, 20) }, ]; } </スクリプト> 次にプロジェクトを実行します。 これは単純な親子コンポーネントです。
以上が、Vue の新しいパートナー TypeScript のクイックスタート実践の詳しい内容です。Vue TypeScript クイックスタートの詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)
必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...
以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...
1. MySQL ダウンロード アドレス。 http://ftp.ntu.edu.tw/MySQL...
序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...
目次序文1. 公式サイトからMySQLをダウンロードする2. 解凍ファイルを設定する3. 初期化4....
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...
目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...
結果: 実装コード: html <div class="buttons"&...
前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...
XHTML は 3 つのドキュメント タイプ宣言を定義します。最もよく使用されるのは XHTML T...
ヒント: MySQL では、ユーザーの作成と削除が頻繁に必要になります。ユーザーを作成するときは、通...
以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...
目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...
時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...