TypeScript 是 JavaScript 的超集,可以支持 ECMAScript 的各种新特性
1、TypeScript的安装与使用:
注:安装 Node.js 环境:(version: 8.14.0+)
通过 npm 全局安装 TypeScript:
npm install -g typescript
新建一个hello.ts文件
export class Hello {
}
通过cmd运行:tsc hello.ts
编译后生成hello.js文件
2、字符串新特性:
(1)多行字符串
在ts中用``拼接多行字符串不报错
var aa = `aaaa
bbbb
ccc`
(2)字符串模板
在多行字符串中用一个表达式去插入变量或方法
var myname = 'xiao ming';
var getname = function(){
return 'xiaoming';
}
console.log(`hello ${myname}`)
console.log(`hello ${getname()}`)
console.log(`<div>
<span>${myname}</span>
<span>${getname()}</span>
<span>这是是ts写法</span>
</div>`)
编译后:
var myname = 'xiao ming';
var getname = function () {
return 'xiaoming';
};
console.log("hello " + myname);
console.log("hello " + getname());
console.log("<div>\n <span>" + myname + "</span>\n <span>" + getname() + "</span>\n <span>\u8FD9\u662F\u662Fts\u5199\u6CD5</span>\n</div>");
(3)自动拆分字符串
用字符串模板去调用方法时,字符串模板中表达式的值会自动赋值给被调用方法中的参数
function test(template, name, age) {
console.log(template)
console.log(name)
console.log(age)
}
var myname = 'xiao ming';
var getage = function () {
return 20;
}
test`hello my name is ${myname}, I am ${getage()}`
编译后
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function test(template, name, age) {
console.log(template);
console.log(name);
console.log(age);
}
var myname = 'xiao ming';
var getage = function () {
return 20;
};
test(__makeTemplateObject(["hello my name is ", ", I am ", ""], ["hello my name is ", ", I am ", ""]), myname, getage());
运行结果:
3、参数新特性:
(1)参数类型:
在参数名称后面使用冒号来指定参数类型
TS有类型推断机制:
var myname = 'xiao ming'; //第一次为某个变量去赋值时,推断这个变量是什么类型
myname = 13; // 再赋值13就会报错,认为它是字符类型
var myname:any = 'xiao ming'; //既想是字符串又想是数字,赋值any类型
myname = 13;
var myname: any = 'xiao ming';
var sex: string = 'woman';
var age: number = 20;
var woman: boolean = true;
function test(): void{ // void表示不需要返回值
return;
}
function test1(): string{ // 除了在变量后面声明类型,也可以在方法后面声明类型
return '';
}
function test2(name:string): string{
return '';
}
test2('112') // 参数必须也是字符类型
test2(112) // 参数不可以是数字类型
// 自定义类型:在ts中可以通过class或接口来声明自定义类型
class Person {
name:string;
age:number;
}
var xiaoming:Person = new Person();
xiaoming.name = 'xiao ming'; // ts编辑器会自动出现自定义类型的属性提示
xiaoming.age = 20;
(2)默认参数:
在参数声明后面用等号来指定参数的默认值
var myname:string='xiao ming';
注:着重说明给方法和变量指定默认值
var myname: string = 'xiao ming'; // 变量指定默认值
function test(a: string, b: string, c: string) {
console.log(a);
console.log(b);
console.log(c);
}
test('xx','yy','zz') //只有传三个参数才不会报错
function test1(a: string, b: string, c: string='xyz') {
console.log(a);
console.log(b);
console.log(c);
}
test1('xx','yy') // 当参数指定默认值时,可以不传三个参数
注: 带默认值的参数一定要声明在最后,声明在前面会报错
function test2( c: string='xyz', a: string, b: string) {
console.log(a);
console.log(b);
console.log(c);
}
test2('xx','yy') // 传两个参数会认为是前两个参数值
(3)可选参数:
在方法的参数声明后面用问号来标明此参数为可选参数
function test(a: string, b?: string, c: string='xyz') {
console.log(a);
console.log(b);
//console.log(b.length); // 要注意可选参数没传时,处理逻辑,否则报错
console.log(c);
}
test('xx') // 可以只传一个参数,第二个参数为可选参数,第三个参数有默认值
运行结果:
注:可选参数不能声明在必填参数前面,否则报错
function test(a?: string, b: string, c: string='xyz') {
console.log(a);
console.log(b);
console.log(c);
}
test('xx') // 报错 必填参数不能声明在可选参数后面
4、函数新特性:
(1)Rest and Spread操作符:(用…声明)
用来声明任意数量的方法参数
function func1(...args) {
args.forEach(function (arg) {
console.log(arg)
})
}
func1(1, 2, 3)
func1(7,8,9,10,11) // 传多少个参数都可以
声明固定数量的方法参数
function func1(a,b,c) {
console.log(a)
console.log(b)
console.log(c)
}
var args = [1, 2];
func1(...args); // 这种方法在ts编辑器中会报错,但能正常编译成js
var args1 = [7, 8, 9, 10];
func1(...args1);// 这种方法在ts编辑器中会报错,但能正常编译成js
(2)generator函数:(在function加上就是声明了generator函数)
写法: function 通过yield关键字来暂停执行,相当于打断点
控制函数的执行过程,手工暂停和恢复代码的执行
function* doSomething(){
console.log('start');
yield;
console.log('finished');
}
// doSomething();不起任何作用
var func1 = doSomething();// 必须把方法声明成一个变量再去执行,才有效
func1.next(); // 执行到yield关键字中止 输出start
func1.next();// 必须.next断续执行 输出finished
(3)destructuring析构表达式:
通过表达式将对象或数组拆解成任意数量的变量
function getStock() {
return {
code: 'huawei',
price:10
}
}
// es5中的写法:
// var stock = getStock();
// var code = stock.code;
// var price = stock.price;
// es6写法:
var { code, price } = getStock(); // {}里面的变量必须和方法中的属性名一致,不然会报错,解析不到
//如果本地的变量非要是codex,如下写法:表示别名放到属性名中
var { code: codex, price } = getStock();
console.log(codex)
如何取对象?通过表达式将对象拆解成本地的变量
function getStock() {
return {
code: 'huawei',
price: {
price1: 100,
price2:200
}
}
}
var { code: codex, price:{price1} } = getStock();
console.log(price1) // 100
通过表达式将数组拆解成本地的变量
var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;
console.log(number1, number2) // 1 2
var [, , number1, number2] = array1;
console.log(number1, number2) // 3 4
var [number1, , , number2] = array1;
console.log(number1, number2) // 1 4
var [number1, number2, ...other] = array1;
console.log(number1,number2,other) // 其中other输出一个数组[3,4]
// 结果和上面一样
function doSomething([number1, number2, ...other]) {
console.log(number1, number2, other); // 其中other输出一个数组[3,4]
}
doSomething(array1)
5、表达式和循环:
(1)箭头表达式
用来声明匿名函数,消除传统匿名函数中的this指针问题
var sum = (arg1, arg2) => arg1 + arg2 // 单行写法
var sum = (arg1, arg2) => { // 多行写法
return arg1 + arg2
}
注:(arg1, arg2)部分可以是()无参数,也可以是arg1一个参数
var array = [1, 2, 3, 4];
console.log(array.filter(value => value%2 == 0)) // 2 4
function getStock(name: string) {
this.name = name;
setTimeout(function () {
console.log(`my name is ${this.name}`)
},100)
}
var stock = new getStock('huawei'); //my name is
function getStock2(name: string) {
this.name = name;
setTimeout( ()=> {
console.log(`my name is ${this.name}`)
},100)
}
var stock = new getStock2('huawei'); //my name is huawei
(2)forEach 、 for in 、 for of
1.forEach循环数组中的元素,但会忽略数组的属性
2.forEach不支持满足某个条件跳出循环操作,如return 、break出去
forEach应用:
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错,但js里面没事
array.forEach(value => console.log(value)) // 1 2 3 4 不会打印出desc
for in 应用:循环的是键值
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错,但js里面没事
for (var n in array) {
console.log(array[n]) // 1 2 3 4 desc 不忽略属性
}
for of 应用:
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错,但js里面没事
for (var n of array) {
if (n > 2) {
break;
}
console.log(n) // 1 2 3 4 与for in 不一样是忽略属性,这点和forEach一样,和forEach不一样的是,可以打断循环,break出来
}