Vueの活字体を使用した最初のプロジェクトでは、何をすべきか

序文

私たちが知っているように、Vueの新バージョン3.0の使用活字体の開発なので、本質的に火はより多くの人々の関心も活字体。活字だけ近年の火災が、実際にそれが2012年10月に誕生したが、正式版は2013年6月にリリースされたが、それはMicrosoftのフリーでオープンソースのプログラミング言語で書かれました。活字体では、JavaScript、JavaScriptシンタックス拡張のスーパーセットで、オプションの静的型付けオブジェクト指向プログラミングとクラスベースを追加します。

JavaScriptのエラーは、多くの場合、変数または存在しない属性の開発で遭遇するが、これらは、低レベルのエラーであり、静的型チェックはちょうどそれを作ることができます。静的に何を入力されますか？栗の場合：

//javascript 
let str = 'hello'
str = 100 //ok

//typescript
let str:string = 'hello'
str = 100 //error: Type '100' is not assignable to type 'string'.

私たちは、あなたが変数を宣言するときに矛盾の変数の値と型が警告をスローする場合は、型の変数を追加するための活字体の必要性を見ることができます。コンパイル時にのみチェック静的な型、そして最終的にコンパイルされたコードはまだJavaScriptのです。私たちは、文字列型の変数の他のタイプに割り当てられている場合でも、コードが正常動作することもできます。

第二に、活字体は、このような機能を使用するときのように、型定義は実際には非常に良い文書で、コードの可読性と保守性を向上させる、唯一のタイプ定義されたパラメータと戻り値を調べる必要があり、あなたはおそらくどのようにこの機能を知っています作品。

ディレクトリ

• 準備

• ESLint設定

• ファイルの変換

• グローバル宣言

• 構文変換ツール

• 三者ライブラリー

• 推奨事項と注意事項

• 最後に書かれました

• 参考資料

準備

海抜

インストールの写し（typescript）

npm install typescript @vue/cli-plugin-typescript -D

新しいファイル

プロジェクトのルートディレクトリに作成されたシム・vue.d.ts、シム・tsx.d.ts、tsconfig.json

• シム-vue.d.ts

import Vue from 'vue';

declare module '*.vue' {
  export default Vue;
}

• シム-tsx.d.ts

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    type Element = VNode
    type ElementClass = Vue
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

• tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators":true,
    "sourceMap": true,
    "noImplicitThis": false,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

ESLint設定

なぜESLint代わりTSLint？

本年1月、活字体は、公式リリースブログはTSLint代わりにESLintをお勧めします。ESLintチームはもはや維持されるtypescript-eslint-parserのいずれかの使用、それはNPMに公開されることはありません、tyescript-eslint-parserユーザーが切り替える必要があります@tyescript-eslint/parser。

公式の説明：

いくつかの構造的な問題は、我々はESLintはすでに我々はより高性能アーキテクチャから得ることを期待リンター必要があり、操作のTSLint規則に気づいたシステムのパフォーマンスに影響を与えるがあります。加えて、異なるユーザコミュニティは、通常代わりTSLint（たとえば、ルールはフック又はヴューを反応させる）を構築ESLintためリントルールを有します。そこで、私たちの編集チームは、代わりに仕事をコピーするので、ESLintの使用に焦点を当てます。（例えばセマンティックリンティングやプログラム全体を糸くずなど）シーンでESLintが現在カバーされていない、我々はサポートしていきますと活字体のTSLint ESLintを同一視。

オリジナル

使い方

AlloyTeamが反応/ヴュー/活字体プロジェクトのEsLint構成仕様の包括的なセットを提供し、これに基づいてルールをカスタマイズすることができます。
GitHubの

インストール

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

詳細商品ビューAlloyTeam ESLintルール

コンフィギュレーション

プロジェクトのルートディレクトリに作成.Eslintrc.js、そしてそれに次のようにコピーします。

module.exports = {
  extends: [
    'alloy',
    'alloy/typescript',
  ],
  env: {
    browser: true,
    node: true,
  },
  rules: {
    // 自定义规则
    'spaced-comment': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    'grouped-accessor-pairs': 'off',
    'no-constructor-return': 'off',
    'no-dupe-else-if': 'off',
    'no-import-assign': 'off',
    'no-setter-return': 'off',
    'prefer-regex-literals': 'off'
  }
};

サプリメント

あなたは可能に使用される複数の設定項目を知りたい場合はESLint公式サイト検索の設定項目を。

あなたがVScodeを使用している場合、我々は開発を支援するプラグインESLintをお勧めします。

ファイルの変換

エントリ・ファイル

1. main.js変更main.ts
2. vue.config.jsエントリファイルを変更

const path = require('path')
module.exports = {
  ...
  pages: {
    index: {
      entry: path.resolve(__dirname+'/src/main.ts')
    },
  },
  ...
}

