搭建TypeScript开发环境
其实也就安装TypeScript的compiler;
什么是compiler? 为什么需要compiler?
compiler(编译器)的作用是把TS代码转换成JS代码;
ES6规范是在2015年发布的,而目前所有主流的浏览器并没有完全支持ES6规范,所以用ES6写的东西并不能直接放在浏览器中去跑。
使用在线compiler开发
官网 中点击Playground
使用本地compiler开发
首先、安装TS编译器,其实就是安装TS的一个过程;
安装:
$ sudo npm install -g typescript
$ tsc --version
Version 2.3.4
使用
在work文件夹下新建Hello.ts
文件
export class Hello {
}
运行 $ tsc Hello.ts
命令,可以看到在work文件夹下生成了一个hello.js
文件,即编译后最终在浏览器中执行的文件;
"use strict";
exports.__esModule = true;
var Hello = (function () {
function Hello() {
}
return Hello;
}());
exports.Hello = Hello;
由于TS有强大的IDE支持,因此在IDE编译器下可以不用敲写命令,自动把ts文件编译成js文件;
字符串新特性
多行字符串
在传统的JS中,当你想给一个字符串换行的时候需要用"+";
var content = "aaa"+
"bbb"+
"ccc";
在新的TS中,引用了多行字符串的概念。使用"``"双撇号声明字符串;
var content = `aaa
bbb
ccc`;
编译成JS会自动加上换行;
var content = "aaa\nbbb\nccc";
字符串模板
var myname = "yu fei yu";
var getName = function(){
return "yu fei yu";
}
console.log(`<div>
<span>${myname}</span>
<span>${getName()}</span>
<div>xxx</div>
</div>`);
自动拆分字符串
function test(template, name, age){
console.log(template);
console.log(name);
console.log(age);
}
var myname = "yu fei yu";
var getAge = function(){
return 18;“”
}
控制台输出:
Array[3]
0: "hello my name is "
1: ",i'm "
2: "
yu fei yu
18
参数新特性
参数类型
在参数名称后面使用冒号来指定参数类型;可以避免错误类型复制,减少开发中的错误,在ts编译器中会提示错误!
var myname: string = "yue fei yu";
var alias: any = "lulu";
参数默认值
在参数声明后面用等号来指定参数默认值
var myname:string = "yu fei"
可选参数
在方法的参数声明后面用问号来标明此参数为可选参数
function test(a:string, b?:string, c:"lulu"){
console.log(a);
console.log(b);
console.log(c);
}
函数新特性
Rest and Spread操作符
用来声明任意数量的方法参数
function fun1(...args){
args.forEach(function(arg){
console.log(arg);
})
}
fun1(1, 2, 3);
fun1(7, 8, 9, 10, 11, 12);
可以把任意长度的数组转换成一个固定数量参数的方法的调用
function fun1(a, b, c){
console.log(a);
console.log(b);
console.log(c);
}
var args = [1,2];
fun1(...args);
var args2 = [7, 8, 9, 10, 11];
fun1(...args2);
generator函数
控制函数的执行过程,手工暂停和恢复代码执行
function* doSomething(){
console.log("start");
yield;
console.log("finish");
}
var fun1 = doSomething();
fun1.next();
funtion* getStockPrice(stock){
while(true){
yield Math.random()*100;
}
}
var priceGenerator = getStockPrice("LU");
var limitPrice = 14;
var price = 100;
while(price > limitPrice){
price = priceGemerator.next().value;
console.log(`the gernerator return ${price}`);
}
console.log(`buying at ${price}`);
destructuring析构表达式
通过表达式将对象或数组拆解成任意数量的变量
function getStock(){
return{
code:"LU",
price:{
price1:100,
price2:200
},
aaa:"xixi",
bbb: "haha"
}
}
var array1 = [1,2,3,4];
var [, , number1, mumber2] = array1;
var [number3, mumber4, ...others] = array1;
var doSomething([number3, mumber4, ...others]){
console.log(number3);
console.log(number4);
console.log(others);
}
console.log(number1);
总结:当你需要从一个对象的属性或者是数组的元素里面,用它们的值去初始化一个变量的时候,析构表达式可以让你写更少的代码。
表达式和循环
箭头表达式
用来声明匿名函数,消除传统匿名函数的this指针问题
var sum = (arg1, arg2) => {
return arg1 + arg2;
}
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value =>value%2 ==0 ));
function getStock(name:string){
this.name = name;
setInterval(function(){
conlose.log("name is :" + this.name);
},1000);
}
var stock = new getStock("LU");
function getStock2(name:string){
this.name = name;
setInterval(() =>{
conlose.log("name is :" + this.name);
},1000);
}
var stock = new getStock2("LU");
forEach(), for in 和for of
var myArray = [1,2,3,4];
myArray.desc = "four number";
myArray.forEach(value => console.log(value));
面向对象特性
TypeScript类(Class)
类是TS的核心,使用TS开发时,大部分代码都是写中类里面的。
这里会介绍类的定义、构造函数、以及类的继承
定义:
类的访问控制符:
private:只能中类内部访问
public:类的外部和内部都可以访问
protected:类内部和子类可以访问
TypeScript泛型(generic)
参数化的类型,一般用来限制集合的内容
继续上面的例子
声明一个数组
var workers: Array<Person> = [];
TypeScript接口(Interface)
用来建立某种代码约定,使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。
interface Animal {
eat(){
}
}
TypeScript模块(Module)
模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用,哪些资源只在模块内使用。
在TS中一个文件就是一个模块,中模块的内部有两个关键字(export、import)支撑模块的特性。
这两个关键字来控制模块 对外暴露什么、需要别的模块对你提供什么
export:对外暴露一些资源
TypeScript注解(annotation)
注解为程序的元素(类、方法、变量)加上更直观的说明,这些说明信息与程序的业务逻辑无关,而上供指定的工具框架使用的。
上面程序使用angular2 框架写的程序,在app.component.ts
文件中声明类一个类AppComponent
,在这个类上有一个注解@Component
,这个注解本身是由angular2框架提供的,在这个注解中有一些属性,这个注解的这些属性会告诉angulr2 框架怎么去处理AppComponent
这个ts类。即 中angular2 框架中,去实例化一个AppComponent这样一个类的时候,angular2框架会去加载./app.component.html
这个页面,和./component.css
展示中页面中;
这就是注解,它用来告诉一个框架怎么处理程序中的元素(类、元素等)
TypeScript类型定义文件(*.d.ts)
类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包
如: JQuery
目录下引入jquery的类型定义文件即可: index.d.ts
怎么找类型定义文件?
这个工具上用来专门安装类型定义文件的。
总结
- 介绍了TypeScript的基本概念和优势
- 介绍了如何搭建TypeScript 开发环境
- 介绍了TypeScript的语法和特性
请发表评论