Typescript中的class interface 只是在声明,其实什么也没有干!

由于vue.js的特殊机制,初始化后给对象添加的属性是无法更新UI的.

最近结合typescript和vue进行web开发,就遇到了这样的坑.

class user{

name:string;

age:number;

constructor(){

}

}

var v=new Vue(var v2 = new Vue({
            el: ‘#app‘,
            data: {
               user:new user()
            }});

如果直接这样把user提交给vue,后续user.name=‘xxxx‘,UI是不会更新的

再控制台打印出user,什么都没有,因此务必在构造函数中初始化字段:

constructor(){

this.name="";

this.age=0;

}

脑袋里一定要有根线:ts中class interface之类的东西只是为了声明!!!

时间: 2024-08-14 09:45:09

Typescript中的class interface 只是在声明,其实什么也没有干!的相关文章

转载:《TypeScript 中文入门教程》 11、声明合并

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript有一些独特的概念,有的是因为我们需要描述JavaScript顶级对象的类型发生了哪些变化. 这其中之一叫做声明合并. 理解了这个概念,对于你使用TypeScript去操作现有的JavaScript来说是大有帮助的. 同时,也会有助于理解更多高级抽象的概念. 首先,在了解如何进行声明合并之前,让我们先看一下什么叫做声明合并. 在这个手册里,声明合并是指编译器会

在TypeScript中使用其他JS框架或库的方法

最近刚刚接触TypeScript,感觉非常强大,但是也有一些问题. 比如我们正常写js时,只要把其他js库引入页面,甚至于只要加入到项目中,ReSharper就会自动分析他,并提供语法只能感知,写代码很舒服. 但是由于TypeScript是强类型语言,他不允许其他未知的js库在当前使用,因为没有办法做编译检测,所以如何在ts中使用其他js库就成了一个问题. 查了下有以下几种方法: 1.使用declare关键字 declare var $: any; declare var jQuery: any

在TypeScript中扩展JavaScript基础对象的功能

最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫toFormat的方法来实现得到格式化后的字符串. 添加.d.ts定义 要在TypeScript中扩展一个基础对象的方法需要预先告知编译器有该方法才行: 1 interface Number { 2 toFormat(): string; 3 } 添加实现 具体实现根据需要编写即可,需要注意的是要添

TypeScript 中的类和接口

在面向对象(OOP)编程中,经常会使用到class(类)和interface(接口).在TypeScript(以下简称TS)中也引入了类和接口的概念,使得TS强大的类型检测机制更加完善.就像我们所知道的,一个类是一堆抽象概念的集合,我们可以从类的构造方法中创建出享有共同属性和方法的对象.一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例的方法. 我们的前端项目使用Angular2.0+作为技术栈,Angular2.0+基于TS实现,我们在对代码中某些部分添加类型注释的时,经

typeScript中的数据类型

/* typeScript中的数据类型 typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数字类型(number) 字符串类型(string) 数组类型(array) 元组类型(tuple) 枚举类型(enum) 任意类型(any) null 和 undefined void类型 never类型 */ //布尔类型(boolean) /* es5的写法 (正确写法) ts中(错误写法) v

TypeScript中使用getElementXXX()

如果只是看解决方法,可以直接跳到第二小节 简述 Angular 1.x版本是用JavaScript编写的,我们在百度Angular经常会搜索到AngularJS,并不是JavaScript的什么衍生版本,就是Angular 1.x.在后续版本中,改用TypeScript来重写了Angular框架.改动较大,所以做了个区分,Angular v1.x就叫AngularJS,v2及后续版本统称为Angular. 查资料和解决方案的时候,经常会搜索到大量的AngularJS内容,注意区分. 在这里提一下

PHP中Abstract与Interface区别

Abstract Class和C++中的抽象类概念一样,包含有纯虚函数(Java和Php中叫abstract method)的类叫做Abstract Class. 我们有时候也把abstract Class叫做base class,因为base class不能直接生成对象. 代码示例 : abstract class example { public function xyz() { return 1; } } $a = new example();//this will throw error

TypeScript 中的 this指向问题

TypeScript 中的 this指向问题 如果你接触过TypeScript有一段时间,那么你会发现很多并非语言设计当中的"特征".这些所谓的特征并非真正TypeScript的语法糖部分,也并非语言设计当中绝妙的点子.仔细研究TypeScript代码与编译后的 JavaScript 代码,你会发现,很多东西其实都是委曲求全的产物. 这篇文章里,我们仅来讨论关于TypeScript中 this 作用域的问题,你应该透过我的描述来了解如何去理解问题的思路. 我们来一段 TypeScrip

Typescript中的装饰器原理

Typescript中的装饰器原理 1.小原理 因为react中的高阶组件本质上是个高阶函数的调用, 所以高阶组件的使用,我们既可以使用函数式方法调用,也可以使用装饰器. 也就是说,装饰器的本质就是一个高阶函数, 就是利用TypeScript的弱类型特性和装饰器特性,实现了一个加强版. 2.以一个例子来讲 //定义一个装饰器函数decTest function decTest(constructor: Function) { console.log(constructor("hello!&quo