TypeScript | 基础类型

58 阅读3分钟

一、布尔值

let b: boolean = false;

二、数字

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

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

三、字符串

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

四、数组

(一)方式一

在元素类型后面接上[]

let list:number[] = [1,2,3]

(二)方式二

使用数组泛型 Array<元素类型>

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

五、元组

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

// 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, 'number' does not have 'substr'

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

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

六、枚举

(一)数字枚举

当枚举的键名没有赋值的时,则默认值为0,1,2....

enum A1{
a1,
a2,
a3
}
console.log("debug===>a1",A1.a1)  // 0
console.log("debug===>a2",A1.a2)  // 1
console.log("debug===>a3",A1.a3)  // 2

手动赋值

 enum N1 {
      n1 = 1,
      n2 = 3,
      n3 = 5,
    }
    console.log('debug===>n1', N1.n1) // 1
    console.log('debug===>n2', N1.n2) // 3
    console.log('debug===>n3', N1.n3) // 5

可以通过枚举的值获取到它对应的名字,例如

console.log('debug===>', N1[3]) // n2 

(二)字符串枚举

enum S1{
s1 = '字符串1',
s2 = '字符串2',
s3 = '字符串3'
}
console.log("debug===>s1",S1.s1)  // 0
console.log("debug===>s2",S1.s2)  // 1
console.log("debug===>s3",S1.s3)  // 2

(三)数字+字符串的枚举

1、全部赋值

 enum NumString {
      a1 = 1,
      a2 = '嘻嘻嘻',
      a3 = 3,
    }
    console.log('debug===>a1', NumString.a1) // 1
    console.log('debug===>a2', NumString.a2) // '嘻嘻嘻'
    console.log('debug===>a3', NumString.a3) // 3
    console.log('debug===>', NumString[1]) // a1
    console.log('debug===>', NumString[2]) // undefined
    console.log('debug===>', NumString[3]) // a3

2、部分赋值

当其中某个数值的类型为数字时,若后面的没有赋值,则默认值为前者的值+1

enum NumString2 {
      a1 = 3,
      a2,
      a3 = 'mya3',
    }
    console.log('debug===>', NumString2.a1) // 3
    console.log('debug===>', NumString2.a2) // 4
    console.log('debug===>', NumString2.a3) // mya3
    console.log('debug===>', NumString2[1]) // undefined
    console.log('debug===>', NumString2[2]) // undefined
    console.log('debug===>', NumString2[3]) // a1

注意: 当有一个赋值为字符串,其后面的要是没有赋值就会报错,后面的同时需要赋值。

image.png

image.png

七、Void

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

function warnUser():void {
  console.log("no data return")
}

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

let unusbale: void = undefined

八、Null和Undefined

在TypeScript里,undefined和null两者都有自己的类型分贝叫做undefinednull

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

默认情况下 nullundefined是所有类型的子类型,就是说你可以把null和undefined赋值给number类型的变量。 然而、当你指定 --strictNullChecks标记,nullundefined只能赋值给void和它们各自。也许在某处你想传入一个string或者null或者undefined,你可以使用联合类型string | null | undefined

关于strictNullChecks具体可移步 juejin.cn/post/708162…

九、类型断言

当你使用一个值,但是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;

参考文档:www.tslang.cn/docs/handbo…