详解Vue3.0 前的 TypeScript 最佳入门实践

interface Person {
 name: string;
 age"htmlcode">

interface User {
 readonly loginName: string;
 password: string;
}


上面的例子说明，当完成User对象的初始化后loginName就不可以修改了。
3.4 实现与继承： implements vs extends
extends 很明显就是ES6里面的类继承，那么 implement 又是做什么的呢？它和 extends 有什么不同？
implement ，实现。与C#或Java里接口的基本作用一样， TypeScript 也能够用它来明确的强制一个类去符合某种契约
implement基本用法：


interface IDeveloper {
 name: string;
 age"htmlcode">

 class A extends B implements C,D,E


搭配 interface 和 type 的用法有：

3.5 声明文件与命名空间： declare 和 namespace
前面我们讲到Vue项目中的 shims-tsx.d.ts 和 shims-vue.d.ts ，其初始内容是这样的：


// shims-tsx.d.ts
import Vue, { VNode } from 'vue';

declare global {
 namespace JSX {
 // tslint:disable no-empty-interface
 interface Element extends VNode {}
 // tslint:disable no-empty-interface
 interface ElementClass extends Vue {}
 interface IntrinsicElements {
 [elem: string]: any;
 }
 }
}

// shims-vue.d.ts
declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}


declare ：当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
这里列举出几个常用的：

  
declare var 声明全局变量
  
declare function 声明全局方法
  
declare class 声明全局类
  
declare enum 声明全局枚举类型
  
declare global 扩展全局变量
  
declare module 扩展模块

namespace ：“内部模块”现在称做“命名空间”
module X { 相当于现在推荐的写法 namespace X { )
跟其他 JS 库协同
类似模块，同样也可以通过为其他 JS 库使用了命名空间的库创建 .d.ts 文件的声明文件，如为 D3 JS 库，可以创建这样的声明文件：


declare namespace D3{
 export interface Selectors { ... }
}
declare var d3: D3.Base;


所以上述两个文件：

  
shims-tsx.d.ts ， 在全局变量 global 中批量命名了数个内部模块。 shims-vue.d.ts ，意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。

3.6 访问修饰符： private 、 public 、 protected
其实很好理解：

  
默认为 public
  
当成员被标记为 private 时，它就不能在声明它的类的外部访问，比如：



class Animal {
 private name: string;
 constructor(theName: string) {
 this.name = theName;
 }
}

let a = new Animal('Cat').name; //错误，‘name'是私有的


protected 和 private 类似，但是， protected 成员在派生类中可以访问


class Animal {
 protected name: string;
 constructor(theName: string) {
 this.name = theName;
 }
}

class Rhino extends Animal {
 constructor() {
 super('Rhino');
 }  
 getName() {
 console.log(this.name) //此处的name就是Animal类中的name
 }
} 


3.7 可选参数 ( "htmlcode">

function buildName(firstName: string, lastName"firstName", "lastName", "lastName")
// 正确演示
buildName("firstName")
// 正确演示
buildName("firstName", "lastName")




非空断言操作符：


能确定变量值一定不为空时使用。


与可选参数 不同的是，非空断言操作符不会防止出现 null 或 undefined。




let s = e!.name; // 断言e是非空并访问name属性


4. Vue 组件的 Ts 写法
从 vue2.5 之后，vue 对 ts 有更好的支持。根据官方文档，vue 结合 typescript ，有两种书写方式：
**Vue.extend **


 import Vue from 'vue'

 const Component = Vue.extend({
 	// type inference enabled
 })


vue-class-component


import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }
}


理想情况下， Vue.extend 的书写方式，是学习成本最低的。在现有写法的基础上，几乎 0 成本的迁移。
但是 Vue.extend 模式，需要与 mixins 结合使用。在 mixin 中定义的方法，不会被 typescript 识别到
，这就意味着会出现 丢失代码提示、类型检查、编译报错等问题。
菜鸟才做选择，大佬都挑最好的。直接讲第二种吧：
4.1 vue-class-component
我们回到 src/components/HelloWorld.vue


<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <!-- 省略 -->
 </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>


有写过 python 的同学应该会发现似曾相识：
vue-property-decorator 这个官方支持的库里，提供了函数 **装饰器（修饰符）**语法
1. 函数修饰符 @
“@”，与其说是修饰函数倒不如说是引用、调用它修饰的函数。
或者用句大白话描述： @ : "下面的被我包围了。"
举个栗子，下面的一段代码，里面两个函数，没有被调用，也会有输出结果：


test(f){
 console.log("before ...");
 f()
		console.log("after ...");
 }

@test
func(){
	console.log("func was called");
}




直接运行，输出结果：

before ...

func was called

after ...

上面代码可以看出来:

  
只定义了两个函数： test 和 func ，没有调用它们。
  
如果没有“@test”，运行应该是没有任何输出的。

但是，解释器读到函数修饰符“@”的时候，后面步骤会是这样：

  
去调用 test 函数， test 函数的入口参数就是那个叫“ func ”的函数；
  
test 函数被执行，入口参数的（也就是 func 函数）会被调用（执行）；

换言之，修饰符带的那个函数的入口参数，就是下面的那个整个的函数。有点儿类似 JavaScrip t里面的 function a (function () { ... });

2. vue-property-decorator 和 vuex-class 提供的装饰器
vue-property-decorator 的装饰器：

  
@Prop
  
@PropSync
  
@Provide
  
@Model
  
@Watch
  
@Inject
  
@Provide
  
@Emit
  
@Component (provided byvue-class-component)
  
Mixins (the helper function named mixins provided by vue-class-component)

vuex-class 的装饰器：

  
@State
  
@Getter
  
@Action
  
@Mutation

我们拿原始Vue组件模版来看：


import {componentA,componentB} from '@/components';

export default {
	components: { componentA, componentB},
	props: {
 propA: { type: Number },
 propB: { default: 'default value' },
 propC: { type: [String, Boolean] },
 }
 // 组件数据
 data () {
 return {
 message: 'Hello'
 }
 },
 // 计算属性
 computed: {
 reversedMessage () {
 return this.message.split('').reverse().join('')
 }
 // Vuex数据
 step() {
 	return this.$store.state.count
 }
 },
 methods: {
 changeMessage () {
 this.message = "Good bye"
 },
 getName() {
 	let name = this.$store.getters['person/name']
 	return name
 }
 },
 // 生命周期
 created () { },
 mounted () { },
 updated () { },
 destroyed () { }
}


以上模版替换成修饰符写法则是：


import { Component, Vue, Prop } from 'vue-property-decorator';
import { State, Getter } from 'vuex-class';
import { count, name } from '@/person'
import { componentA, componentB } from '@/components';

@Component({
 components:{ componentA, componentB},
})
export default class HelloWorld extends Vue{
	@Prop(Number) readonly propA!: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC!: string | boolean | undefined
 
