TypeScript学习笔记一

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掉

扫描二维码关注公众号，回复： 3915560 查看本文章

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
} //

TypeScript学习笔记一

猜你喜欢