Angular基础(三) TypeScript

一、模仿Reddit

a)运行ng new –ng4angular-reddit创建应用，从随书代码中复制样式文件，新建组件app-root，代码为：

界面可以看到了：

b)对于界面输入的数据，获取的方式有点特别，使用了#newlink这样的语法，newlink是一个对象，现在代表就是所在的input这个DOM元素。

将对象作为参数传递给addArticle方法，在对应的ts代码中，可以获取newlink.value。newlink是HTMLInputElement类型。

c）关于参数的绑定，在html文件使用{{***}}这样的语法，ts代码中对应的参数如果发生变化会及时反映到界面。

接下来是像这样的文章列表，要添加Article组件，组件的selector为app-article，之后可以在主页面使用了。Article组件负责显示每一篇文章，数据要从外部传递，以满足复用的要求，@Input()article:Article定义了输入参数article。

 

在主界面显示文章列表时，用*ngFor遍历，使用[article]=”**”可以向组件传递参数。

最后的效果为：

点击updown响应非常快，而且无刷新，但还不清楚背后的机制。

二、TypeScript

a)TypeScript是ES6（ECMAScript6）的超集，ES6相对于ES5增加了类、模块等特性，TypeScript则又在ES6的基础上增加了强类型的机制。现在支持ES6新标准的浏览器还比较少，ts代码会首先被编译成ES5代码。TypeScript由微软发起并开源，现在Google也在维护。TypeScript具有很多新特性，例如类型、类、装饰器、导入等。

b)Types，强类型有助于在编译的时候及早发现代码错误，并且强类型代码具有更好的可读性。TypeScript代码的写法，与C#在很多地方是相反的：

类型有string、number、boolean、Array<>、enum、any，对于方法的返回值还有void。

c)Classes、Properties、Methods，在ES5中有面向对象的概念，但没有类，ES6为JS内置了类，声明语法为classTable {}，类内可以声明具有类型的属性，属性使用时要用this，否则会提示找不到，方法也可以不指定返回类型（包括void），这样的方法可以返回任意类型的结果。

d)Constructors，构造函数见多了，但TypeScript的构造函数名称必须为constructor，构造函数可以有参数，但不能返回值，而且构造函数也不能有重载（ES6可以有）。

e)Inheritance

Car继承了Mechaine，使用extends关键字，通过super初始化父类或调用父类方法。父类的run方法就算不写修饰符也可以被派生类使用，猜想TypeScript中方法的默认修饰符是protected。

f)箭头函数Fat ArrowFunctions，不知道写个Fat是什么意思。与C#的lambda、匿名函数一个意思吧，在箭头函数中，this的作用域在函数内部。

g)字符串模板

TypeScript的字符串模板使用方法，感觉没有string.Format方便的样子，还需要首先定义参数，这里使用倒引号。

 

学习资料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

 

 

 

欢迎关注公众号【菜鸟程序员成长记】