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 可选参数 ( ?: )和非空断言操作符（!.）
可选参数
function buildName(firstName: string, lastName?: string) { return firstName + ' ' + lastName } // 错误演示 buildName("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> <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 的装饰器：
vuex-class 的装饰器：
@State
@Getter
@Action
@Mutation
我们拿原始Vue组件模版来看：