参考文献
コードアドレス
新しいプロジェクト
vue create vue-ts
cd vue-ts
vue add @vue/typescript
プロジェクトの構成は、この記事を参照することができヴュー+活字体プロジェクトに、そしてESLintきれいを設定する方法
型注釈とコンパイル時の型チェック
型注釈：変数の後にコロン+型を使用して型注釈を行う
// test.ts
let title1: string; // 类型注解
title1 = "xbl"; // 正确
title1 = 4; // 错误
let title2 = "xx"; // 类型推论
title2 = 2;// 错误
//数组类型
let names: string[];
names = ['Tom'];//或Array<string>
//任意类型
let foo:any;
foo = 'xx'
foo = 3
//any类型也可用于数组
let list: any[];
list = [1, true, "free"];
list[1] = 100;
//函数中使用类型
function greeting(person: string): string {
return 'Hello, ' + person;
}
//void类型，常用于没有返回值的函数
function warnUser(): void { alert("This is my warning message"); }
機能
必須パラメーター：パラメーターが宣言されたら、それを渡す必要があり、型は以下に準拠する必要があります
function greeting(person: string): string {
return "Hello, " + person;
}
greeting('tom')
オプションパラメータ：パラメータ名の後に疑問符が続き、オプションパラメータになります
function greeting(person: string, msg?: string): string {
return "Hello, " + person;
}
パラメータのデフォルト
function greeting(person: string, msg = ''): string {
return "Hello, " + person;
}
関数のオーバーロード
// 声明1
function info(a: {name: string}): string;
// 声明2
function info(a: string): {name: string};
// 实现
function info(a: {name: string} | string): {name: string} | string {
if (typeof a === "object") {
return a.name;
} else {
return { name: a };
}
}
console.log(info({ name: "tom" }));
console.log(info("tom"));
クラス
クラスの特徴
tsのクラスはes6のクラスとほぼ同じです。ここでは、tsがもたらす機能に焦点を当てます
class MyComp {
private _foo: string; // 私有属性，不能在类的外部访问
protected bar: string;// 保护属性，可以在子类中访问
// 构造函数参数加修饰符，能够定义为成员属性
constructor(public tua = "tua") {}
// 方法也有修饰符
private someMethod() {}
// 存取器：属性方式访问，可添加额外逻辑，控制读写性
get foo() { return this._foo }
set foo(val) { this._foo = val }
}
インターフェース
インターフェースは構造を制約するだけで、実装は必要なく、使いやすい
interface Person {
firstName: string;
lastName: string;
}
function greeting(person: Person) {
return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
const user = {firstName: 'Jane', lastName: 'User'};
console.log(user);
console.log(greeting(user));
ジェネリック
ジェネリック（Generics）とは、関数、インターフェース、またはクラスが定義されるときに、特定のタイプが事前に指定されるのではなく
、タイプの特性が使用されるときに指定されることを意味します。これにより、コードの汎用性が向上します。
// 不用泛型
// interface Result {
// ok: 0 | 1;
// data: Feature[];
// }
// 使用泛型
interface Result<T> {
ok: 0 | 1;
data: T;
}
// 泛型方法
function getData<T>(): Result<T> {
const data: any = [
{ id: 1, name: "类型注解", version: "2.0" },
{ id: 2, name: "编译型语言", version: "1.0" }
];
return { ok: 1, data }
}
デコレータ
デコレータは、クラスまたはそのプロパティとメソッドを拡張するために使用されます。@xxxはデコレータの書き方です
コンポーネント宣言：@Component
典型的なアプリケーションは、コンポーネントデコレータ@Componentです。
@Component
export default class Hello extends Vue {}
プロパティ宣言：@Prop
@Componentで宣言することに加えて、@ Propでコンポーネントプロパティを宣言することもできます。
export default class HelloWorld extends Vue {
// Props()参数是为vue提供属性选项
// !称为明确赋值断言，它是提供给ts的
@Prop({type: String, required: true})
private msg!: string;
}
イベント処理：@Emit
新機能が追加されたときにイベント通知をディスパッチする、Hello.vue
@Emit()
private addFeature(event: any) {// 若没有返回值形参将作为事件参数
const feature = { name: event.target.value, id: this.features.length + 1 };
this.features.push(feature);
event.target.value = "";
return feature;// 若有返回值则返回值作为事件参数
}
変更監視：@Watch
@Watch('msg')
onRouteChange(val:string, oldVal:any){
console.log(val, oldVal);
}
vuexの使用：vuex-class
vuex-classは、vue-class-componentのVuex状態バインディングヘルプメソッドを提供します。
依存関係をインストールする
npm i vuex-class -S
状態を定義します。store.ts
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
features: [
{ id: 1, name: "类型", version: "1.0" },
{ id: 2, name: "编译型语言", version: "1.0" },
],
},
mutations: {
addFeatureMutation(state: any, featureName) {
state.features.push({ id: state.features.length + 1, name: featureName });
},
},
actions: {
addFeatureAction({ commit }, featureName) {
commit("addFeatureMutation", featureName);
},
},
});
Hello.vueを使用してください
import { State, Action, Mutation } from "vuex-class";
@Component
export default class Feature extends Vue {
// 状态、动作、变更映射
@State features!: string[];
@Action addFeatureAction: any;
@Mutation addFeatureMutation: any;
private addFeature(event) {
console.log(event);
// this.features.push(event.target.value);
this.addFeatureAction(event.target.value);
// this.addFeaturMutation(event.target.value);
event.target.value = "";
}
}
デコレーターの原則
クラスデコレータ
//类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
function log(target: Function) {
// target是构造函数
console.log(target === Foo); // true
target.prototype.log = function() {
console.log(this.bar);
}
// 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
}
@log
class Foo {
bar = 'bar'
}
const foo = new Foo();
// @ts-ignore
foo.log();
メソッドデコレータ
function dong(target: any, name: string, descriptor: any) {
// 这里通过修改descriptor.value扩展了bar方法
const baz = descriptor.value;
descriptor.value = function(val: string) {
console.log('dong~~');
baz.call(this, val);
}
return descriptor
}
class Foo {
@dong
setBar(val: string) {
this.bar = val
}
}
foo.setBar('lalala')
属性デコレーター
// 属性装饰器
function mua(target, name) {
target[name] = 'mua~~~'
}
class Foo {
@mua ns!:string;
}
console.log(foo.ns);
パラメータを受け入れるように少し変更
function mua(param:string) {
return function (target, name) {
target[name] = param
}
}
Componentを見て、新しいDecor.vueを作成します。
<template>
<div>{{msg}}</div>
</template>
<script lang='ts'>
import { Vue } from "vue-property-decorator";
function Component(options: any) {
return function(target: any) {
return Vue.extend(options);
};
}
@Component({
props: {
msg: {
type: String,
default: ""
}
}
})
export default class Decor extends Vue {}
</script>