初识 typescript

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_33893473

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/hyzccc/blog/1832483

版权

为什么80%的码农都做不了架构师？>>>

近期，公司有一个项目是要求用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