TypeScript学习第二天(认识ts的数据类型)


目录

  • 1,类型总览
  • 2,基本类型
    • 2.1,布尔
    • 2.2,数字
    • 2.3,字符串
    • 2.4,Null
    • 2.5,undefined
    • 2.6,symbol
    • 2.7,bigint
  • 3,引用类型
    • 3.1,数组 Array
    • 3.2,对象 Object
    • 3.3,函数 Function
  • 4,TypeScript新增类型
    • 4.1,元祖 Tuple
    • 4.2,枚举 enum
    • 4.3,Any
    • 4.4,Void
    • 4.5,Never
    • 4.6,Unknown
    • 4.7,字面量

1,类型总览
类型 例子 描述
number 1、2、3 任意数字
string 'xxx' 任意字符串
boolean true / false 布尔值
undefined const n: undefined = undefined 一个没有被赋值的变量
null const n: null = null 尚未创建的对象
object { name: '' } 任意对象
array [1, 2, 3] 任意数组
Symbol let n: symbol = Symbol('k') 表示独一无二的值
BigInt let n: bigint = BigInt(9007199254740991) 内置对象 表示大于253 - 1的整数
字面量 let a:'hello' = 'hello' 其本身
any 任意值 任意类型的值
unknown 任意值 安全类型的any
void let a: void = undefined 没有值或者undefined
never (): never => {} 永不存在的值
tuple [1, 2, 3] 元组 固定值和长度的数组
enum enum Color {Red, Green} 枚举 用于取值被限定在一定范围内的场景
2,基本类型 2.1,布尔
let isDone: boolean = false

2.2,数字
let isNum: number = 6

2.3,字符串
let name: string = 'bob' name = 'smith' let name2: string = `Genez${name}`

2.4,Null
let n: null = null

2.5,undefined
const n: undefined = undefined

2.6,symbol
let n: symbol = Symbol('k')

2.7,bigint
let n: bigint = BigInt(9007199254740991)

3,引用类型 3.1,数组 Array
  • 声明方式一
let list: number[] = [1, 2, 3]

  • 声明方式二
let list: Array = [1, 2, 3]

  • 多类型数组
const arr1: (number | string)[] = [1, 'string', 2] const arr2: Array = [1, 'string', null]

  • 使用type约束的数组
type T = number | string const arr: Array = [1, '张三']

  • 使用interface约束的对象数组
interface Item { id: number name: string isDad: boolean } const objectArr: Array = [{ id: 1, name: 'demo', isGod: true }]

3.2,对象 Object
  • 普通对象
const n: object = { value: '', size: 20 }

  • interface定义
interface Hero { name: string age: number skill: string skinNum?: number say(): string // say函数返回值为 string [keyName: string]: any // 当前Hero可定义任意字符串类型的key }const t:Hero = { name: '999', age: 20, skill: '', say() { return '' }, kkk: '' }

  • type定义
type Hero = { name: string age: number skill: string skinNum?: number }

  • 任意类型
interface AnyObject { [key: string]: any }const t:AnyObject = { name: '999', age: 20, skill: '', kkk: null, aaa: undefined }

3.3,函数 Function
  • 普通定义函数
function fn(name: string, size: number, state?: number, text: string = '', ...param: number[]):object { return { name, size } }

  • 箭头函数
const fn2: (a: number, b: string) => string = function (a:number, b:string): string { return '' }

  • 无返回值
const fn2: (a: number, b: string) => void = function (a:number, b:string): void { console.log(a, b) }

  • 使用interface定义函数
interface SearchFn{ (param1: string, param2: string): boolean }const fn3:SearchFn = function(param1, param2) { return param1 === param2 }

  • 不确定参数个数
function pu(array: any[], ...items: any[]) { items.forEach(function(item) { array.push(item); }); } let a = []; pu(a, 1, 2, 3);

4,TypeScript新增类型 4.1,元祖 Tuple 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,赋值的类型、位置、个数需要和定义(生明)的类型、位置、个数一致。
元组最重要的特性是可以限制数组元素的个数和类型,它特别适合用来实现多值返回,用于保存定长定数据类型的数据。
  • 例子
let uple: [string, string, number] = ["zed", "darts", 25]

  • 可选元素
let uple: [string, string, number?] = ["zed", "darts"]

  • 不定个数
type RestTupleType = [number, ...string[]] let restTuple: RestTupleType = [666, "Semlinker", "Kakuqo", "Lolo"]

  • 只读
const point: readonly [number, number] = [10, 20]

4.2,枚举 enum 使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。
  • 例子
enum Enum { A, B, C } console.log(Enum.A) // 打印出 0 console.log(Enum.B) // 打印出 0

  • 设置初始值
enum Enum { A = 8, B, C } console.log(Enum.A) // 打印出 8 console.log(Enum.B) // 打印出 9

  • 字符串枚举,每个都需要声明
enum Enum { A = "8号", B = "9号", C = "10号" } console.log(Enum.A) // 打印出 8号

4.3,Any 在编程阶段还不清楚类型的变量指定一个类型,可以使用 any类型来标记这些变量
  • 例子
let notSure: any = 4 notSure = false notSure = ''let list: any[] = [1, true, "free"] list[1] = 100

4.4,Void void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是void
  • 例子
function warnUser(): void { console.log("xxxxxxxxx"); }// 只能为它赋予undefined和null let unusable: void = undefined

4.5,Never never类型表示的是那些永不存在的值的类型,抛出异常或者是死循环
  • 例子
// 异常 function err(msg: string): never { // OK throw new Error(msg); }// 死循环 function loopForever(): never { // OK while (true) {}; }

4.6,Unknown unknownany一样,所有类型都可以分配给unknown。与any的最大区别是: 任何类型的值可以赋值给any,同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它,但它只能赋值给unknownany
  • 例子
let notSure: unknown = 4; let uncertain: any = notSure; // OKlet notSure: any = 4; let uncertain: unknown = notSure; // OKlet notSure: unknown = 4; let uncertain: number = notSure; // Error

4.7,字面量 使用一个字符串字面量类型作为变量的类型
  • 例子
let hello: 'hello' = 'hello'; hello = 'hi'; // 报错

如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END
PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦
TypeScript学习第二天(认识ts的数据类型)
文章图片

公众号
TypeScript学习第二天(认识ts的数据类型)
文章图片

往期文章
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • 超详细!Vue-Router手把手教程
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 微信小程序实现搜索关键词高亮
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
【TypeScript学习第二天(认识ts的数据类型)】个人主页
  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

    推荐阅读