iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript基本类型之typeof和keyof详解
  • 106
分享到

TypeScript基本类型之typeof和keyof详解

ts中的typeofts基本类型typeofts基本类型keyof 2023-05-14 08:05:58 106人浏览 八月长安
摘要

目录编译并运行 TS 代码typescript基础数组类型   []联合类型  |类型别名函数类型 void类型可选参数 ?参数默认值=&nb

安装编译ts的工具

  • 安装命令:npm i -g typescript 或者 yarn global add typescript
  • 验证是否安装成功:tsc –v(查看 TypeScript 的版本)。

编译并运行 TS 代码

  1. 创建 hello.ts 文件(注意:TS 文件的后缀名为 .ts)。
  2. 将 TS 编译为 js:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)。
  3. 执行 JS 代码:在终端中输入命令,node hello.js
  4. 说明:所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可。
  5. 注意:由 TS 编译生成的 JS 文件,代码中就没有类型信息了。

 创建 .TS文件hello 通过 tsc hello.ts 命令会生成同名js文件 通过node hello.js运行js文件

TypeScript基础

类型注解

给变量添加明确的类型约束叫做类型注解

let name:string='张三'
let age:number=18
 
:number 和 :string 就是类型注解

TS常用基础类型细分为两类 分别是JS已有类型和TS新增类型 

 js已有类型  number ,string boolean null undefined  symbol 和 bigint 

javascriptes6后一共有 7 种原始类型 和 1 种 引用类型,如下:

原始类型 number、 string 、boolean 、 undefined 、 null 、 symbol 、 bigint

引用类型 object

TS新增类型有

a,联合类型 ,自定义类型(类型别名type..), 接口 元组 字面量类型 枚举 void ang等

b,注意:TS 中的原始类型和 JS 中写法一致;TS 中的对象类型在 JS 类型基础上更加细化,每个具体的对象(比如数组、对象、函数)都有自己的类型语法。

数组类型   []

arr是数组类型,数组里面装的是number类型

const arr=[1,2,3]
 
// 定义 
 
const arr:number[]=[1,2,3]
arr.push(8)

联合类型  |

一个 类型里面有多种类型 

const temp :number| string =8

记得优先级问题要加() 

const arr:number| string[]=[1,'1'] // 不行报错 优先级问题
// arr是 number类型或者string组成的数组类型
解决如下
const arr:(number| string)[]=[1,'1']

 如果打印 结果   ts文件报错可以加 export{}来解决

泛型定义方式

const arr:Array<number>=[1,2,3]
 
const aee:Array<number|string>=[1,'1']

 联合类型的应用场景

错误写法

let timer =null
timer =setInterval(()=>{},2000)

正确写法一

let timer = number= -1
timer=setInterval(()=>{},2000)

正确写法二

let timer= null |number =null
timer=setInterval(()=>{})

类型别名

所谓的类型别名就是把类型给定义了一个名字       当类型很多或者很复杂或者重复使用时 这样书写就会便捷很多   名字可以用中文但是不建议 

let arr1: (number | string)[] = [1, 'a', 3, 'b']
let arr2: (number | string)[] = ['x', 'y', 6, 7]
 
改为
type CustomArray = (number | string)[]
 
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

解释说明。

a,使用 type 关键字来创建自定义类型。

b,类型别名(比如,此处的 CustomArray)可以是任意合法的变量名称。

c,推荐使用大写字母开头。

d,创建类型别名后,直接使用该类型别名作为变量的类型注解即可。

函数类型 

单独指定参数,返回值的类型

同时指定类型,返回值的类型

// 解释:可以通过类似箭头函数形式的语法来为函数添加类型,注意这种形式只适用于函数表达式。
type AddFn = (num1: number, num2: number) => number
 
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

void类型

如果函数没有指定返回类型 默认为void

function greet(name: string): void {
    console.log('Hello', name)
    // return undefined // 默认有这么一句
}