VUEコンポーネントファイル

活字体とES6で、我々はラベル付けをサポートしたり、クラスとそのメンバを変更するために追加の機能を必要とするいくつかのシナリオでは、クラスで導入されました。デコレータ（デコレータは）私たちは、クラスのメンバーとメタプログラミング構文によって声明に注釈を追加するための方法を提供します。

Vueがまたそれがデコレータを使用する前に、trueに設定tsconfig.json experimentalDecoratorsする必要があり、組立typescriptですデコレータのクラススタイルを提供してくれます。

インストールVUEデコレータ

vue-property-decorator図書館は完全に依存してvue-class-component、インストール時に一緒に装着されています

npm install vue-class-component vue-property-decorator -D

変換.vue

のみ、srciptに他の不要な変更を何かを変更する必要があります

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import draggable from 'vuedraggable'

@Component({
  created(){
    
  },
  components:{
    draggable
  }
})
export default class MyComponent extends Vue {
  /* data */
  private ButtonGrounp:Array<any> = ['edit', 'del']
  public dialogFormVisible:boolean = false
  
  /*method*/
  setDialogFormVisible(){
    this.dialogFormVisible = false
  }
  addButton(btn:string){
    this.ButtonGrounp.push(btn)
  }

  /*compute*/
  get routeType(){
    return this.$route.params.type
  }
}
</script>

公共の修飾子がデフォルトを添加しないクラスメンバ修飾子、

• 公共のメンバーは自由にクラスにアクセスすることができます。publicを
• 保護：保護、クラスとサブクラス継承アクセス可能
• プライベート：プライベート、唯一のクラスの缶アクセス

プロップ

！：使用プロパティのための明確な割り当てアサーション修飾子、より多くのための外観のドキュメント

import { Component, Vue, Prop } from "vue-property-decorator";
export default class MyComponent extends Vue {
  ...
  @Prop({type: Number,default: 0}) readonly id!: number
  ...
}

等価に

export default {
  ...
  props:{
    id:{
      type: Number,
      default: 0
    }
  }
  ...
}

時計

import { Component, Vue, Watch } from "vue-property-decorator";
export default class MyComponent extends Vue {
  ...
  @Watch('dialogFormVisible')
  dialogFormVisibleChange(newVal:boolean){
    // 一些操作
  }
  ...
}

等価に

export default {
  ...
  watch:{
    dialogFormVisible(){
      // 一些操作
    }
  }
  ...
}

提供/注入します

// App.vue
import {Component, Vue, Provide} from 'vue-property-decorator'
@Component
export default class App extends Vue {
  @Provide() app = this
}

// MyComponent.vue
import {Component, Vue, Inject} from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  @Inject() readonly app!: Vue
}

等価に

// App.vue
export default {
  provide() {
    return {
      'app': this
    }
  }
}

// MyComponent.vue
export default {
  inject: ['app']
}

より装飾的な使用、参照VUE-プロパティデコレータドキュメント

グローバル宣言

* .D.tsファイル

現在主流のライブラリは型定義は、これらのライブラリをサポートするためには、JavaScriptのスーパーセットとしてのJavaScript、活字体で書かれたタイプ定義ファイル（* .d.ts）を提供している、開発者は、NPMをリリースタイプ定義ファイルへの書き込みユーザーがライブラリ活字体のプロジェクトを使用する必要がある場合、あなたはさらに、このパッケージをダウンロードするJSライブラリは、活字体のプロジェクトで実行するようにさせることができます。

例えば：md5私は、この変換は、一般的ではない可逆ハッシュ化された機密情報に使用して、データのセキュリティを確保するために、バックエンドの検証に送られ、このライブラリを使用している多くの人々は、文字列にハッシュ値の束を変換することができると信じています。私たちは、活字体のプロジェクトで使用したい場合は、我々はまた別のものをダウンロードする必要があり@tyeps/md5index.d.tsフォルダに見られるように、md5定義された型。

/// <reference types="node" />

declare function md5(message: string | Buffer | Array<number>): string;

declare namespace md5 {}

export = md5;

活字体は、* .d.tsを識別するためにどのように

活字体は自動的にグローバルプロジェクトコンパイル時に認識されます、私たちがしなければならない、.d.tsファイルを書き込みであるその後、活字体は、これらのタイプの定義はグローバル使用に注入書かれて提供されます、.d.ts。

VUE追加プロパティ/メソッドの例

私たちが使用した場合this.$routeの時間や方法のいくつかのプロトタイプ、typescriptです推測されていないが、コンパイル時のプロパティで報告される$routeエラーが存在しない場合、我々は、これらのグローバルプロパティやメソッドのためのグローバル宣言を追加する必要があります

