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

CoyPan 发布于2019-08-20 15:30 / 1008人阅读

摘要：声明和结构在中，支持和这样的声明方式。解构就是将声明的一组变量与相同结构的数组或者对象的元素数值一一对应，并将变量相对应元素进行赋值。

学习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 的函数重载通过查找重载列表来实现匹配，因此，在实现重载方法时，建议将最精确的定义放在最前面。

云服务器 GPU云服务器函数声明声明式函数提前声明函数复杂函数声明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82300.html

TypeScript快速入门

摘要：添加了可选的静态类型注意并不是强类型和基于类的面向对象编程。类类型接口示例接口更注重功能的设计，抽象类更注重结构内容的体现模块中引入了模块的概念，在中也支持模块的使用。一：Typescript简介维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delp...

moven_j 2019-08-22 11:11 评论0 收藏0
JavaScript => TypeScript 入门

摘要：为了由简入繁，不妨将这些类型划分为基本类型复合类型。以下将渐进式的对的这些类型进行了解。实际上，有一种属性描述对象，是通过获取的。但无论如何，类型检查是可以排除大部分错误的。在函数的类型声明中，继续来巩固这条规则的写法。几个月前把 ES6 的特性都过了一遍，收获颇丰。现在继续来看看 TypesScript（下文简称为 TS）。限于经验，本文一些总结如有不当，欢迎指正。概述官网有这...

Tonny 2019-08-21 17:27 评论0 收藏0
JavaScript => TypeScript 类入门

摘要：静态属性静态方法目前支持静态方法表示，类属性及静态属性目前作为提案还未正式成为标准。在中，抽象类不能用来实例化对象，主要做为其它派生类的基类使用。不同于接口，抽象类可以包含成员的实现细节。中也是这样规定的抽象类不允许直接被实例化。尝试重写在此之前，通过《JavaScript => TypeScript 入门》已经掌握了类型声明的写法。原以为凭着那一条无往不利的规则，就可以开开心心的...

geekidentity 2019-08-21 17:44 评论0 收藏0
TypeScript入门-基本类型

摘要：基本类型在中，提供了一下基本数据类型布尔类型数据类型字符串类型数组类型元组类型枚举类型任意值类型和类型类型其中元组枚举任意值类型和类型是有别与的特有类型。布尔类型布尔类型是最简单的数据类型，只有和两种值。学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更...

_ipo 2019-08-20 15:29 评论0 收藏0
TypeScript入门教程

摘要：现在，出现了更多本身支持或者通过插件支持语法智能提示纠错甚至是内置编译器的文本编辑器和。 TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行（语法糖） TypeScript提供了类型系统，规范类似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用担心TypeS...

Dr_Noooo 2019-08-26 11:52 评论0 收藏0