如果 明确标记了函数的返回类型为undefined  那么就必须手动 return一个undefined

const add = (): undefined => {
    return undefined
}

可选参数 ?

function mySplice(test:number , start?: number,end?:number){
 mySplice(1)
mySplice()
mySplice(1,2)
 可选参数不能出现在必选参数前面  必须在必选函数后面  一般配合类型注解使用
 }

参数默认值=    

对象类型 :object

const obj:object = {}

左边的{}表示 类型 (严格来说应该是对象字面量类型) ,右边的{}表示值

等号右边的值直接是一个对象时 左右两边数量保持一致 

const person:{name:string;age:number} ={
name:"zhansan",
age:18
}

如果提取了变量  值的实现是可以比类型多 (满足类型定义的条件下 类型定义准确)

interface

interface +接口名用来描述对象类型

与extends使用具有继承性

相同点 

type 和interface的区别

    都可以用来描述对象 或者函数  都允许进行拓展 ,语法不同

不同点

1.   interface的接口拓展通过extends   type的接口拓展通过&

 2.  type 加=  interface不加=

3.type可以描述任意类型  interface只能用来描述对象或函数

4.相同的interface声明能够合并  相同的type声明会报错  (命名名字)

总结  :一般使用 interface来表述对象结构 用type 来描述类型关系

元组类型 

元组类型可以确切地标记出有多少个元素,以及每个元素的类型

// 可以给元组中的元素起别名

类型推论

字面量类型

let str1 = 'Hello TS'   //string类型
const str2 = 'Hello TS'   // 字符串字面量类型

使用方式和场景

使用方式:字面量类型常配合联合类型一起使用

使用场景:用来表示一组明确的可选值列表,比如在贪吃蛇游戏中,游戏方向的值只能是上、下、左、右中的一个

type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
    console.log(direction)
}
changeDirection('up') // 调用函数时,会有类型提示

枚举类型

基本使用

枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值。

枚举:定义一组命名常量,它描述一个值,该值可以是这些命名常量中的一个。既可以当做值也可以当做类型

使用 enum 关键字定义枚举,约定枚举名称以大写字母开头。

枚举中的多个值之间通过 ,(逗号)分隔,定义好枚举后,直接使用枚举名称作为类型注解。

// 创建枚举
enum Direction {
    Up,
    Down,
    Left,
    Right,
}
 
// 可以当做类型使用枚举
function changeDirection(direction: Direction) {
    console.log(direction)
}
 
// 也可以当做值使用枚举
// 调用函数时,需要传入:枚举 Direction 成员的任意一个,类似于 JS 中的对象,直接通过点(.)语法 访问枚举的成员
changeDirection(Direction.Up)

 数字枚举

enum Direction {
    Up = 2,
    Down = 4,
    Left = 8,
    Right = 16,
}
console.log(Direction['Up']) // 2
// 也可以反向操作
console.log(Direction[2]) // Up

实现原理

  • 枚举类型比较特殊,不仅仅可以用作类型,还可以当做值使用,因为枚举成员都是有值的。
  • 也就是说,其他的类型会在编译为 JS 代码时自动移除,但是,枚举类型会被编译为 JS 代码
  • 说明:枚举与前面讲到的字面量类型 + 联合类型组合的功能类似,都用来表示一组明确的可选值列表。
  • 推荐:字面量类型 + 联合类型组合的方式,因为相比枚举,这种方式更加直观、简洁、高效。

字符串枚举

  • 定义:枚举成员的值是字符串称为字符串枚举。
  • 注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值
enum Gender {
    女,
    男,
}
type User = {
    name: string
    age: number
    // gender: '男' | '女' // 但后台需要 0 和 1
    gender: Gender
}
 
const user: User = {
    name: 'ifer',
    age: 18,
    gender: Gender.男,
}

类型断言  as 或者 <>泛型

