typescript声明变量类型
// 字符串类型声明
var myname: string = 'chris';
// 将myname声明为string类型
myname = '123'; // 会提示myname为string类型,不能将数字赋给myname
// 但是这种报错提示,并不会在编译后的js代码中报错,因为es5没有类型检测
var age: number = 13; // 声明数字类型
var man: boolean = true; // 布尔类型声明
var param: any = 'chris'; // 声明param为任意类型,此时可以给param赋其他类型的值
param = 123; // 不会报错
function test(name: string): void {
// something
// 此函数没有返回值
}
function test(name: string): string {
// something
// 接受字符串类型参数,返回字符串类型值
}
自定义类型
class Person {
name: string;
age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = 'chris';
zhangsan.age = 18;
// 编译生成的es5的代码如下:
var Person = /** @class */ (function () {
function Person() {
}
return Person;
}());
var zhangsan = new Person();
zhangsan.name = 'chris';
zhangsan.age = 18;
参数新特性
- 参数类型: 在参数名称后面使用冒号来指定参数的类型
- 默认参数: 在参数声明后面用等号来指定参数的默认值
- 可选参数: 在方法的参数声明后面用问号来标明此参数为可选参数
var myname: string = 'chris';
==参数类型==
function test(a: string, b: string, c: string) {
console.log(a);
console.log(b);
console.log(c);
}
test('xxx', 'yyy', 'zzz'); // 如果传入的参数个数不够,则会报错
// xxx
// yyy
// zzz
==默认参数==
// 如果给函数参数制定了默认值,则参数个数不够不会报错
function test(a: string, b: string, c: string = 'chris') {
console.log(a);
console.log(b);
console.log(c);
}
test('xxx', 'yyy'); // 传入的参数个数不够,但因为有默认值,不会报错
// xxx
// yyy
// chris
// 注意: 带默认值的参数一定要声明在最后,这样参数个数不够才不会报错,否则还是会报错
==可选参数==
function test(a: string, b?: string, c: string = 'chris') {
console.log(a);
console.log(b); // 需要在代码中处理没有传b参数的情况,否则会报错
console.log(c);
}
test('xxx'); // 不会报错
// xxx
// chris
// 注意,可选参数不能声明在必选参数之前, 否则报错
**函数新特性 **
Rest and Spread操作符: 用来声明任意数量的方法参数
generator函数:控制函数的执行过程,手工暂停和恢复代码执行
// 声明generator函数 在function后面加*
function* dosomething() {
console.log('start');
yield;
console.log('finish');
}
// 直接调用控制台不会输出
var func1 = doSomething(); // 需要将generator函数声明成一个变量,然后调用变量的next函数,才会执行
func1.next(); // 会执行generator函数,到yield,并停在那里
func1.next(); // 执行接下来的generator函数部分
举例代码:
function* getStockPrice(stock) {
while(true) {
yield Math.random() * 100;
}
}
var priceGenerator = getStockPrice('IBM');
var limitPrice = 15;
var price = 100;
while(price > limitPrice) {
price = priceGenerator.next().value;
console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);
// 当generator生成的随机价格大于15时,反复执行打印the generator return 否则,执行buying
note: 用yield来控制程序的暂停执行。
destructuring析构表达式
通过表达式将对象或数组拆解成任意数量的变量。
function getStock() {
return {
code: 'IBM',
price: 100,
}
}
var { code, price } = getStock();
function getStock() {
return {
code: 'IBM',
price: {
price1: 200,
price2: 400
}
}
}
var { code: codex, price: { price1 } } = getStock();
针对数组的析构表达式
var array = [1,2,3,4];
var [number1, number2] = array;
console.log(number1 + ',' + number2); // 1, 2
var [, number1, ,number2] = array;
console.log(number1 + ',' + number2); // 2, 4
var [number1, number2, ...others] = array;
console.log(number1 + ',' + number2); // 1, 2
console.log(others); // [3, 4]
表达式和循环
箭头表达式: 用来声明匿名函数,消除传统匿名函数的this指针问题。
var myArr = [1,2,3,4,5,6];
console.log(myArr.filter(value => value % 2 == 0)); // [2,4,6]
function getStock(name: String) {
this.name = name;
setInterval(() => {
console.log('name is' + this.name);
}, 1000);
}
var stock = new getStock('IBM');
for…in:(循环的是数组的键值对的键key)for…in在循环中不可以break掉
var arr = [1,2,3,4];
arr.desc = 'four number';
for(var n in arr) {
console.log(n); // 0,1,2,3,desc
console.log(arr[n]); // 1,2,3,4,desc
} //
for…of: (循环的是数组的键值对的值value)for…of在循环中可以break掉
var arr = [1,2,3,4];
arr.desc = 'four number';
for(var n of arr) {
console.log(n); // 1,2,3,4
} //
for(var n of arr) {
if(n > 2) break; // 如果值大于2,则中断循环
console.log(n); // 1,2
} //