typescript优势
1.es6
2.ide支持 1)类型检查(string number) 2)语法提示(根据上下文提示)3)重构(修改变量 文件名)
3.angular2的开发语言
搭建typescript开发环境
compiler typescript-》javascript
在线compiler http://www.typescriptlang.org/play/index.html
本地compiler开发 npm install -g typescript tsc --version
新建类 hello.ts
export class Hello{}
tsc hello.ts 生成hello.js
字符串特性
多行字符串
var content = `aaa
bbb
ccc
`
-->js var content = "aaa\nbbb\nccc\n";
字符串模板(变量或函数)
var myname = "xxq";
var getname = function () {
return "xxq1"
};
console.log(`hello ${myname}`);
console.log(`hello ${getname()}`)
-->js
var myname = "xxq";
var getname = function () {
return "xxq1";
};
console.log("hello " + myname);
console.log("hello " + getname());
---------------
var myname = "xxq";
var getname = function () {
return "xxq1"
};
console.log(`<div>
<span>${myname}</span>
<span>${getname()}</span>
<span>xxx</span>
</div>`)
-->js
var myname = "xxq";
var getname = function () {
return "xxq1";
};
console.log("<div>\n<span>" + myname + "</span>\n<span>" + getname() + "</span>\n<span>xxx</span>\n</div>");
自动拆分字符串 (字符串模板调用函数,并把值传给函数中的参数)
function test(template, name, age) {
console.log(template);
console.log(name);
console.log(age);
}
var myname = "xxq";
function getAge() {
return 23;
}
test`hello ${myname},age is ${getAge()}`
运行结果
[ "hello ", ",age is ", "" ]
xxq
23
typescript参数类型
使用冒号指定类型
var female: boolean = true;
var age: number = 12;
var myname: string = "xxq";
typescript类型推断机制 (当第一次给变量赋值的时候,默认会给变量一个类型,当第二次赋值改变变量类型的时候,typescript会报错,但是转换的js不会报错)
var myage = 12;
myage="";
如果想改变变量类型又不报错,设置类型为any
var myage:any = 12;
myage=""
void 返回值
function hi(name:string):void{
return
}
hi("")
自定义类型
class Person {
name: string;
age:number
}
var zhangsan: Person = new Person();
zhangsan.age = 12;
zhangsan.name="zhangsan";
参数默认值(函数中带参数的默认值声明在最后)
可选参数(在必选参数的后面)
var myname:string="xxq"
function test(a: string, b?: string,c: string="jojo") {
console.log(a);
console.log(b);
console.log(c);
}
test('xxx', 'yyy', 'zzz');// xxx yyy zzz
test('xxx', 'yyy');// xxx yyy jojo
test('xxx') // xxx undefined jojo
值得注意的是 如果可选参数未定义 需要在函数里做判断 b.length会报错
rest and spread操作符 -用来声明任意数量的方法参数
//方法1
function test(...args) {
args.forEach(function (arg) {
console.log(arg)
})
}
test(1, 2, 3, 4, 5);
test(1, 2);
//方法2
function test(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var arg = [1, 2];
test(...arg);
var arg2 = [1, 2, 2, 3];
test(...arg2);
generator函数-控制函数的执行过程,手工暂停和恢复代码执行
function* test(){
console.log("start");
yield;
console.log("end");
}
var f1=test()
f1.next();
//方法2
function* price(stock){
while(true){
yield Math.random()*100;
}
}
var p=price("IBM");
var limit=15;
var pri=100;
while(pri>limit){
pri=p.next().value;
console.log(`geration is ${pri}`)
}
析构表达式 对象/数组-》任意数量的变量
//对象
function xigou() {
return {
name: "IBM",
price: {
price1: 200,
price2:300
}
}
}
var { name:namex, price:{price1,price2} } = xigou()
console.log(namex);
console.log(price1);
console.log(price2);
//数组
var arr = [1, 2, 3, 4];
var [number1, ,,number2] = arr;
console.log(number1);
console.log(number2);
//
var arr = [1, 2, 3, 4];
var [number1,number2,...others] = arr;
console.log(number1);
console.log(number2);
console.log(others)
//
var arr = [1, 2, 3, 4];
function test([number1,number2,...others]) {
console.log(number1);
console.log(number2);
console.log(others)
}
test(arr)
箭头表达式
//构造函数
function Test(name:string) {
this.name = name;
setInterval( function(){
console.log("name is "+this.name)
},1000)
setInterval( ()=>{
console.log("name is "+this.name)
},1000)
}
//新建一个对象中的this指针不指向window
var stu=new Test("xxq")
枚举
enum Role {Employee=3,Manager,Admin}
var role: Role = Role.Admin;
//Employee 3,Manager 4,Admin 5
console.log('role',role)
//类
class Report {
reports: string[];
constructor(reports: string[]) {
this.reports=reports
}
run() {
this.reports.forEach(function (data) {
console.log(data)
})
}
}
let eg = new Report(['first', 'second']);
eg.run();
// 继承
class newTable extends Report {
header: string[];
constructor(header: string[], origin: string[]) {
super(origin)
this.header = header;
}
run() {
console.log(this.header);
super.run()
}
}
var headers: string[] = ['Name'];
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var n: newTable = new newTable(headers, data);
n.run()
//胖箭头函数
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach(item => console.log(item));
var evens = [2, 4, 6, 8];
// var odds = evens.map(item => item + 1);
var lowcase = ['a','b','c','d'];
var odds = lowcase.map(line => {
// console.log(line.toUpperCase());
return line.toUpperCase()
});
console.log(odds)
// var nate = {
// name: "Nate",
// guitars: ["Gibson", "Martin", "Taylor"],
// printGuitars: function () {
// var _this = this;
// // console.log("outer-this",this)
// this.guitars.forEach(function (item) {
// // console.log("inner-this",this)
// // console.log(item+" "+this.name)
// console.log(item + " " + _this.name)
// })
// }
// }
var nate = {
name: "Nate",
guitars: ["Gibson", "Martin", "Taylor"],
printGuitars: function () {
this.guitars.forEach((item) => {
console.log(item + " " + this.name)
})
}
}
nate.printGuitars()