ts 类型定义及相关介绍

578 阅读2分钟
  • 以下所有的声明都可通过官方提供的 转换查看

  • 基础类型

  • 布尔类型,可以不给初始化赋值,几种写法如下

let bool1: boolean
let bool2: boolean = false
let bool3: boolean
bool3 = true
console.log(bool2, bool3)
  • 数值类型
let phone: number = 12
phone = 0x7b
console.log(phone)
  • 字符类型
let str: string
str = 'hello world'
str = `str是${str}`
  • 数组类型。可以指定数组中是各种你想要的类型
let arr1: number[]
arr1 = [1, 2, 3]

let arr3: Array<string>
arr3 = ['a', 'b', 'c']

let arr4: (string | number)[]
arr4 = [1, 'a']
console.log(arr1, arr3, arr4)

  • 元组类型 数组的扩展,固定长度,固定位置上的类型
let tuple: [string, number, boolean]
tuple = ['a', 1, true]
  • 枚举类型,默认是枚举从0开始 SUPER_ADMIN:0,ADMIN:1, USER:2
enum Roles {
    SUPER_ADMIN,
    ADMIN,
    USER
}
// 可以指定具体枚举
enum Roles1 {
    SUPER_ADMIN = 2,
    ADMIN = 4,
    USER = 6
}

let roles: number = 0
// 具体的枚举需要做的擦操作更方便处理了
if (roles === Roles.SUPER_ADMIN) {
    console.log('roles 和 Roles.SUPER_ADMIN相等了呀')
}
console.log(Roles.SUPER_ADMIN, Roles.ADMIN, Roles.USER)
console.log(Roles1.SUPER_ADMIN, Roles1.ADMIN, Roles1.USER)
  • any 任何类型
let anything: any
anything = 1
anything = 'hello'
anything = true

const arr5: any[] = [1, '2', true]

  • void类型 给函数指定返回值类型
const consoleTxt = (text: string): void => {
    console.log(text)
}
consoleTxt('are you ready?')

let v: void
v = undefined
  • undefined and null 类型
let u: undefined = undefined
let n: null = null
  • never 类型 根本不可能有返回值,(标示永远不存在的值的类型),never 类型可以赋值给其他任意类型,但是没有任意类型可以是never的子类型
  • 除了never类型的值,其他任意类型都不可以

相关情况介绍

// 排错的情况
const errFun = (message: string): never => {
    throw new Error('sorry it is error')
}
// 死循环的情况
const infineFun = (): never => {
    while (true) { }
}

let neverVariable = (() => {
    throw new Error('sorry it is error')
})


温馨提示

/**
 * 基本类型都是直接存值的
 * object 对象在内存地址中的引用
 * 如下把对象赋值给obj1其实是存储的对象在内存地址中的引用
 */
let obj1 = {
    name: 'zhangsan'
}
let obj2 = obj1
obj2.name = '小明'
console.log(obj1, obj2)

// void 是声明函数没有指定返回值

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

// 类型断言 => 有点像是类型转换,通过一种特定的语法把某个值前行指定为我门想要的类型

// 正常写法为
const getLength = (target: string) => {
    if (target.length || target.length === 0) {
        return target.length
    } else {
        return target.toString().length
    }
}

/**
 * 注意如下代码,number是没有length属性一说的,所以这是就需要用到我们的类型断言,写法如下
 * 这里你会看到每一个变量我们都使用了类型断言的转换,当我们有很多的时候,肯定不想这么每一个都使用
 * 所以别急,接下来就会有高级的用法介绍
 */
const getLength1 = (target: string | number) => {
    if ((<string>target).length || (target as string).length === 0) {
        return (<string>target).length
    } else {
        return target.toString().length
    }
}

// 注意:类型断言写法 <string>target || target as string
// react 中的 jsx语法只能使用 target as string 这种写法,因为<string>target jsx会识别为一种标签