es template常用方法

转载

charlesc 2024-10-13 07:21:19

文章标签 es template常用方法 ES6 原型链 Web 文章分类 机器学习人工智能

TypeScript

目前的Angular4是基于TypeScript语言，一种类似于JS的语言。

TS和ES6的关系如下图

es template常用方法_Web

目前（2017），仍有少量浏览器不支持ES6和TypeScript,为了保证几乎所有的浏览器支持。

Angular会把TypeScript转化成ES5。这个转化器由TypeScript核心团队负责。

但是ES6转ES5的转化器，有两个主要团队在做，谷歌的traceur，JS社区的babel。

TypeScript是谷歌和微软的合作项目，由两个重量级团队长期支持。

Angular2是可以使用ES5的。那为什么Angular要全面使用TypeScript呢？有如下原因。

Types

TS对比ES6的一个重大提升就是类型（typing）。

比如：

function greetText(name: string): string {
  return "Hello " + name;
}

在ES5中，需要先用var fullName:string 定义变量类型
但在TS中，greetText(name: string)，可以直接定义类型，函数接受arguments为name,同时定义对应的类型为strig
后面的冒号: string { 表示return的类型必须是string，这样的好处是：1，如果输入其他类型，会报错，2，其他开发者会清楚这个返回值。

function hello(name: string): string {
    return 12;
}

会报错因为返回12，要求返回类型是string

TSUN (TypeScript Upgraded Node) 把TS在终端输入为node格式，

内置类型

string
var fullName: string = ‘Nate Murray’;
Number
var age: number = 36;
Boolean
var married: boolean = true;
Array
因为array是一个集合，需要定义集合内部的数据类型
可以通过Array或者type[]，常见加[]就是数组。
比如
var chickens: Array<number> = [1, 2, 3];
var chickens: number[] = [4, 5, 6];
Enums 枚举
格式为：命名+数值，通过名称查出数值，

如下，只设置命名
enum Role {Employee, Manager, Admin};
var role: Role = Role.Employee;
输出为0，因为Employee空值

设置命名+空值

enum Role {Employee = 3, Manager = 5, Admin = 7};
var role: Role = Role.Employee;

可以通过Role[],快速查看对应值。
enum Role {Employee, Manager, Admin};
console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]);

Any
变量默认类型，可以为任何类型，

Void
没有任何类型，通常用于函数中不设置返回值。

不设置返回类型和返回，则是void,不设置返回类型，则是any

function setName(name: string): void {
  this.fullName = name;
}

classes

在ES5中，没有class,主要用原型链，为了弥补这个缺陷，JS社区用了[ Mozilla Developer Network’s JavaScript Guide](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Guide)和[Introduction to Object-Oriented JavaScript](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Introduction_to_Object- Oriented_JavaScript)

在ES6中，class被正式引入

class可以包含properties, methods, and constructors。

properties

属性本质上就是class的数据组，
比如

class person{
  first_name: string;
  last_name: string;
  age: number;
}

methods

方法就是对一个对象的函数

class person{
  ...
  greet() {
    console.log("Hello", this.first_name);
  }
}

constructors

创建一个新对象的默认值，就是JS原型链的constructor。
新实例的默认值。
必须命名为constructor，每一个class只能有一个，默认会自动生成，为空值

比如:

class person{
  ...
  constructor(first_name: string, last_name: string, age: number) {
    this.first_name = first_name;
    this.last_name = last_name;
    this.age = age;
  }
}

这样就可以直接创建对象
var p: Person = new Person('Felipe', 'Coury', 36);