TS学习总结

TS总结

1.TS是什么

• 是一种给JS添加特性的语言扩展，是JS的超集。

2.用法

• 写在外部的ts文件中，然后再HTML页面中引入；

3.变量

• 首先变量要遵守以下几个规则：

  1. 由字母、数字、下划线、$、组成，但数字不能作为开头；
  2. 不能是关键字和保留字；
  3. JS对大小写十分敏感，要区分大小写；
  4. 遵循驼峰命名法

• 变量的声明同JS有所不同：

    let name: string = 'ly';
  

4.函数

• 作为JS的超集，函数的定义与调用同JS的大致相同。

• 声明：

     function name(){
     //函数体
     }
  

• 调用（可多次调用）:

     name();
  

5.运算符

• 算数运算符:+ - * /
• 赋值运算符:= += -=
• 关系运算符：== != > <
• 位运算符：& | ^ ~ <<
• 逻辑运算符：&& ||
• 三元运算符：?
• 类型运算符：type of
• 字符串运算符：+

6.对象

• 创建一，其创建方式与JS的有所不同：

  1. 定义接口：

     interface namename{
       name:string;
     }
     

  2. 创建对象：

     let obj : namename = {
       name:'ly'
     }
     

• 创建二，与JS一致，对象字面量：

       var objectname = {
        //属性和方法;
      }
  

7.数组

• 创建：

       var arrayname [:datatype];
       arrayname = [];
  

       var arrayname:number[] = [];
  

       var arrayname:Array <number> = [];
  

       let arrayname:[number,string] = []
  

8.三种基本结构

• 顺序结构

• 分支结构

  • if…else

  • switch

     switch (expression) {
     case 常量1:
     语句;
     break; 
     default:
     语句;
     break;
     }
    

• 循环结构

  • for循环

    for (初始化表达式1; 判断表达式2; 自增表达式3)
    {
      //循环体
    }
    

  • while循环

     while (循环条件) {
     //循环体
     }
    

9.联合类型

• 可以通过管道将变量设置为多种类型，赋值时，可以根据设置的类型来赋值。

• 格式如下：

     Type1|Type2|Type3
  

10.解构

• 将对象、数组中的元素拆分到指定变量中；
• 解构数组

let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);

• 解构对象

let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

11.TS框架Angular

• 通过对英雄之旅的教程学习，进一步了解到Angular框架的强大之处；
• 首先搭建其开发环境，创建一个新的工作区和一个初始应用；
• 使用Angular CLI创建了初始的应用结构；
• 用 Angular 组件来显示数据；
• 使用 CLI 创建了第二个组件 HeroesComponent，把HeroesComponent 添加到壳组件AppComponent中；
• 使用 UppercasePipe 来格式化英雄的名字；
• 用 ngModel 指令实现了双向数据绑定，把FormsModule导入了 AppModule；
• 用 *ngFor 显示了一个列表；
• 用 *ngIf 来根据条件包含或排除了一段 HTML；
• 用 class 绑定来切换 CSS 的样式类；
• 创建一个独立的、可复用的 HeroDetailComponent 组件；
• 用属性绑定语法来让父组件 HeroesComponent 可以控制子组件 HeroDetailComponent；
• 用 @Input 装饰器来让hero属性可以在外部的HeroesComponent中绑定；
• 使用Angular依赖注入机制把它注入到了组件中；
• 给 HeroService 中获取数据的方法提供了一个异步的函数签名；
• 用 RxJS 的 of() 方法返回了一个模拟英雄数据的可观察对象 ；
• 在组件的 ngOnInit 生命周期钩子中调用 HeroService 方法；
• 创建一个 MessageService，以便在类之间实现松耦合通讯；
• HeroService 连同注入到它的服务MessageService 一起，注入到了组件中；
• 添加了 Angular 路由器在各个不同组件之间导航；
• 用一些 <a> 链接和一个 把 AppComponent 转换成了一个导航用的壳组件；
• 在 AppRoutingModule 中配置路由器；
• 定义一些简单路由、一个重定向路由和一个参数化路由；
• 多个组件之间共享了 HeroService 服务；
• 重构HeroService，以通过 web API 来加载英雄数据；
• 扩展HeroService 来支持 post()、put() 和 delete() 方法；
• 修改组件，以允许用户添加、编辑和删除英雄

详细的放入以下链接Angular英雄之旅.