TS 学习笔记02 - TS 基础类型

B 站学习视频

TS 中包含11个基础类型 ， 加一个类型断言

可以借助 ts 官方的 playground 查看对应的 es5实现方式

基础类型赋值只能赋对应的类型值，否则会有红线报错

布尔类型

let bool: boolean = true

数值

let num: number = 333

num = 0b1101 ；num = 0o123;  num = 0x7a;  // 二进制  | 八进制 | 十六进制

字符串

let str: string = 'abc'

str = `total is ${num}`

数组

let arr: number[] = [1, 2, 3] // 指定 arr 为数组类型，且数组的值均为数值

let arr2: Array = [3, 4, 5]

let arr3: (string | number)[] = [2, 3, 'a']

元组

是对数组的拓展，固定长度，固定类型的值

let tuple: [string, number, boolean] = ['abc', 23, true]

若超出元组的固定长度，超出部分被称为越界元素，

2.6版本前，越界元素可以符合元组中的某个类型， 2.6版本后，不可以存在越界元素 

枚举值

enum Roles {SUPER, ADMIN, USER}

三种角色分别对应0，1，2三个默认的序列号，也可以自己进行定义

enum Roles {SUPER = 9, ADMIN = 4, USER = 3}

console.log(Roles.SUPER) ===>  9

console.log(Roles[3]) ===>  USER

ES5代码格式实现：

var Roles;
(function (Roles) {
    Roles[Roles["SUPER"] = 9] = "SUPER";
    Roles[Roles["ADMIN"] = 4] = "ADMIN";
    Roles[Roles["USER"] = 3] = "USER";
})(Roles || (Roles = {}));

控制台直接打印Roles实际的样子：

{3: "USER", 4: "ADMIN", 9: "SUPER", SUPER: 9, ADMIN: 4, USER: 3}

1. 3: "USER"
2. 4: "ADMIN"
3. 9: "SUPER"
4. ADMIN: 4
5. SUPER: 9
6. USER: 3
7. __proto__: Object

执行Roles["SUPER"] = 9操作的返回值是9，

any

let value: any 

当一个变量的值，不能确定数据类型，就可以使用 any ， 但是建议少用或不用

void

let text:void;

text = undefind;

text =null; // 如果此位置出现红线，原因在于 tsconfig.json中 "strict"配置项对此进行了限制

const consoleText = (text: string): void => {

    console.log(text) // 此时函数没有显式的返回值，返回值为 undefined

}

与 any 类型相反，表示没有类型，什么类型都不是？

null & undefined

let n:null = null;

let u: undefined = undefined

在 JS / TS中为两个基础数据类型，也是两个值

这两个类型为其他类型的子类型，即其他类型的值可以为 undefined 或者 null， 但是这两个类型之间不可以互换。

never

1. 报错类型 const errorFun = (message: string): never => { throw new Error(message)}
2. 死循环类型 const infiniteFun = (): never => {while(true){console.log(1)}}

指永远不存在的类型，never 是任意类型的子类型,

把一个变量定义为 never 类型，则该变量永远都没有值？该变量也不能是 const 关键字声明，const 声明的变量要求初始化时必须赋值。

object

function getObj(obj: object): void => {console.log(obj)}

obj类型变量存储的只是对象的引用

类型断言

const getLength = target => {

    if (target.length || target.length === 0){ return target.length} else {return target.toString().length}

}

const getLength = (target: string | number): number => {

    if ((target).length || (target as string).length === 0){ return (target).length} else {return target.toString().length}

}

定义方式：

1. target // 使用 jsx 语法时， 会被认为是标签格式，不能使用
2. target as string

类似于强制类型转化？写法比较冗杂，每个位置都要写，后面高阶类型有自定义类型保护。。后面学到再说吧。

 

以前准备面试的时候，经常被问到 JS 的数据类型， 现在有了 TS，11种数据类型。尽量以理解代替记忆吧。