TypeScript 中的常用类型声明大全

这篇具有很好参考价值的文章主要介绍了TypeScript 中的常用类型声明大全。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上一章节,我们介绍了什么是TS,以及TS的应用场景。本章节将给大家介绍,在TypeScript 中,常用的数据类型声明,有我们熟悉的 基本数据类型,也有,一些TypeScript 新增的一些,语法规范类型。出发吧…

TypeScript 中的常用类型声明大全,TypeScript,typescript,javascript,前端

基本数据类型

1.number类型

let variable: number = 123   //为变量 指明 类型,后续,如果要对此变量 从新赋值,则赋值数据类型只能为声明时的类型。
variable = 789
console.log(variable);


let a: number = 10; //十进制
//下面这些赋值也属于 number
a = 0b1010; //二进制
a = 0o12;  //八进制 
a = 0xa;   //十六进制
a = NaN;
a = Infinity;


2.String 类型

let variable: string = "字符串"
variable = "前端开发"
console.log(variable);

3. Boolean 类型

let variable: Boolean = false;
variable = true
console.log(variable);

函数:同样的,也可以给函数限制 接受形参的类型和,限制返回值的数据类型

function num(a: number, b: number): number {
    return a + b
}
let type = num(12, 123)
console.log(type);

小提示:如果 声明变量和赋值同时进行,TS可以自动进行类型判断,以你给他的初始数据类型为,变量数据类型。


4. undefined 类型

let u: undefined = undefined

5.Null类型

let n: null = null

undefined 和 null ,还可以作为其他类型的子类型,把 undefined 和null 赋值给其他类型的子类型。如:

let u: number = undefined
let s: string= undefined

注意:实际开发中,undefined 和 null 两种类型,使用场景并不多

6.Symbol类型

let s: symbol = Symbol(789456)

7.BigInt类型

let b: bigint = BigInt(4586541531351356);

TypeScript 中的常用类型声明大全,TypeScript,typescript,javascript,前端


引用数据类型

8.Array 类型

 let arr:string[]
 arr=["张三","李四"]
 
 let arr: number[]
 arr = [1, 2]
 
 //泛型写法
let arr: Array<number>

9.Object 类型

object 表示非原始数据类型。除了 number,string,boolean 类型之外的其他类型。

let obj: object = {}

//不支持 number,string,boolean 类型字面量直接赋值,但是可以 通过下面的 
//new 实例化,或者 直接赋值 类 定义
obj = null;
obj = undefined;
obj = []
obj = new Number();
obj = Number
obj = new String();
obj = String

TS 新增特性数据类型

4.联合类型

let variable: string | number
variable = 123
variable = "asdfassf"
variable = false         //XXXXXX.这里不能赋值为 Boolean  值,因为声明变量时,指定了类型范围

5.字面量类型

let variable: "男" | "女"
variable = "男"
variable = "女"
variable = "你好呀"        //XXXXXX  这里也会报错,因为声明时,也指定了,赋值范围,只能为  “男”或“女” 的字符串

6.Any 类型

any 相当于就是TS 关闭了数据类型检查,可以赋值任意类型,但是TS 中,不建议使用。

let variable: any

variable = 123
variable = "字符串"
variable = false
variable = {}

type name = "vue" | "react"

let a: name = "react"; //a 只能是字面量值中的其中一个

警告:当any 类型的变量,当成参数赋值给其他类型变量的时候,如果,两个变量类型不匹配,也不会报错,会埋下安全隐患!

let variable: any
variable = 123

let str: string
str = variable
console.log(str);   //不会报错

7.unknown 类型

unknown 类型和any 同理,只是会在,两个变量互相赋值的时候,会做类型校验,相当于是any 的 安全锁

8.Void 类型

void 类型多用于函数,,表示没有任何返回值的函数,只要有返回值,就会报错

function fn():void{
    return undefined
}
function fn():void{
    return 
}

9.never 类型

同 void ,表示完全没有返回值,连 undefined 都不能返回

function fn():never{
    throw new Error('终止')
}

10.对象类型

let obj: { name: string, }
obj = { name: "张三" }    //声明一个对象,给对象赋值的时候,有且只能有,name 定义好的字段,且类型必须相同

let obj: { name: string, age?: number }     //定义参数时,在后面加上 ?  代表这是非必要参数,赋值时,可以不用传
obj = { name: "张三" }