シム・vue.d.tsへの変更を行い、もちろん、あなたも* .d.ts文のカスタムを追加することを選択できます

import Vue from 'vue';
import VueRouter, { Route } from 'vue-router'

declare module '*.vue' {
  export default Vue;
}

declare module 'vue/types/vue' {
  interface Vue {
    $api: any;
    $bus: any;
    $router: VueRouter;
    $route: Route;
  }
}

カスタムタイプ定義ファイル

インタフェースおよび他のいくつかの種類が頻繁に必要としながら、私たちは、プロジェクトグローバル型定義のために書くことができ
、具体的タイプ定義ファイルの管理プロジェクトのために、* .d.tsファイルを保管ルートパスフォルダ@typesを、作成します。

ここで私はglobal.d.tsファイルを定義します。

//declare 可以创建 *.d.ts 文件中的变量，declare 只能作用域最外层
//变量
declare var num: number;

//类型
type StrOrNum = string | number

//函数
declare function handler(str: string): void;

// 类
declare class User { 
  
}

//接口
interface OBJ {
  [propName: string]: any;
  [propName: number]: any;
}

interface RES extends OBJ {
  resultCode: number;
  data: any;
  msg?: string;
}

ハンズフリー、transvue2ts変換ツール

変換プロセスは、面倒な構文変換、固定コンテンツは、文言の一部です、仕事はそれを行うには反復的で退屈なマシンでも可能である最もです。ここでは、効率を向上させるためにtransvue2tsツールを利用することができ、transvue2tsは、私たちは、データ、小道具、時計や他の文法変換デコレータ構文を置くのに役立ちます。

インストール

npm i transvue2ts -g

使用

インストール後、パスはパスtransvue2ts図書館システムに書き込まれます、直接コマンドラインツールは、二番目のパラメータを開くために使用することができ、コマンド・ファイルのフルパスです。
コマンドを実行した後、このようなindexTS.vueを生成する変換後index.vueビューフォルダを処理するように、同じディレクトリに変換され、新しいファイルが生成されます。

単一ファイルの組立工程

transvue2ts D:\typescript-vue-admin-demo\src\pages\index.vue
=>
输出路径：D:\typescript-vue-admin-demo\src\pages\indexTS.vue

フォルダの下のすべてのコンポーネントファイルを扱うVUE

transvue2ts D:\typescript-vue-admin-demo\src\pages
=>
输出路径：D:\typescript-vue-admin-demo\src\pagesTS

サプリメント

本当に完全無料のツールを渡しますが、私たちを助けるためのツールは、構文の一部を変換があるそこに考えてはいけません。ツールは、型定義の構文とパラメータを扱うことができませんでした、または我々は変更する必要があります。変換された注釈が除外されることに注意してください。

ツールナゲッツ紹介やツールのためのアイデアを実装

サードパーティのライブラリの使用について

インストール中にいくつかの三者ライブラリは、自分自身の使用を定義することなく、タイプ定義ファイルが含まれている、それが公式によって提供された定義を入力し、直接使用することができます。

node_modulesは、対応するパッケージフォルダ、通常のフォルダの種類に格納されたファイルの種類を見つけ、実際には、文書型定義ファイルとして、これらの内容は明らかに必要なパラメータとパラメータの種類を見ることができます。

ここでの三者のVueでのライブラリの使用例をいくつか示します。

要素-UIコンポーネントのパラメータ

型定義を使用します

import { Component, Vue } from "vue-property-decorator";
import { ElLoadingComponent, LoadingServiceOptions } from 'element-ui/types/loading'

let loadingMark:ElLoadingComponent; 
let loadingConfig:LoadingServiceOptions = {
  lock: true,
  text: "加载中",
  spinner: "el-icon-loading",
  background: "rgba(255, 255, 255, 0.7)"
};

@Component
export default class MyComponent extends Vue {
  ...
  getList() {
    loadingMark = this.$loading(loadingConfig);
    this.$api.getList()
      .then((res:RES) => {
        loadingMark.close();
      });
  }
  ...
}

要素-UI /種類/ロード、多くの原稿の注釈がまだあるため、説明を属性ごとに行われます

export interface LoadingServiceOptions {
  target?: HTMLElement | string
  body?: boolean
  fullscreen?: boolean
  lock?: boolean
  text?: string
  spinner?: string
  background?: string
  customClass?: string
}
export declare class ElLoadingComponent extends Vue {
  close (): void
}
declare module 'vue/types/vue' {
  interface Vue {
    $loading (options: LoadingServiceOptions): ElLoadingComponent
  }
}

VUE-ルータフック関数

型定義を使用します

import { Component, Vue } from "vue-property-decorator";
import { NavigationGuard } from "vue-router";

@Component
export default class MyComponent extends Vue {
  beforeRouteUpdate:NavigationGuard = function(to, from, next) {
    next();
  }
}