可以将一个宽泛的类型断言为更为简洁的类型

当你明确知道 你所写的类型是什么时  就可以使用 类型断言 为了使用 具体的方法

typeof 

js中判断某个数据的类型

let a = 8
console.log(typeof a)// 'number'

ts中的typeof是 根据已有的值 来获取值的类型  来简化代码的书写

keyof

作用:获取接口、对象(配合 typeof)、类等的所有属性名组成的联合类型。

// 接口
interface Person {
    name: string
    age: number
}
type K1 = keyof Person // "name" | "age"
type K2 = keyof Person[] // "length" | "toString" | "pop" | "push" | "concat" | "join"
 
// 错误写法
const a =keyof Person

要想获取对象的key组成的联合类型

1.先获取到对象的类型 通过typeof  2.获取对象类型所组成的联合类型

const a ={name:"张三",age:18}
type keyofa =keyof typeof a

思维导图

https://www.processon.com/view/link/62d5351be401fd2596077274

any和unknow的区别

unknow 是更加安全的any类型

任何类型可以给any , any也可以给任何类型

任何类型也可以给unknow但是unknow只能给unknow和any

函数重载

重载签名 :包含了函数的参数类型和返回值类型,但不包含函数体

函数签名(定义了函数的类型 不包括实现) + 签名实现

 函数签名

函数类型的第一种情况
function greet(name:string) :string
 
函数类型的第二种情况
 
function greet(name:string[]):string[]

签名实现

函数参数和函数的返回值要覆盖前面的函数前面的所有情况

function gerrt(name:unknown) :unknow{
if(Array.isArray(name)){
  return name.map((item)=>`Hello${item}`) 
  } 
  return `Hello${name}`
}
greet('xxx')  // 后跟字符串方法
greet(['1','2']) //数组方法

 总结

到此这篇关于TypeScript基本类型之typeof和keyof详解的文章就介绍到这了,更多相关ts基本类型typeof和keyof内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript基本类型之typeof和keyof详解