let obj: { name: string, [key: string]: any } 
obj = { name: "张三", age: 123 }        //这样定义代表,除name, 必须要 赋值外,其他的,任意key的值,也可以是 任意 类型。

//定义函数结构 类型
let fn: (a: number, b: number) => number

12 tuple (元组)

let arr: [number, string]  // 固定长度的数组,

//给数组赋值的的时候,类型的位置以及参数的个数要一一对应
arr = [123, "字符串"]         

arr.push(123)   //但是当调用数组身上的方法,进行动态传值的时候,不用限制特定的类型顺序和长度,
arr.push("字符串")   //只需要遵循,所添加的值类型必须为元组中所定义的。,因为在使用方法添加数据的时候,会把我们的定义为联合类型,从而规避类型检查。


13.enum (枚举)

enum num {   //创建一个枚举
    names = "张三",
    age = 123
}

let template: { name: num, age: num }

template = { name: num.names, age: num.age }

console.log(template);

总结:

本章节主要介绍了在 TypeScript 中,开启强制数据类型时的一些使用语法,,强制数据类型,也是TS 的初始概念,,本章节主要就介绍这么多了。下一章节我们将继续探索 TS的更多语法特性。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-600496.html

到了这里,关于TypeScript 中的常用类型声明大全的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(39)
  • 前端TypeScript学习day05-索引签名、映射与类型声明文件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)              目录 索引签名类型  映射类型 索引查询(访问)类型 基本使用  同时查询多个索引的类型  TypeScript 类型声明文件  概述 TS 的两种文件类型  类型声明文件的

    2024年02月08日
    浏览(48)
  • TypeScript入门指南:特性、安装配置、类型声明、编译选项、面向对象等详解

    了解TypeScript的特性、安装配置步骤、类型声明方式、编译选项及面向对象编程方法。适合初学者学习和实践。

    2024年02月12日
    浏览(50)
  • 【TypeScript】TS中type和interface在类型声明时的区别

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏: vue3+vite+typeScript从入门到实践 📢 资料领取:前端进阶资料可以找我免费领取 🔥

    2023年04月26日
    浏览(61)
  • TypeScript:为什么JavaScript需要类型检查?

    JavaScript是当今最为流行的编程语言之一。它是一种高级的、解释性的编程语言,用于Web应用程序的开发。然而,JavaScript的灵活性也是它的弱点之一。JavaScript中的变量、函数、类等都是动态类型,这意味着它们的类型可以在运行时发生变化。虽然这种灵活性为JavaScript开发人员

    2024年02月04日
    浏览(56)
  • TypeScript 常用的工具类型

    总结了常用的工具类型 用TS保证类型安全 AwaitedType 获取 Promise 中的结果类型 ReturnTypeType 获取函数的返回值类型. 用ReturnType ParametersType 获取函数的参数类型,将每个参数类型放进一个元组中。 用Parametes NonNullableType 去除类型中的null,和undefined OmitType, Keys 省略 移除一些属性, 用

    2024年02月07日
    浏览(59)
  • TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

    🎬 岸边的 风: 个人主页  🔥  个人专栏  : 《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ TypeScript: 扩展 JavaScript 数据类型,赋予编程更强大的表达能力! 在现代Web开发中, TypeScript 已经成为了一种备受欢迎的编程语言。它不仅继承了 JavaScript 的

    2024年02月09日
    浏览(47)
  • typeScript中的函数类型

    目录 1.函数声明 2.函数表达式 3.用接口定义函数的形状 4.可选参数 5.参数默认值  6.剩余参数 7.重载 函数是JavaScript应用程序的基础。它帮助你实现抽象层, 模拟类,信息隐藏和模块。在TypeScript里, 虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。

    2024年02月03日
    浏览(40)
  • 前端TypeScript学习day02-TS常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 常用类型 接口  元组  类型推论 类型断言 字面量类型 枚举 any 类型 typeof  当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到

    2024年02月08日
    浏览(52)
  • TypeScript 中的类型检查实用函数

    在前端开发中,我们经常需要判断变量的类型以进行相应的操作或处理。TypeScript 提供了基础的类型检查,但有时我们需要更复杂或更灵活的类型检查。这篇博客文章将介绍一组实用函数,用于各种常见的类型检查。

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包