当前位置:

首页 > 网站开发 > JavaScript >

TypeScript（3）基础类型

基础类型

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

布尔值

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）

highlighter- JavaScript

let isDone: boolean = false;
console.log(isDone)
isDone = true;  // ok
// isDone = 2 // error

其中:boolean就声明变量isDone必须是布尔型，否则编译会报错，如果我们给isDone赋值为2，则会报错

数字

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

highlighter- JavaScript

let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
console.log(a1)
console.log(a2)
console.log(a3)
console.log(a4)

结果

highlighter-

字符串

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

highlighter- JavaScript

let firstName: string = "jkc";
console.log(firstName)
firstName = "jkc1";
console.log(firstName)

结果

highlighter-

jkc
jkc1

我们还可以使用模版字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围（ ），并且以${ expr }`这种形式嵌入表达式

highlighter- JavaScript

let firstName:string = 'jkc1'
firstName = 'jkc2'
let age:number = 18
const info = `My name is ${firstName}, I am ${age} years old!`
console.log(info)

结果

highlighter- CSS

My name is jkc2, I am 18 years old!

数组

TypeScript像JavaScript一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

highlighter- JavaScript

let list: number[] = [1, 2, 3];
let list1: string[] = ['1', '2', '3']
let list2: boolean[] = [true, false]
console.log(list)
console.log(list1)
console.log(list2)

第二种方式是使用数组泛型，Array<元素类型>：

highlighter- JavaScript

let list2: Array<number> = [1, 2, 3]
console.log(list2)

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string 和 number 类型的元组。

highlighter- JavaScript

let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error

当访问一个已知索引的元素，会得到正确的类型：

highlighter- JavaScript

console.log(t1[0].substring(1)) // OK
console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法

枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。

highlighter- Java

enum Color {Red, Green, Blue}

// 枚举数值默认从0开始依次递增
// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 1
console.log(myColor, Color.Red, Color.Blue)

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

highlighter- Java

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

或者，全部都采用手动赋值：

highlighter- Java

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

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：

highlighter- Java

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]

console.log(colorName)  // 'Green'

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量：

highlighter- JavaScript

// any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 也可以是个 boolean

在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

highlighter- Bash

let list: any[] = [1, true, 'free']

list[1] = 100

any类型可以随意更改里面的值的类型

void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

highlighter- JavaScript

function warnUser(): void {
    console.log("This is my warning message");
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

highlighter- JavaScript

let unusable: void = undefined;
unusable = null
unusable = 1 // error

Never

never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。
下面是一些返回never类型的函数：

highlighter- JavaScript

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API。例如：

highlighter- JavaScript

function getObj(obj: object):object {
    console.log(obj)
    return {
        name: "鸣人",
        age: 20
    }
}

getObj({name: '佐助'})
getObj({name: '卡卡西', age: 18})
getObj(null)
getObj(new String('123'))
getObj('123')  // 错误

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。其一是“尖括号”语法：

highlighter- JavaScript

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
`console.log(strLength)`

我们首先创建了一个any类型的变量someValue，然后使用<string>断言这个类型是不是string类型，如果不是则会输出undefined
另一个为as语法：

highlighter- JavaScript

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

类型推断

类型推断: TypeScript会在没有明确的指定类型的时候推测出一个类型
有下面2种情况:

定义变量时赋值了, 推断为对应的类型.
定义变量时没有赋值, 推断为any类型

highlighter- JavaScript

/* 定义变量时赋值了, 推断为对应的类型 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */
let b10  // any类型
b10 = 123
b10 = 'abc'

联合类型（Union Types）

联合类型（Union Types）表示取值可以为多种类型中的一种
需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

highlighter- JavaScript

function toString2(x: number | string) : string {
    return x.toString()
}

console.log(toString2('123'))
console.log(toString2(123))
let list: number[] = [1, 2, 3];
console.log(toString2(list)) // error

如果我们输入除number或者string类型，编译就会报错

需求2: 定义一个一个函数得到一个数字或字符串值的长度

javascript

// 定义一个getLength函数，传入的参数可以是number或者string类型
function getLength(str: number | string) {
    // str.length存在吗？如果存在也就说明str是string类型的
    if ((<string>str).length) {
        return (<string>str).length
    } else {
        // 此时说明str是number类型
        return str.toString().length
    }
}

console.log(getLength('123'))
console.log(getLength(12345678))