VUE-ルータ/種類/ router.d.tsでは、型定義は、フック関数の先頭で見ることができます。

export type NavigationGuard<V extends Vue = Vue> = (
  to: Route,
  from: Route,
  next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
) => any

また、以前に使用されRouter、 Routeすべてのパラメータは、本明細書に記載のようにメソッド、プロパティ、および非常に明確です

export declare class VueRouter {
  constructor (options?: RouterOptions);

  app: Vue;
  mode: RouterMode;
  currentRoute: Route;

  beforeEach (guard: NavigationGuard): Function;
  beforeResolve (guard: NavigationGuard): Function;
  afterEach (hook: (to: Route, from: Route) => any): Function;
  push (location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void;
  replace (location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void;
  go (n: number): void;
  back (): void;
  forward (): void;
  getMatchedComponents (to?: RawLocation | Route): Component[];
  onReady (cb: Function, errorCb?: ErrorHandler): void;
  onError (cb: ErrorHandler): void;
  addRoutes (routes: RouteConfig[]): void;
  resolve (to: RawLocation, current?: Route, append?: boolean): {
    location: Location;
    route: Route;
    href: string;
    normalizedTo: Location;
    resolved: Route;
  };

  static install: PluginFunction<never>;
}
export interface Route {
  path: string;
  name?: string;
  hash: string;
  query: Dictionary<string | (string | null)[]>;
  params: Dictionary<string>;
  fullPath: string;
  matched: RouteRecord[];
  redirectedFrom?: string;
  meta?: any;
}

カスタムパーティのライブラリの宣言

* .d.tsのライブラリ三者宣言ファイルを使用しない場合、プロジェクトがコンパイルされるときに、このようなエラーが報告されます。

 Could not find a declaration file for module 'vuedraggable'. 'D:/typescript-vue-admin-demo/node_modules/vuedraggable/dist/vuedraggable.umd.min.js' implicitly has an 'any' type.
  Try `npm install @types/vuedraggable` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuedraggable';`

大雑把に宣言ファイルを見つけることができませんvuedraggable意味、あなたは（もしあれば）vuedraggableタイプ/ @インストールしようとする、または新規の宣言ファイルをカスタマイズすることができます。

種類/ vuedraggable @インストール

第1の実施形態では、インストールを選択するように求め@types/vuedraggable、次いで404が見つからないエラーを発見し、パケットがこの説明には存在しません。このコンポーネントは、ちょっと、（週間ダウンロードは18W）人の利用を感じるコミュニティが実際に声明を提出していないとは思いませんでした。

カスタム宣言ファイル

しかし、あなたは唯一、第二の方法を選択することができます真実を伝えるために、彼は少し時間を模索している（主にこの地域に理解するために複数の操作を行いませんでした、精通していません）

@typesないフォルダは自分で作成することができるならばまず、タイプ@ / node_modules下vuedraggableフォルダを作成します。vuedraggableフォルダがindex.d.tsを作成しました。次のことを書きます：

import Vue from 'vue'
declare class Vuedraggable extends Vue{}
export = Vuedraggable

エラーなしの再コンパイルは、問題を解決していません。

推奨事項と注意事項

変換プロセス

• アクセス活字体は、1時間ts文法ですべてのファイルを読み込む必要がない場合は、元の構文は、最高のは、単一の変更通常の操作でも可能
• ミスの長いリストは、エラーに応じた初期変換は、対応する変換誤差を修正する場合、基本的に、エラーの種類が発生し、正常です
• TSファイル、追加する必要はありません導入する際に.tsサフィックスを
• あなたがプロジェクトのためのグローバル変数を定義した後いない作業、再実行して再びサーバー（私に起こりました...）

経験の問題

• あなたが知っていれば指向の検索エンジンは、どこに問題があります
• 慎重に文書を見て、ほとんどのミスは、より基本的なもの、文書は問題を解決することができます
• Githubのは、活字体関連のプロジェクトを見つけて、どのように他の人の書き込みを見ます

最後に書かれました

喫煙アイドル時間エントリー波のみの、より多くのレコードが活字体だけでなく、Vueの中で直面する問題を使用する方法が何であるか本当の不足を知るために、すべての後に、バックエンド管理システム活字体にアクセスしようと、活字体を。本研究は、まだ正式に活字体に使用していない、新しい技術を習得することは、コストと時間を必要とし、尊敬に最も中規模および大規模企業のいくつかです。すべてのすべてでは、複数のマルチパラダイムは、より多くの問題解決のためのアイデアをよりオープンになることを知って、より多くのトレーニングを見なければならない学習、より常に良い事を学びます。

参考資料

• チュートリアルをはじめ活字体
• 技術-TypeScript脂肪無料のビデオチュートリアル