TypeScript数据类型

ts几乎支持js所有的数据类型,并扩展了枚举方便我们使用。

1. 布尔值(boolean)

  和其它语言一样 true/false

let isDone:boolean = false;

2. 数字(number)

  和js一样,所有的数字都是浮点数,这些浮点数的类型是,支持二,十,十六,八 进制字面量

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744; 

3. 字符串

  像其它语言一样,使用string表示文本数据类型,和js一样可以使用双引号或单引号表示字符串

let name:string ='bob'
name='smith';

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

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;

  这与下面定义sentence的方式效果相同:

let sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";

4. 数组 ([])

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

let list: string[] = ["1", "2", "3"];

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

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

5. 元组

  元组类型允许表示一个 已知元素数量和类型 的数组,
  特点:1. 长度固定。2. 类型固定 3. 各元素的类型不必相同。
  比如,你可以定义一对值分别为string和number类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

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

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, x[1]的类型是数字,没有substr方法

  当访问一个越界的元素,会使用联合类型替代:

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

6. 枚举

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

enum Color { Red, Green, Blue };
/*
上面的代码编译成 js 后是一个函数
var Color;
(function (Color) {
  Color[Color["Red"] = 0] = "Red";
  Color[Color["Green"] = 1] = "Green";
  Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}))

这个函数会自执行,最后的结果相当于是一个对象
var Color = {
  0: "Red",
  1: "Green",
  2: "Blue",
  "Red": 0,
  "Green“: 1,
  "Blue": 2,
}
*/
let c: Color = Color.Green;

  默认情况下,从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;

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

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

  常数枚举 (用 const 来枚举)
常量枚举,不可更改编号

const enum Color { Red, Green, Blue} // 不可手动赋值,比如说 Red,它永远指向 0
console.log(Color.Red) // 0
// 编译成 js 之后,会进行优化,省略掉 函数。

7. 任意值

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

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

  在对现有代码进行改写的时候,any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。 你可能认为Object有相似的作用,就像它在其它语言中那样。 但是Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法:

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

  当你只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据:

let list: any[] = [1, true, "free"];
list[1] = 100;

8. 空值

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

function warnUser(): void { // 
    alert("This is my warning message");
}

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

let unusable: void = undefined;

9. null 空 、 undefined 未定义

  TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。 和void相似,它们的本身的类型用处不是很大:

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

  默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。
  然而,当你指定了 strictNullChecks : true 标记,null和undefined只能赋值给void和它们各自。 这能避免很多常见的问题。
  也许在某处你想传入一个string或null或undefined,你可以使用 联合类型 let n: string | null | undefined = null

10. 联合类型

联合类型(Union Type)表示取值可以为多种类型中的一种
为赋值时联合类型上只能访问两个类型共有的属性和方法

let name : string | number;
console.log(name.toString());
name = 3;
console.log(name.toFixed());
name = "ruhua";
console.log(name.length);

11. 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) {
    }
}

12. 类型断言

  有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
  通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。
  它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。
  类型断言有两种形式。 其一是“尖括号”语法:

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

  另一个为as语法:

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

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

12.1. 断言不为空 !

let root: HTMLElement | null = document.getElementById("root");
root!.style.color = "red" // !断言 root 不为空

13. 类型推论

  let num = 2; 此时虽然没有定义类型,但是TS,会根据现有条件,自行推论 num 是 number 类型,在之后的赋值动作中,也必须是 number 类型。
如果一开始未赋值let num;,TS 会认为是 any 类型,之后不管如何赋值,他都是 any 类型

14. 字面量类型

可以把 **字符串**、**数字**、**布尔值** 字面量组成一个联合类型
定义一个 color 类型,并且该类型下的变量只能赋值 "red" 或者 "green"
type color = "red" | "green";
let c1: color = "red";
let c2: color = "green";

// 换种写法
let color:"red" | "green";
color = "red";
color = "green"
  • 字符串字面量类型用来约束取值只能是某 几个字符串 中的一个,联合类型表示取值可以为 多种类型 中的一种
  • 字符串字面量 限定了使用该字面量的地方仅接受特定的值,联合类型 对于值并没有限定,仅仅限定值的类型需要保存一致。

15. 包装对象

类似 java c# 中的装箱和拆箱的概念
  1. 基本类型上没有方法
  2. 在内部迅速的完成一个装箱的操作,把基本类型迅速包装成对象类型,然后用对象来调方法
let name: string = "ruhua"
name.toLocaleLowerCase();
// 内部实现 ↓
let name: string = "ruhua"
let name1 = new String(name);
name1.toLocaleLowerCase();
posted @ 2019-12-11 17:49  真的想不出来  阅读(421)  评论(0编辑  收藏  举报