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} | 枚举 用于取值被限定在一定范围内的场景 |
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
unknown
与any
一样,所有类型都可以分配给unknown
。与any
的最大区别是: 任何类型的值可以赋值给any
,同时any
类型的值也可以赋值给任何类型。unknown
任何类型的值都可以赋值给它,但它只能赋值给unknown
和any
。- 例子
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(),有惊喜哦
文章图片
公众号
文章图片
往期文章
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
- CSDN
- GitHub
- 简书
- 博客园
- 掘金
推荐阅读
- 多线程学习第一课
- Mysql高级操作学习笔记:索引结构、树的区别、索引优缺点、创建索引原则(我们对哪种数据创建索引)、索引分类、Sql性能分析、索引使用、索引失效、索引
- Python全栈之学习JQuery
- Python中转换数据类型的函数
- Python数据结构之栈详解
- 分享源码学习技术|亲测-分享最新微信付费进群收费进群系统源码-附带搭建教
- 深度学习|yolov5安全帽检测、反光衣检测、抽烟检测
- 深度学习|关于添加注意力模块的yolov5-5.0与yolov5-6.0的检测效果对比
- 深度学习|yolov5-v6.1发布
- 深度学习|yolov5中使用denselayer替换focus,fpn结构改为bi-fpn