Typescript 第一天

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

typescript开发相关配置我们这里就不展开了，这里我们主要针对基础知识进行学习和探讨。

数据类型

TS中冒号后面都为类型标识

布尔、数字、字符串类型

let isEqual: boolean = true
let name: string = 'zqh'
let num: number = 1

元组类型

元组比较有意思的特点就是类型要一一对应，限制长度个数

//错误示范

1.let tuple:[string,number,boolean] =[1,2,true]
// 不能将类型“number”分配给类型“string”

2.let tuple:[string,number,boolean] =['1',2]
//不能将类型“[string, number]”分配给类型“[string, number, boolean]”。源具有 2 个元素，但目标需要 3 个

//正确示范
let tuple:[string,number,boolean] =['1',2,true]

let tuple:[string,number,boolean]
tuple[0]='1'

元组添加数据时只能添加存在的类型

let tuple:[string,number] =['1',2]

//正确示范
tuple.push('zqh')

//错误示范
tuple.push(true)
//类型“boolean”的参数不能赋给类型“string | number”的参数。

数组类型

数组这里定义比较灵活种类也比较多，我们一一列举一下。

最简单的方法是使用类型 + 方括号来表示数组：

let numArr:number[]=[1,2,3]
let strArr:string[]=['1','2','3']

2.用泛型表示数组（泛型我们在后续章节讲解）

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

3.联合类型声明数组（联合类型我们在后续章节讲解）

let numArr:(number|string)[]=[1,2,3,'4']
let numArr:Array<number|string> = [1,2,3];

4.接口声明数组

interface IndexArr {
    [key: number]: number | string
}
let numArr: IndexArr = [1, 2, 3, '4']

5.类数组声明

通常类数组都有自己得接口，如IArguments, NodeList, HTMLCollection等

function add() {
    let args: IArguments = arguments
}

IArguments的接口实现源码

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

枚举类型

常量枚举


enum Role{
    User,
    Admin,
    Super
}
//es5转义后代码，
var Role;
(function (Role) {
    Role[Role["User"] = 0] = "User";
    Role[Role["Admin"] = 1] = "Admin";
    Role[Role["Super"] = 2] = "Super";
})(Role || (Role = {}));
//证明枚举类型可以枚举，也可以反举，什么意思呢看下面代码
console.log(Role.User)// 打印0
console.log(Role[0])//打印User

2.异构枚举

enum Role{
    User='user',
    Admin=1,
    Super
}

any类型

简单理解就是不做任何类型检查，实际就是跟js写法一样了，失去了ts类型校验的意义了

let arr:any = ['1',true,{name:'zqh'}]

null 和 undefined类型

就是任何类型的子类型，如果strictNullChecks的值为true，则不能把null 和 undefined付给其他类型 1.关闭strictNullChecks时，无任何报错

let a: number | string | boolean | number[]

a = null
a = undefined

2.打开strictNullChecks时，有报错

let a: number | string | boolean | number[]

a = null
//不能将类型“null”分配给类型“string | number | boolean | number[]”。
a = undefined
//不能将类型“undefined”分配给类型“string | number | boolean | number[]”

void类型

只能接受null,undefined。一般用于函数的返回值，如果strictNullChecks的值为true，则不能把null给void

let a:void;
a = undefined;
a = null;
//第一种
function a(): void {
    return undefined
}
//第二种
function a(): void {
}

Never类型

任何类型的子类型,never代表不会出现的值。不能把其他类型赋值给never 简单举例说明一下，该类型不常用

//1.直接抛出错误
function error(message: string): never {
    throw new Error("err");
}
//2.死循环
function loop(): never {
    while (true) { }
}
//3.函数参数类型保护(正常只能传入number或者string)
function fn(x:number | string){
    if(typeof x == 'number'){

    }else if(typeof x === 'string'){

    }else{
        console.log('never'); // never
    }
}
fn(loop())
或者
fn(true as never) //类型断言后面章节解释

Symbol类型

Symbol表示独一无二

const s1 = Symbol('key');
const s2 = Symbol('key');
console.log(s1 == s2); // false

BigInt类型

BigInt需要配置tsconfig中lib引入ESNext库

const num1 = Number.MAX_SAFE_INTEGER + 1;
const num2 = Number.MAX_SAFE_INTEGER + 2;
//Number.MAX_SAFE_INTEGER 的最大安全界限为2**53-1，num1和num2都超出最大界限所以值相等
console.log(num1 == num2)// true

//为了解决该问题我们采用BigInt类型去解决
let max: bigint = BigInt(Number.MAX_SAFE_INTEGER)
//正确示范
console.log(max + BigInt(1) === max + BigInt(2))
或者
console.log(max + 1n === max + 2n)// 需更改tsconfig中target为es2020否则会报错

//错误示范
console.log(max +1 === max + 2)
//运算符“+”不能应用于类型“bigint”和“1”

特别注意 number类型和bigInt类型是不兼容的

let foo:bigint;
let bar:number;
foo=bar
//不能将类型“number”分配给类型“bigint”
bar=foo
//不能将类型“bigint”分配给类型“number”

Object类型

object表示非原始类型

function fn(o: object): void {}
fn({})
fn([])
fn(function() { })

总结：越觉得简单的东西越要去学习了，什么都是需要打牢根基的。期待大家多多提出意见和不足之处互相成长

Typescript 基础类型深入