TypeScript入门-声明与构造、函数

进修Angular 2 , 《揭秘Angular 2》读书笔记。Angular2 挑选 TypeScript 作为其官方最主要的构建语音,这意味着控制 TypeScript 语音将更有利于高效地开辟 Angular 运用。

声明和构造

在TypeScript 中,支撑var、let 和 const 如许的声明体式格局。

let 声明

let 与 var 声明变量的写法类似,示例代码以下:

let hello = "Hello Angular";

不同于var, let 声明的变量旨在块级作用域内有效,示例代码以下:

function f(input: boolean) {
    let a = 100;
    if(input) {
        let b = a + 1; // 运转准确
        return b;
    }
    return b; // 毛病, b没有被定义
}

这里定义了两个变量 a 和 b ,a 的作用域是在f()函数体内,而b是在if这个语句块中。块级作用域另有几点须要注重的:

  • 不能在它的声明之前被读取或赋值

  • 在一样的作用域中,let 不允许变量被反复声明

还须要注重 let 声明在下面两种函数入参的对照:

function funA(x) {
    let x = 100;    // 报错,x已经在函数入参声明
}

// 增加了推断前提构成的新的块级作用域
function funB(condition, x) {
    if(condition) {
        let x = 100;     // 运转一般
        return x;
    }
    return x;    
}

funB(false, 0);    // 返回 0
funB(true, 0);    // 返回 100

const 声明

const 声明与 let 声明类似,它与 let 具有雷同的作用域划定规矩,但 const 声明的是常量,常量不能被从新赋值。然则假如定义的常量是对象,对象里的属性值是能够被从新赋值的。示例代码以下:

const CAT_AGE = 9;

const cat = {
    name: 'kitty',
    age: CAT_AGE
}
// 毛病
CAT_AGE = 10;
// 毛病
cat = {
    name: 'Danie',
    age: CAT_AGE
}

cat.name = "Jason";    // 准确

解构

解构是ES6中一个主要特征。解构就是将声明的一组变量与雷同构造的数组或许对象的元素数值一一对应,并将变量相对应元素举行赋值。

在 TypeScript 中支撑数组解构和对象解构。

数组解构

数据构造是最简朴的解构范例,示例代码以下:

let input = [1, 2];
let [first, second] = input;
console.log(first); // 相当于 input[0]: 1;
console.log(second); // 相当于 input[1]: 2

// 也可作用于已声明的变量:
[first, second] = [second, first];    // 变量变更

// 或作用于函数参数
function f([first, second] = [number, number]) {
    console.log(first + second);
}
f([1, 2]);    // 输出 3

偶然,我们会看到如 let[first, …rest] 运用 “…” 如许的语句,“…” 三个一连小数点示意的是睁开操纵符,用于建立可变长的参数列表,运用起来异常轻易,示例代码以下:

let [first, ...rest] = [1, 2, 3, 4];
console.log(first);    // 输出 1
console.log(rest);    // 输出 [2, 3, 4];

对象解构

对象解构让我们的代码越发简约,可读性强,示例代码以下:

let test = { x: 0, y: 10, z: 20 };
let {x, y, z} = test;
console.log(x, y, z);    // 输出 0, 10, 20

函数

函数定义

在TypeScript中支撑函数声明和函数表达式的写法,示例代码以下:

// 函数声明写法
function maxA(x: number, y: number): number {
    return x > y? x : y;
}

// 函数表达式写法
let maxB = function(x: number, y: number): number {
    return x > y? x : y;
}

在上例中,参数范例和返回值范例这两部分都会被搜检。在挪用时,只做参数范例和个数的婚配,不做参数名的校验。

可选参数

在 TypeScript 中,被调函数的每一个参数都是 必传 的,也就是说通报给函数的参数个数必需和函数定义时的参数一致,示例代码以下:

function max(x: number, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 报错
let result2 = max(2, 4);    // 一般

然则,在实际开辟中,我们须要依据实际状况来决议是不是传入某个参数的状况,TypeScript 也供应了可选参数语法,即在参数名旁边加上 ? 来使其变成可变参数,须要注重的是,可选参数必需位于必选参数的 背面 ,示例代码以下:

function max(x: number, y?: number): number {
    if(y) {
        return x > y? x: y;
    } else {
        return x;
    }
}
let result1 = max(2);    // 一般
let result2 = max(2, 4);    // 一般
let result3 = max(2, 4, 7);    // 报错

默许参数

TypeScript 还支撑初始化默许参数,假如函数的某个参数设置了默许值,当该函数被挪用时,假如没有给这个参数传值或许传的值为 undefined 时,这个参数的值就是设置的默许值,示例代码以下:

function max(x: number, y = 4): number {
    return x > y? x: y;
}

let result1 = max(2);    // 一般
let result2 = max(2, 4);    // 一般
let result3 = max(2, undefined);    // 一般

带默许值的参数没必要放在必选参数背面,但假如默许值参数放到了必选参数前面,用户必选显式地传入 undefined, 示例代码以下:

function max(x = 2, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 报错
let result2 = max(undefined, 4);    // 一般
let result3 = max(2, 4);    // 一般

盈余参数

当我们须要同时操纵多个参数,或许不知道会有多少个参数通报进来的时刻,就须要用到 TypeScript 里的盈余参数。示例代码以下:

function sum(x:number, ...restOfNumber:number[]): number {
    // 是不是是以为...迥殊熟习,就是上面说的睁开操纵符
    let result = x;
    for(let i = 0; i < restOfNumber.length; i++) {
        result += restOfNumber[i];    
    }
    return result;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result);    // 输出 15

函数重载

函数重载是经由过程为同一个函数供应多个函数范例定义来到达完成多种功用的母的。TypeScript 能够支撑函数的重载,示例代码以下:

function css(config: {});
function css(config: string, value: string);

在上面的例子种,这个函数有2种重载要领,编译器会依据参数范例来推断该挪用哪一个函数。TypeScript 的函数重载经由过程查找重载列表来完成婚配,因而,在完成重载要领时,发起将最准确的定义放在最前面。

    原文作者:wuweisen
    原文地址: https://segmentfault.com/a/1190000008909822
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