 // 原data
 message = 'Hello'
 
 // 计算属性
	private get reversedMessage (): string[] {
 	return this.message.split('').reverse().join('')
 }
 // Vuex 数据
 @State((state: IRootState) => state . booking. currentStep) step!: number
	@Getter( 'person/name') name!: name
 
 // method
 public changeMessage (): void {
 this.message = 'Good bye'
 },
 public getName(): string {
 let storeName = name
 return storeName
 }
	// 生命周期
 private created ()：void { },
 private mounted ()：void { },
 private updated ()：void { },
 private destroyed ()：void { }
}


正如你所看到的，我们在生命周期 列表那都添加 private XXXX 方法，因为这不应该公开给其他组件。
而不对 method 做私有约束的原因是，可能会用到 @Emit 来向父组件传递信息。
4.2 添加全局工具
引入全局模块，需要改 main.ts :


import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
 router,
 store,
 render: (h) => h(App),
}).$mount('#app');


npm i VueI18n


import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// 新模块
import i18n from './i18n';

Vue.config.productionTip = false;

new Vue({
 router, 
 store, 
 i18n, // 新模块
 render: (h) => h(App),
}).$mount('#app');


但仅仅这样，还不够。你需要动 src/vue-shim.d.ts ：


// 声明全局方法
declare module 'vue/types/vue' {
 interface Vue {
 readonly $i18n: VueI18Next;
 $t: TranslationFunction;
 }
}


之后使用 this.$i18n() 的话就不会报错了。
4.3 Axios 使用与封装
Axios的封装千人千面


如果只是想简单在Ts里体验使用Axios，可以安装vue-axios


简单使用Axios




$ npm i axios vue-axios


main.ts添加：




import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)



然后在组件内使用：




Vue.axios.get(api).then((response) => {
 console.log(response.data)
})

this.axios.get(api).then((response) => {
 console.log(response.data)
})

this.$http.get(api).then((response) => {
 console.log(response.data)
})




1. 新建文件 request.ts
文件目录:


-api
 - main.ts // 实际调用
-utils
 - request.ts // 接口封装


2. request.ts 文件解析


import * as axios from 'axios';
import store from '@/store';
// 这里可根据具体使用的UI组件库进行替换
import { Toast } from 'vant';
import { AxiosResponse, AxiosRequestConfig } from 'axios';
 
 /* baseURL 按实际项目来定义 */
const baseURL = process.env.VUE_APP_URL;

 /* 创建axios实例 */
const service = axios.default.create({
 baseURL,
 timeout: 0, // 请求超时时间
 maxContentLength: 4000,
});

service.interceptors.request.use((config: AxiosRequestConfig) => {
 return config;
}, (error: any) => {
 Promise.reject(error);
});

service.interceptors.response.use(
 (response: AxiosResponse) => {
 if (response.status !== 200) {
  Toast.fail('请求错误！');
 } else {
  return response.data;
 }
 },
 (error: any) => {
 return Promise.reject(error);
 });
 
export default service;


为了方便，我们还需要定义一套固定的 axios 返回的格式，新建 ajax.ts ：


export interface AjaxResponse {
 code: number;
 data: any;
 message: string;
}


3. main.ts 接口调用：


// api/main.ts
import request from '../utils/request';

// get
export function getSomeThings(params:any) {
 return request({
 url: '/api/getSomethings',
 });
}

// post
export function postSomeThings(params:any) {
 return request({
 url: '/api/postSomethings',
 methods: 'post',
 data: params
 });
}


5. 编写一个组件
为了减少时间，我们来替换掉 src/components/HelloWorld.vue ，做一个博客帖子组件：


<template>
	<div class="blogpost">
		<h2>{{ post.title }}</h2>
		<p>{{ post.body }}</p>
		<p class="meta">Written by {{ post.author }} on {{ date }}</p>
	</div>
</template>

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

// 在这里对数据进行类型约束
export interface Post {
	title: string;
	body: string;
	author: string;
	datePosted: Date;
}

@Component
export default class HelloWorld extends Vue {
	@Prop() private post!: Post;

	get date() {
		return `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}`;
	}
}
</script>

<style scoped>
h2 {
 text-decoration: underline;
}
p.meta {
 font-style: italic;
}
</style>


然后在 Home.vue 中使用:


<template>
 <div class="home">
 <img alt="Vue logo" src="/UploadFiles/2021-04-02/logo.png">

这就是简单的父子组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：jquery中为什么能用$操作
            
下一篇：利用js-cookie实现前端设置缓存数据定时失效