本文链接: https://www.lsjlt.com/news/202877.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript基本类型之typeof和keyof详解
    目录编译并运行 TS 代码TypeScript基础数组类型   []联合类型  |类型别名函数类型 void类型可选参数 参数默认值=&nbs...
    99+
    2023-05-14
    ts中的typeof ts基本类型typeof ts基本类型keyof
  • TypeScript基本类型之typeof和keyof怎么使用
    本文小编为大家详细介绍“TypeScript基本类型之typeof和keyof怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“TypeScript基本类型之typeof和keyof怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路...
    99+
    2023-07-05
  • TypeScript基本数据类型实例详解
    目录TypeScript 介绍类型分配类型推导数组元组objectnull 和 undefined特殊类型anyunknownnevervoidTypeScript 介绍 Type...
    99+
    2023-01-30
    TypeScript 基本数据类型 TypeScript 数据类型
  • 详解TypeScript的基础类型
    目录布尔类型数字类型字符串类型字符串和数字进行拼接undefined和 null数组类型元组类型枚举类型any类型void类型联合类型总结布尔类型 // 布尔类型--->boo...
    99+
    2022-11-12
  • C++变量和基本类型详解
    目录基本内置类型1. 不同平台下基本类型的字节数2. 算数类型的最小尺寸3. 数据类型选择的经验准则4. 有符号类型和无符号类型5.初始化与赋值6. 声明与定义7. C++关键字8....
    99+
    2022-11-12
  • Java基础之详解基本数据类型的使用
    一、整型 主要扩展一下不同进制的整型 二进制、八进制、十进制、十六进制 * 二进制 : 0B(数字零+B) 0b(数字零+b) * 八进制 :0(数字零开头) * 十进制 :正常写...
    99+
    2022-11-12
  • c++primer:变量和基本类型详解
    目录前言类型转换变量声明与定义的关系变量命名规范复合类型引用指针const限定符const的引用指针和constconstexpr和常量表达式auto类型说明符decltype头文件...
    99+
    2022-11-12
  • TypeScript语法详解之类型操作的补充
    目录类型操作的补充类型断言的使用非空类型的断言可选链使用介绍两个特殊操作符字面量类型介绍字面量推理介绍总结类型操作的补充 类型断言的使用 有时候TypeScript无法获取具体的类型...
    99+
    2022-11-13
  • Kotlin基本数据类型详解
    目录1. kotlin 数值型2. kotlin 布尔型3. kotlin 字符型4. kotlin 字符串5. kotlin 可空类型6. kotlin 类型相互转换7. kotl...
    99+
    2022-11-12
  • C++ Primer的变量和基本类型详解
    目录1.类型转换含有无符号类型的表达式2.字面值常量整形和浮点型字面值字符和字符串字面值转移序列指定字面值的类型布尔字面值和指针字面值总结1.类型转换 对象的类型定义了对象能包含的数...
    99+
    2022-11-12
  • Python基础之数据类型详解
    目录一、整数二、浮点数三、复数四、运算符,优先级以及结合性五、混合类型计算六、除法七、十进制,八进制,十六进制和二进制八、位操作九、集合十、布尔类型十一、其他数值类型一、整数 pyt...
    99+
    2022-11-12
  • javascript基础之数据类型详解
    目录1.数据类型1.1 为什么需要数据类型1.2 变量的数据类型1.3 数据类型分类2. 简单数据类型(基本数据类型)2.1 数字型Number1. 数字型进制2.数字型范围2.2 ...
    99+
    2022-11-12
  • TypeScript函数和类型断言实例详解
    目录开始断言非空断言类型断言尖括号as确定赋值断言类型守卫trpeofin函数可选参数默认值参数函数重载结束开始 现在要加速学习了,大佬们有没有内推,给个推荐 会vue2/vue3 ...
    99+
    2022-11-13
  • c++中的基本IO类型详解
    引言 c++不直接处理输入和输出,而是通过标准库中的类型处理IO。IO的设备可以是文件、控制台、string。c++主要定义了三种IO类型,分别被包含在iostream、fstrea...
    99+
    2022-11-12
  • Java基本数据类型之间的相互转换详解
    目录1.自动类型转换1.定义2.数据类型按精度大小排序3.使用细节2.强制类型转换1.定义2.使用细节3.基本数据类型与String类型的转换1.基本数据类型转String类型2.S...
    99+
    2022-11-13
  • TypeScript类型级别和值级别示例详解
    目录对值级别编程类型级别编程区分类型级编程挑战是如何工作的挑战对值级别编程类型级别编程区分 首先,让我们对值级别编程和类型级别编程进行重要区分。 值级别编程让我们编写将在生产中运行...
    99+
    2023-02-27
    TypeScript类型级别值级别 TypeScript 级别
  • Swift 基本数据类型详解总结
    Swift 基本数据类型 有以下几种基本数据类型: 整型 浮点型 布尔型 元组 可选值 Optional 1. 整型 var intT...
    99+
    2022-11-12
  • ES6变量赋值和基本数据类型详解
    目录let和constlet和const不存在变量提升暂时性死区(temporal dead zone,简称TDZ)不允许重复声明块级作用域与函数声明const变量解构解构必须左右解...
    99+
    2022-11-13
  • 详解TypeScript映射类型和更好的字面量类型推断
    目录概述使用映射类型构建 Object.freeze()映射类型的语法更直观解释更多映射类型的示例映射类型的实际用例更好的字面量类型推断更好的 const 变量推断更好的只读属性推断...
    99+
    2022-11-12
  • 详解C语言的基本数据类型
    目录1、C语言基本数据类型2、计算机中的单位3、各数据类型的大小及字取值大小总结1、C语言基本数据类型 2、计算机中的单位 3、各数据类型的大小及字取值大小 对于short i...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作