初识 typescript

近期,公司有一个项目是要求用angular编写,而要学习angular,必须先了解typescript,因为angular2由google公司用TS来编写的。而ts是由微软开发,是jS的超集,遵循ES6标准。他们之间的关系为: 现在我将一些自己认为的一些小重点或是关键字记录一下

TS学习的好处与编译环境

优势有:

  • 支持ES6规范
  • 强大的IDE支持(类型检查,语法提示、重构)
  • angular2的开发语言 搭建TS开发环境-compiler compiler:因为es6是2015发布的,很多浏览器不兼容,所以需要将TS转化成JS;
    在线compiler开发http://www.typescriptlang.org/play/index.html

TS语法特性

字符串特性:
  • 多行字符串,用``包裹字符串,会自动添加换行符;
  • 字符串模板
  • 可自动拆分字符串
参数新特性:
  • 给变量指定类型(类型推断机制);如 ``` var myname:string = "huangyuanzhen";
-   声明为any类型的时候,可以赋给任何类型;
-   void是声明函数的返回值为空;
-   在变量,函数、参数后面可以声明类型;
-   可以通过class或interface自定义声明类型;
-   默认参数:在参数声明背后用等号制定默认值
-   可选参数,在参数后面用?表示可选
-   ts中rest-and-spread操作符,用来声明任意数量参数的方法;
-   TS中的generator函数:控制函数的执行过程,手工暂停和恢复代码执行,es6的yeild也是此功能;
-   TS析构表达式:通过表达式将对象和数组拆解成任意数量的变量;
-   TS箭头表达式:用来声明匿名函数,用来消除传统的匿名函数this问题;如:
 ```
function stock(name:string) { 
this.name = name;
setInterval(function () { 
    console.log("name is"+this.name);//打印出的是“name is”,这里的this不是stock
},1000)
}
 var sto = new stock("IBM");
 function stock2(name:string) { 
this.name = name;
setInterval(() => { 
    console.log("name is"+this.name);//打印出的是“name is wawa”
},1000)
}
 var ha = new stock2("wawa");
TS中的for…of循环

forEach,for..in和for…of的区别

  • for..in循环的是键值对key值
  • for…of循环的是value;
TS的面向对象特性

private类的外部不能访问,protected类的内部和类的子类可以访问; 小栗子:

class Person{
constructor(public:string) { 
console.log("hello");
}
name;
eat() { 
console.log("I am eating");
}
}
class Employee extends Person { 
//员工类继承自人类
code: string;
constructor(code: string, name: string) { 
//子类的构造函数必须要调用父类的构造函数,用super
super(name);
this.code = code;
this.name = name;
console.log(this.code+this.name);//输出“zhanghuisheng”
}
work() { 
super.eat();//继承父类的方法
this.dowork();
}
dowork() { 
console.log('I am working');
}
}
var e1 = new Employee("zhang", "huisheng");
//用new实例化时,会先调用父类constructor,然后在调用子类的constructor,所以会先输出hello,然后输出zhanghuisheng
e1.dowork();
var p1 = new Person("huang");
//当用new实例化的时候,调用一次constructor,所以会打印一次“hello”
p1.eat();
var p2 = new Person("yuanzhen");
p2.eat(); 

TS泛型(generic):参数化的类型,一般用来限制集合的内容; 如:

var workers: Array<Person> = [];
//泛型在这里面规定了workers中数组元素的类型只能为Person
workers[0] = new Person("mama");
workers[1] = new Person("baba");
workers[2]=2;//会出错,因为2不是Person类型

TS接口(interface):用来建立某种代码约定,使得其他开发者在调用某个放水阀或创建新的类时必须遵循接库所定义的代码约定; 如:

interface IAnimal { 
name: string;
age: number;
eat();
}
class Animal{ 
constructor(public config: IAnimal) { 
//用接口指定属性参数类型
}
}
class Sheep implements IAnimal { 
//接口实现的类必须也符合接口的方法
name = "haha";
age = 11;
eat() { 
console.log("hello world");
}
}

TS模块(module):模块可以帮助开发者将代码分割成可重用的单元,开发者可以自己决定将模块中的哪些资源(类,方法、变量)暴露出去供外部使用,哪些资源只在内部模块内使用; TS注解(annotation):注解为程序的元素(类,元素,变量)加上更直观了当的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具和框架使用的;如:

import { Component } from '@angular/core';
//@Component是注解,说明angular框架怎么处理AppComponent类,
//表示当你去实例化一个AppComponent类的时候,应该去加载哪些文件(html,css)
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour Of Heroes';
}

转载于:https://my.oschina.net/hyzccc/blog/1832483

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值