export default class TechnologyDevList extends Vue {
//多行字符串
private text:string=`fdj
djfd
dfjl`
private getText():string {
return this.text
}
//字符串模版${变量|方法}
private str:string=`hello${this.text}${this.getText()}`
private element:any=`
<span>${this.text}</span>
<span>${this.text}</span>
`
//自动分割模版字符串，将变量入参
private test(template,name,age) {
console.log(template)
console.log(name)
console.log(age)
}
created(){
const name:string='qi';
const age:number=18;
this.test`my name is${name},I am ${age}`;
}
方法的可选参数
private getName(id:number,adress?:any) {//可选参数放后面
if(adress){ //可选参数判断存在后才可用
console.log(adress)
}
}
将类作为类型声明变量：
class Feature {
constructor(public id:number,public name:string) {
}
}
export default class TechnologyDevList extends Vue {
private feature:Feature[]=[{id:1,name:'dfd'}]
}
接口：
interface Person{
first:string,
last:number,
sayHello() :string
}
//实现接口
class Gretter implements Person {
constructor(public first='',public last=323) {}
sayHello(){
return this.first
}
}
//面向接口编程
function oprete(person:Person) {
return person.first+ person.sayHello()
}
const user=new Gretter('q',12)
user.sayHello()
oprete(user)
继承： 子类的构造函数必须执行一次super函数。
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A() // A
new B() // B
类装饰器
function log(target: any): void {
console.log(target)
//target是类A的构造函数： ƒ A() {
// this.bar = 'qqqq';
// }
target.prototype.log = function() {
console.log(this.bar)
}
}
@log
class A {
bar = 'qqqq'
log() {}
}
let a = new A()
a.log()
方法装饰器
function dong(target: any, name: string, descriptor: any) {
console.log(target)
console.log(name)
console.log(descriptor.value)
let temp=descriptor.value
descriptor.value=function (value: string) {
console.log('给setBar方法装饰的新内容1')
temp.call(this,value)
}
}
class A {
bar = 'qqqq'
@dong
setBar(value: string) {
this.bar = value
console.log(this.bar)
}
setBar1(value: string) {
this.bar = value
}
}
let a = new A()
a.setBar('qgz')
属性装饰器
function mua(params: string) {
return function(target: any, name: string) {
console.log(target, name)
target[name] = params
}
}
class A {
@mua('shuqin') ns!: string
}
let a = new A()
console.log(a.ns)
泛型：
interface Feature{
id:number,
name:string
}
interface Result<T>{
ok:0|1,
data:T
}
function getData<T>():Promise<Result<T>> {
const data:any=[
{
id:12,
name:'q'
},
{
id:13,
name:'gz'
}
]
return Promise.resolve<Result<T>>({ //<Result<T>>是一个对象，Promise.resolve将其转为 Promise 对象
ok:1,
data:data
})
}
@Component({components: { ZnDatepicker, technologyDevAdd }})
export default class TechnologyDevList extends Vue {
private features:Feature[]=[]//Feature[]指：数组内部元素为Feature类型
async created(){
const result= await getData<Feature[]>() //
this.features = result.data
}
获取可枚举属性:Object.keys或用for...in循环（还会获取到原型链上的可枚举属性) 获取可枚举属性和不可枚举属性,且过滤掉了原型链上属性：Object.getOwnPropertyNames 返回值：['key1','key2'] hasOwnProperty（）也可以过滤原型链上属性
析构表达式：从数组或对象中取值给变量赋值（效果和es6解构赋值一样）
箭头函数：优点：this指向更符合预期
for of
