vueでtypescriptを使う際の落とし穴の記録

タイプスクリプトとは

TypeScriptはJavaScriptの型のスーパーセットであり、純粋なJavaScriptにコンパイルすることができます。コンパイルされたJavaScriptはどのようなブラウザでも動作します。

何ができるのですか？

型が含まれることによって、通常の開発にどのような利点があるのかと疑問に思うかもしれません。結局のところ、コード仕様の観点からは、eslintはすでにほとんどのことができます。いくつかの仕様から、eslintは確かに多くの仕様、宣言、インデント、コードの書き方などを統一することができます。しかし、これらは比較的静的なコード検査であり、もし関数

function myPush(arr, val) {
	arr.push(val)
 return arr
}
myPush([], 1) // [1]
myPush(1, 1) // error, arr.push is not a function
myPush('', 1) // error, arr.push is not a function

一部の例外処理がないため、筆者はこの関数を使用しても問題はありませんが、パブリックメソッドの場合、パラメータが正しく渡されず、jsが何も認識せずにエラーを報告する可能性があります。ts開発を使用する場合、これは避けることができます。

function myPush(arr: any[], val: any): any[] {
	arr.push(val)
 return arr
}
myPush([], 1) // [1]
myPush(1, 1) // 数字の型1には任意の型を代入できない[]  
muPush('', 1) // string型は任意の型に代入できない[]  

ここで注目すべきは、上記のコードで示されたエラーは、コードが書かれたときにリアルタイムでプロンプトが表示されたものであり、つまり実行時に報告されたエラーではないということです。

vue2.xの組み合わせの実際

まず第一に、あなたは津についてのいくつかの基本的な概念を理解する必要があり、インターネット上の情報がまだたくさんありますが、導入の公式ウェブサイトは、比較的完全である、参照してください。

プロジェクトには通常、.vueと.jsの両方のサフィックスファイルが含まれます。そのため、変換は大まかに2つのステップに分けることができます：

jsファイルの修正

tsはjsのスーパーセットなので、jsのサフィックスを直接tsのサフィックスに変更しても、ts関連の知識が適用されないことを除けば、何の影響もありません。

//  
function getUrlParams(href = window.location.href) {
 const [hashFront, hashBack] = href.split('#')
 let params = {
 front: {},
 back: {},
 }
 if (hashFront && hashFront.indexOf('?') > -1) {
 params.front = qs.parse(hashFront.split('?')[1])
 }
 if (hashBack && hashBack.indexOf('?' > -1)) {
 params.back = qs.parse(hashBack.split('?')[1])
 }
 return params
}
//  
interface IParamsItem {
 token?: string;
 [propName: string]: any;
}
/**
 * urlパラメータ・アンサンブル
 */
interface IParams {
 front: IParamsItem
 back: IParamsItem
}
/**
 * ハッシュ前後のurlハッシュのパラメータを全て取得する
 * @param(string) href urlリンク デフォルトは現在のURL
 */
function getUrlParams(href: string = window.location.href) {
 const [hashFront, hashBack] = href.split('#')
 let params: IParams = {
 front: {},
 back: {}
 }
 if (hashFront && hashFront.indexOf('?') > -1) {
 params.front = qs.parse(hashFront.split('?')[1])
 }
 if (hashBack && hashBack.indexOf('?') > -1) {
 params.back = qs.parse(hashBack.split('?')[1])
 }
 return params
}

見ての通り、コードが減らないだけでなく、増えています。しかし、強い型付けの良い点は、私のメソッドにパラメータを渡す人の心配をする必要がなくなったことです。

jsファイルの変換は、比較的簡単ですが、結局のところ、他のフレームワークに設計されていない、唯一のドキュメントプロンプトの公式サイトに従ってプロセスを記述する必要がある、繰り返すことはできません。

jsファイルの修正

vue-cliのプロンプトオプションでtsを選択すると、依存パッケージの導入、tsconfig.jsonファイル、*.d.ts宣言ファイルなど、多くのことをcliが行ってくれます。

tsconfig.jsonファイルは、tsの設定情報の一部を設定するために使用され、特定のフィールドに対応する情報の公式サイトでも詳細な紹介があります。

よくあるエラーは、webpackのエイリアス依存パスの場合、webpackの設定だけでなくtsconfigでも宣言する必要があり、カスタムエイリアスは@で始めることができないことです！

*.d.ts宣言ファイル、公式サイトにも記載されています。

とはいえ、公式サイトの紹介を読んでもよくわからなかったので、vueの他の情報を調べてみたところ、宣言ファイルは主に変換処理でよく発生する問題を解決するものでした。

1. this "のようなグローバル・オブジェクトの使用axiosのグローバル・オブジェクトを使用した場合のエラー。
2. .vueタイプのファイル解析エラーの紹介。

上記に関するいくつかの問題は、宣言ファイルで解決できます。

以上のことが終わったら、大きなコード変更の準備を始めましょう！

vueファイルのscriptタグにlang="ts "を追加することで、タグの中がts構文が使えるモジュールになります。vueでは通常、いくつかの属性や宣言サイクルが適用されますが、通常の書き方は以下のようになります。

//  
<script>
import comp from '@/components/comp.vue' // vueファイルの導入は、接尾辞を書かないと認識できない
import checkPhone from '@/util/check-phone' // tsファイルの導入では、接尾辞をつける必要がない
export default {
	components: {
 	comp,
 },
 props: {
 	age: {
 	type: String,
 default: '',
 }
 },
	data() {
 	return {
 	name: '',
 	}
	},
 created() {
 	console.log(this.name)
 },
 watch: {
 	name: function (n) {
 	console.log(` ${n}`)
 }
 }
 computed: {
 	fullName() {
 	return `${this.name}- `
 }
 },
 methods: {
 	getName() {
 	console.log(this.name)
 }
 }
}
</script>

の代表的な使用例を挙げたに過ぎません。

//  
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import comp from '@/components/comp.vue' // vueファイルの導入は、接尾辞を書かないと認識できない
import checkPhone from '@/util/check-phone' // tsファイルの導入では、接尾辞をつける必要がない
@Component({
	components: {
 	comp,
 },
 created() {
 	console.log(this.name)
 },
})
export default class extends Vue {
	@Prop({
 	type: String,
 default: '',
 })
 private age: string
 
 private name: string = ''
 
 @Watch('name')
 private onNameChange(n) {
 	console.log(` ${n}`)
 }
 
 private get fullName() {
 	return `${this.name}- `
 }
 
 private getName() {
 console.log(this.name)
 }
}

上記の書き方にはいくつかの変更がありますが、より重要なのは、 vue-property-decorator 依存パッケージを使用することで、ページの変換をより簡単かつ迅速に完了するためのデコレータの書き方をいくつか提供していることです。

vuexの使い方

このプロジェクトではvuexを使用しますが、vuexの修正にも同じソリューションが利用できます。 のドキュメントを参照してください 。

ネット上にはもっと多くの記事があるので割愛します。

コード仕様

以前はtslintの存在を主張する議論もありましたが、公式チームはtslintのメンテナンスを終了し、仕様を標準化する方法としてeslintを推奨すると表明しています。公式チームはtypescript-eslint/parserのメンテナンスを終了し、インタプリタを@typescript-eslint/parserに移動しました。

最後に

変換処理はまだ比較的難しく、以前のロジックを考慮する必要があり、tsに触れたばかりで、あまり馴染みのない構文が多く、同時に初めて使うため、実はtsの書き方があやふやな状態です。今後vue3.0が登場すると、tsの熱量がまた一段と上がるかもしれませんので、早めの準備ができるといいですね〜！