Vue の新しいパートナー TypeScript クイックスタート実践記録

npm インストール -g @vue/cli
＃ または
糸グローバル追加 @vue/cli

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <!-- 省略 -->
  </div>
</テンプレート>
 
<script lang="ts">
'vue-property-decorator' から { Component, Prop, Vue } をインポートします。
 
@成分
デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します。
  @Prop() プライベートメッセージ!: 文字列;
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル スコープ></style>

// 数値、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 とします。

const messyArray = ['something', 2, true, undefined, null];
定数タプル: [数値、文字列、文字列] = [24、"Indrek"、"Lasn"]

// デフォルトでは要素番号は 0 から始まりますが、手動で 1 から始めることもできます enum Color {Red = 1、Green = 2、Blue = 4}
c:Color = Color.Green; とします。
 
colorName: 文字列 = Color[2];
console.log(colorName); // 上記のコードでは値が 2 なので、「Green」を出力します。

let person: any = "フロントエンド説得教師"
人 = 25
人 = 真実

let someValue: any = "これは文字列です";
 
strLength: number = (<文字列>someValue).length; とします。
strLength: number = (someValue as string).length; とします。

関数 getLength(何か: 文字列 | 数値): 数値 {
    something.length を返します。
}
 
// index.ts(2,22): エラー TS2339: プロパティ 'length' は型 'string | number' に存在しません。
// プロパティ 'length' はタイプ 'number' には存在しません。

関数 getLength(何か: 文字列 | 数値): 数値 {
    if ((<文字列>something).length) {
        (<文字列>something).length を返します。
    } それ以外 {
        something.toString().length を返します。
    }
}

関数gen_func1<T>(引数: T): T {
    引数を返します。
}
// または let gen_func2: <T>(arg: T) => T = function (arg) {
    引数を返します。
}

gen_func1<文字列>('Hello world');
gen_func2('こんにちは世界'); 
// 2 番目の呼び出しメソッドでは、渡されたパラメータに基づいてコンパイラが対応する型を自動的に識別するため、型パラメータを省略できます。

インターフェース Generics_interface<T> {
    (引数: T): T;
}
 
関数 func_demo<T>(引数: T): T {
    引数を返します。
}
 
func1: Generics_interface<number> = func_demo とします。
func1(123); // 正しい型の実際のパラメータ func1('123'); // 間違った型の実際のパラメータ

インターフェース ユーザー {
  名前: 文字列
  年齢: 番号
}
 
タイプ ユーザー = {
  名前: 文字列
  年齢: 番号
};
 
インターフェースSetUser{
  (名前: 文字列、年齢: 数値): void;
}
タイプ SetUser = (名前: 文字列、年齢: 数値): void;

インターフェース名 { 
  名前: 文字列; 
}
インターフェース User は Name を拡張します { 
  年齢: 番号; 
}

タイプ名 = { 
  名前: 文字列; 
}
User = Name & { age: number } と入力します。

タイプ名 = { 
  名前: 文字列; 
}
インターフェース User は Name を拡張します { 
  年齢: 番号; 
}

インターフェース名 { 
  名前: 文字列; 
}
タイプ ユーザー = 名前 & { 
  年齢: 番号; 
}

// 基本型エイリアス 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 {
  名前: 文字列;
  年齢?: 番号;
  性別?: 番号;
}

インターフェース ユーザー {
    読み取り専用ログイン名: 文字列;
    パスワード: 文字列;
}

インターフェースIDeveloper {
   名前: 文字列;
   年齢?: 番号;
}
// わかりました
クラス dev は IDeveloper を実装します {
    名前 = 'アレックス';
    年齢 = 20;
}
// わかりました
クラスdev2はIDeveloperを実装します{
    名前 = 'アレックス';
}
// エラー
クラスdev3はIDeveloperを実装します{
    名前 = 'アレックス';
    年齢 = '9';
}

// シムス-tsx.d.ts
Vue をインポートします。{ VNode } から 'vue';
 
