淘先锋技术网

首页 1 2 3 4 5 6 7

TypeScript

基础类型

序号数据类型关键字描述
1任意any声明为 any 的变量可以赋予任意类型的值。
2数值number双精度 64 位浮点值。它可以用来表示整数和分数。
3字符串string一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
4布尔boolean表示逻辑值:true 和 false。
5数组声明变量为数组。
6元组元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
7枚举enum枚举类型用于定义数值集合。
8voidvoid用于标识方法返回值的类型,表示该方法没有返回值。
9nullnull表示对象值缺失。
10undefinedundefined用于初始化变量为一个未定义的值
11nevernevernever 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

注意:TypeScript 和 JavaScript 只有数值型,没有整数类型与浮点类型。

Any 类型

任意值(Any)用来表示允许赋值为任意类型。

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。

1.变量存储类型不明确,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查,示例代码如下:

let val: any = 100;    // 数字类型
val = 'Hello';         // 字符串类型
val = false;           // 布尔类型

2.变量类型在未来将变更,任意值允许在编译时可选择地包含或移除类型检查,示例代码如下:

let x: any = 4;
x.ifItExists();    // 正确,ifItExists方法在运行时可能存在,但这里并不会检查
x.toFixed();    // 正确

3.定义存储各种类型数据的数组时,示例代码如下:

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

数值类型

和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

使用 number 定义数值类型:

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

字符串类型

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样,我们使用string表示文本数据类型。 和JavaScript一样,可以使用双引号(")或单引号(')表示字符串。

使用 string 定义字符串类型:

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;

布尔类型

布尔类型是最基本的数据类型就是简单的true/false值,在 TypeScript 中,使用 boolean 定义布尔值类型:

let isDone: boolean = true;

数组类型

TypeScript像JavaScript一样可以操作数组元素。 在 TypeScript 中,数组类型有多种定义方式,比较灵活。

「类型 + 方括号」表示法:

let arr: number[] = [];
let arr: number[] = [1, 2];
​
let arr: number[] = [1, '2'];
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

数组泛型,Array<元素类型>

let arr: Array<number> = [1, 2];

元组

元组(Tuple)类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

比如,你可以定义一对值分别为string和number类型的元组。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

枚举

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值。 例如,我们将上面的例子改成从1开始编号:

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

或者,全部都采用手动赋值:

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

void

JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数:

function hello(): void {
    alert("Hello Runoob");
}

Null和Undefined类型

在 TypeScript 中,undefinednull两者各自有自己的类型分别叫做undefinednull

let u: undefined = undefined;
let n: null = null;

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

Never

never类型表示的是那些永不存在的值的类型。 例如,never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使any也不可以赋值给never。

下面是一些返回never类型的函数:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

函数

函数定义

和JavaScript一样,TypeScript函数可以创建有名字的函数、匿名函数和箭头函数。

语法格式如下所示:

1.命名函数

function func_name([param1, parma2,…param n])
{
    // 执行代码
    [return value;]
}

2.匿名函数

var func_name = function ([param1, parma2,…param n]){
    // 执行代码
    [return value;]
}

3.箭头函数

var func_name = ([param1, parma2,…param n]) => {
    // 执行代码
    [return value;]
}

函数调用

函数只有通过调用才可以执行函数内的代码。

语法格式如下所示:

func_name()

函数定义类型

函数参数定义类型

命名函数

function func_name( param1 [:datatype], param2 [:datatype]) { ... }

匿名函数

var func_name = function( param1 [:datatype], param2 [:datatype] ) { ... }

箭头函数(lambda函数):表达式的语法比函数表达式更短。

var func_name = ( param1 [:datatype], param2 [:datatype] ) => { ... }
参数描述
param1、param2为参数名
datatype为参数类型

函数返回值定义类型

语法格式如下所示:

function func_name():return_type {
    // 语句
    return value;
}
参数描述
return_type返回值的类型

注意:返回值的类型需要与函数定义的返回类型(return_type)一致。

function sum (x: number, y: number): number{
    return x+y;
}

函数完整语法格式

function func_name (param1 [:datatype], param2 [:datatype]):return_type { ... }
let func_name: (param1 [:datatype], param2 [:datatype]) => return_type = function(x , y){ return x + y; };

可选参数

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。

function getName (firstName: string,lastName: string) :string {
    return firstName + " " + lastName;
}
​
getName('Dwayne','Johnson');  // 正确
getName('Dwayne');  // 错误 缺少参数
getName('Dwayne','Johnson','hi') //错误 多了参数

可选参数语法格式:

function func_name(param[?:type]) {
}

示例:

function getName(firstName: string, lastName?: string): string {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}
​
getName('Li', 'Si')// 正确  Li Si
getName('Nico') // 正确 Nico

注意:可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。如果都是可选参数就没关系。