TypeScript第二天：如何掌握ts中的各种数据类型？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2015个文字，预计阅读时间需要9分钟。
目录 + 1，类型总览 + 2，基本类型 + 2.1 布尔 + 2.2 数字 + 2.3 字符串 + 2.4 Null + 2.5 undefined + 2.6 Symbol + 2.7 BigInt + 3 引用类型 + 3.1 数组 + 3.2 对象 + 3.3 函数 + 4 TypeScript新增类型
目录- 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，字面量
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<number> = [1, 2, 3]
- 多类型数组
const arr1: (number | string)[] = [1, 'string', 2]
const arr2: Array<any> = [1, 'string', null]
- 使用
type约束的数组
type T = number | string
const arr: Array<T> = [1, '张三']
- 使用
interface约束的对象数组
interface Item {
id: number
name: string
isDad: boolean
}
const objectArr: Array<Item> = [{ 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; // OK
let notSure: any = 4;
let uncertain: unknown = notSure; // OK
let 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
- 简书
- 自由互联
- 掘金
本文共计2015个文字，预计阅读时间需要9分钟。
目录 + 1，类型总览 + 2，基本类型 + 2.1 布尔 + 2.2 数字 + 2.3 字符串 + 2.4 Null + 2.5 undefined + 2.6 Symbol + 2.7 BigInt + 3 引用类型 + 3.1 数组 + 3.2 对象 + 3.3 函数 + 4 TypeScript新增类型
目录- 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，字面量
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<number> = [1, 2, 3]
- 多类型数组
const arr1: (number | string)[] = [1, 'string', 2]
const arr2: Array<any> = [1, 'string', null]
- 使用
type约束的数组
type T = number | string
const arr: Array<T> = [1, '张三']
- 使用
interface约束的对象数组
interface Item {
id: number
name: string
isDad: boolean
}
const objectArr: Array<Item> = [{ 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; // OK
let notSure: any = 4;
let uncertain: unknown = notSure; // OK
let 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
- 简书
- 自由互联
- 掘金