ts的基本类型

13 阅读5分钟
// 1. typescript是什么
// Typescript是由微软开发的一款开源的编程语言
// Typescript是Javascript的超集,遵循最新的ES5/ES6规范。TypeScript扩展了Javascript语法
// TypeScript更像后端Java、C#这样的面向对象语言可以让JS开发大型企业应用
// 越来越多的项目是基于TS的,比如VSCode、Angular6、Vue3、React16
// TS提供的类型系统可以帮助我们在写代码的时候提供更丰富的语法提示
// 在创建前的编译阶段经过类型系统的检查,就可以避免很多线上的错误
// 2. TypeScript安装和编译
// 2.1 安装
// npm i typescript -g
// tsc helloworld.ts
// 2.2
// 2.2.1 生成配置文件
// tsc --init生成tsconfig.json
// 2.2.2 执行编译
// tsc
// vue项目使用,npm install ts-loader typescript -D
// {
//     test: /.ts$/,
//     loader: "ts-loader",
//     exclude: /node-modules/
// }


// 1.基本类型
// 数字 字符串 布尔  数组 元组 any never void null undefined 枚举

// 类型都在冒号的后面,ts的核心一切都以安全为准
// 基本类型number
// 类类型Number,'ab'.toString(),'ab'会被包装成Number对象,然后再调toString()(这是装箱过程,js特性)
let num1: number = 1;
let num2: Number = 1; // num2表示是Number的实例,1也是Number的实例,类也可以当做类型
let num3: number = Number(1); // 强转,转完还是基础类型
let num4: Number = Number(1); // 1也是Number的实例
// let num5: number = new Number(1); // 被new Number包装后不能说成是number的实例,会报错,“number”是一个基元(基本类型),但“Number”是一个包装器对象。尽可能使用“number”。
let num6: Number = new Number(1);
let num7: Object = new Number(1); // js中,一切皆对象

// any与Object区别,想更多两者区别,可以浏览https://stackoverflow.com/questions/18961203/any-vs-object
let an: any; // 可以是任何东西(可以在其上调用任何方法等而不会出现编译错误)
let obj: Object; // 编译器只会让obj引用Object的成员,obj只能访问Object类中定义的函数和属性

let foo: Object;
let bar: any;
let num8: number = 1;
foo = num8; // Not an error
// num8 = foo; // ERROR

bar = num8;
num8 = bar;

// 基本类型,数字 字符串 布尔
let num: number = 1;
let str: string = 'zf';
let bool: boolean = true;


// 数组,一类类型的集合
const arr1: number[] = []
let d = arr1[0] // d是number类型

const arr2: (number | string)[] = ['a', 1]; // 并集的含义,const arr2: number | string[],这样写是错误的
let e = arr2[0] // e是string或number

const arr3: any[] = ['', 1, {}];
let f = arr3[0] // f是any类型

const arr4: Array<boolean> = [true, false];
let g = arr4[0] // g是boolean类型

// interface Array<T>{
//     [key:number]: T
// }

// 元组,ts中自己实现的,内容固定,类型固定,不是数组,跟数组很像,但编译之后时数组
const tuple: [string, boolean, number] = ['a', true, 1]; // 初始化时必须赋值,按照要求填入数据
let r = tuple.pop() // r的类型时string | number | boolean | undefined
tuple.push('str', 1, 2, 3);// 可以放入元组中定义的类型
// tuple[3] = 100; // 不能通过索引更改元组

// 枚举类型

// 1)普通枚举
const USER = Symbol('USER')
const ADMIN = Symbol('ADMIN')
enum ROLE { // 大写是规范,普通枚举会生成一个对象
    USER,
    ADMIN = 5, // 赋值为5后,会推导USER为0,MANAGER为6,不赋值,默认推导为0,1,2
    MANAGER
}
// 普通枚举可以反举
console.log(ROLE.USER)
console.log(ROLE[0])
// 只有赋值为数字才能支持反举
enum ROLE1 {
    USER = 'USER', // 此处不赋值为数字,下面推导不出来值,会报错
    // ADMIN,
    // MANAGER
}
// 会编译成
// var ROLE;
// (function (ROLE) {
//     ROLE[ROLE["USER"] = 0] = "USER";
//     ROLE[ROLE["ADMIN"] = 5] = "ADMIN";
//     ROLE[ROLE["MANAGER"] = 6] = "MANAGER";
// })(ROLE || (ROLE = {}));

// 2)常量枚举
// 常量枚举不支持反举
const enum ROLE2 { // 大写是规范,加上const成为常量枚举后,不会生成一个对象(能常量枚举就用常量枚举,打包后不会生成代码,减少代码体积)
    USER,
    ADMIN = 5,
    MANAGER
}
console.log(USER)
// 编译后只剩下 console.log(0 /* USER */)
// 枚举可以查看中文文档,https://www.tslang.cn/docs/handbook/enums.html,更详细

// null,undefined,是任何类型的子类型(前提时关闭严格模式),可以赋值给其它类型
// 此处会报错,Type 'undefined' is not assignable to type 'number',将tsconfig中的strictNullChecks改为false就不报错了(也可以将strict改为false,但strict时将所有严格校验关掉,太宽泛)
// 如果还报错,会提示Cannot redeclare block-scoped variable 'name',说明name跟ts基础模块里name重复
let name: number = undefined

// 在严格模式下,undefined只能赋值给undefined,null只能赋值给null
let u: undefined = undefined
let n: null = null


// never,代码无法达到的地方,是任何类型的子类型
// 出错,死循环,永远走不到的判断
function setVal(val: string) {
    if (typeof val === 'string') {

    } else {
        val // never // 帮我们代码做完整校验,走不到else中,val就是never
    }
}
function throwError(): never {
    throw new Error()
}
function whileTrue(): never {
    while (true) { }
}

// void,表示函数返回值的,也可以描述变量
// void的值只能赋予null和undefined
let o: void = undefined
let p: void = null // 严格模式下,不能将null赋值,"strictNullChecks": true
// 只能把null和undefined赋给void
// 严格模式下,不能把null,赋予给void类型
function getVoid(): void { // 接口中定义类中原型方法的void,表示不关心返回值类型,在实现的时候可以在次确定类型,函数是确定死了
    return  // 严格模式下,这里不能返回null
}

// object
// object表示非原始类型(与Object的区别,Object包括原始类型),也就是除number,string,boolean,symbol,null或undefined之外的类型。
function create(obj: object) { // 后面泛型约束,会大量使用object类型

}
create({});
create(function () { })
create([]);
create(123) // 报错,Argument of type 'number' is not assignable to parameter of type 'object'.


// Symbol,BigInt,js的类型 用的不多
let s1: symbol = Symbol(1);
let s2: symbol = Symbol(2);
console.log(s1 === s2); // 不相等

// BigInt,es11语法
// BigInt 是一种内置对象,它提供了一种方法来表示大于 253 - 1 的整数。
// 这原本是 Javascript中可以用 Number 表示的最大数字。
// BigInt 可以表示任意大的整数。
let max = Number.MAX_SAFE_INTEGER
let r1: bigint = BigInt(max);
console.log(max + 1 === max + 2) // true
console.log(BigInt(max) + BigInt(1) === BigInt(max) + BigInt(2)) // false