zoukankan      html  css  js  c++  java
  • 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,之后可以在主页面使用<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

     

     

     

  • 相关阅读:
    第4月第1天 makefile automake
    第3月30天 UIImage imageWithContentsOfFile卡顿 Can't add self as subview MPMoviePlayerControlle rcrash
    第3月第27天 uitableviewcell复用
    learning uboot fstype command
    learning uboot part command
    linux command dialog
    linux command curl and sha256sum implement download verification package
    learning shell script prompt to run with superuser privileges (4)
    learning shell get script absolute path (3)
    learning shell args handing key=value example (2)
  • 原文地址:https://www.cnblogs.com/zhixin9001/p/7392574.html
Copyright © 2011-2022 走看看