グローバル宣言 {
  名前空間 JSX {
    // tslint: 空のインターフェースを無効にする
    インターフェース Element は VNode を拡張します {}
    // tslint: 空のインターフェースを無効にする
    インターフェース ElementClass は Vue {} を拡張します。
    インターフェースIntrinsicElements {
      [要素: 文字列]: 任意;
    }
  }
}
 
// shims-vue.d.ts
モジュール '*.vue' を宣言します。
  'vue' から Vue をインポートします。
  デフォルトの Vue をエクスポートします。
}

名前空間D3を宣言する{
    エクスポートインターフェースセレクター{...}
}
var d3: D3.Base を宣言します。

クラス動物{
    プライベート名: 文字列;
    コンストラクター(theName: 文字列) {
        this.name = 名前;
    }
}
 
let a = new Animal('Cat').name; // エラー、'name' はプライベートです

クラス動物{
    保護された名前: 文字列;
    コンストラクター(theName: 文字列) {
        this.name = 名前;
    }
}
 
クラスRhinoはAnimalを拡張します{
    コンストラクタ() {
        スーパー('Rhino');
   }         
   取得名() {
       console.log(this.name) //ここでの名前はAnimalクラスの名前です
   }
}

関数buildName(firstName: 文字列、lastName?: 文字列) {
    firstName + ' ' + lastName を返す
}
 
// エラーのデモンストレーション buildName("firstName", "lastName", "lastName")
// buildName("firstName") の正しいデモンストレーション
// buildName("firstName", "lastName") の正しいデモンストレーション

let s = e!.name; // e が null でないことをアサートし、name プロパティにアクセスします

 'vue' から Vue をインポートします
 
  const コンポーネント = Vue.extend({
  	// 型推論が有効
  })

'vue-property-decorator' から { Component, Vue, Prop } をインポートします。
 
@成分
デフォルトのクラスTestをエクスポートし、Vueを拡張します。
  @Prop({ 型: オブジェクト })
  プライベートテスト: { 値: 文字列 }

<テンプレート>
  <div class="hello">
    <h1>{{ メッセージ }}</h1>
    <!-- 省略 -->
  </div>
</テンプレート>
 
<script lang="ts">
'vue-property-decorator' から { Component, Prop, Vue } をインポートします。
 
@成分
デフォルトのクラスHelloWorldをエクスポートし、Vueを拡張します。
  @Prop() プライベートメッセージ!: 文字列;
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル スコープ></style>

テスト(f){
    console.log("前...");
    f()
		console.log("後...");
 }
 
@テスト
関数(){
	console.log("func が呼び出されました");
}

'@/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( '人/名前') 名前!: 名前
  
  // 方法
  パブリックchangeMes​​sage(): void {
    this.message = 'さようなら'
  },
  パブリックgetName(): 文字列{
    storeName = 名前とします
    ストア名を返す
  }
	// ライフサイクル private created (): void { },
  プライベートマウント()：void { },
  プライベート更新()：void { },
  プライベート破棄(): void { }
}

'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: 翻訳関数;
    }
}

$ 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((レスポンス) => {
  コンソールログ(応答データ)
})

-api
    - main.ts // 実際に -utils を呼び出す
    - request.ts // インターフェースのカプセル化

'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) を返します。
    });
    
デフォルト サービスをエクスポートします。

エクスポートインターフェースAjaxResponse {
    コード: 番号;
    データ: 任意;
    メッセージ: 文字列;
}

// api/main.ts
'../utils/request' からリクエストをインポートします。
 
// 得る
エクスポート関数 getSomeThings(params:any) {
    リクエストを返す({
        URL: '/api/getSomethings',
    });
}
 
// 役職
エクスポート関数 postSomeThings(params:any) {
    リクエストを返す({
        url: '/api/postSomethings',
        メソッド: 'post'、
        データ:パラメータ
    });
}

<テンプレート>
	<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)
        },
      ];
}
</スクリプト>