ts基本类型 typeof 和keyof

news2024/11/19 23:13:29

安装编译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文件

TS基础 TypeScript

类型注解

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

let name:string='张三'
let age:number=18

:number 和 :string 就是类型注解

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

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

Javascript自es6后一共有 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/62d5351be401fd2596077274https://gitee.com/link?target=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F62d5351be401fd2596077274

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']) //数组方法

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue3中ref和reactive的区别

vue3中ref和reactive的区别

ref 接受一个内部值并返回一个响应式且可变的 ref 对象&#xff0c;有一个 .value 属性&#xff0c;可以通过其读取/修改对象的值。 const active ref(false)console.log(active.value) // falseactive.value trueconsole.log(active.value) // true 为ref值指定泛型参数覆盖…
阅读更多...
Vue中的$set

Vue中的$set

项目场景&#xff1a; 例如&#xff1a;在我写前端项目的时候&#xff0c;后端给我们的一个json对象&#xff0c;并且我已经渲染在页面上了。但是由于我自己的需求&#xff0c;想往返回的对象里面添加一个字段&#xff0c;后来才意识到不是响应式的。如果我们要让这个新字段是…
阅读更多...
【博主推荐】html好看的个人主页(附源码)

【博主推荐】html好看的个人主页(附源码)

个人主页介绍【博主推荐】html好看的个人主页1.背景个人主页效果2.背景个人主页代码3.简洁个人主页效果4.简洁个人主页代码5.卡片个人主页效果6.卡片个人主页代码7.星空个人主页效果8.星空个人主页代码源码下载【博主推荐】html好看的个人主页 附带四种风格个人主页 背景个人主…
阅读更多...
牛客前端刷题（五）—— CSS相关概念

牛客前端刷题（五）—— CSS相关概念

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！ 赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏…
阅读更多...
解决vue3+vite+TS 中使用element-plus按需引入 ElLoading、ElMessage 样式失效

解决vue3+vite+TS 中使用element-plus按需引入 ElLoading、ElMessage 样式失效

ElMessage 样式失效 其实他不是失效了&#xff0c;只是加载到我们的 可以看到下面使用的方式和效果图&#xff0c;vue3的element-plus遇到的问题&#xff0c;因为要测试一下&#xff0c;所以点的频率比较大&#xff0c;但可以明显的看到ElMessage样式显示在你浏览器的下面 i…
阅读更多...
echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理)

echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理)

echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理) 前言 记录自己工作中的一点小心得&#xff0c;希望可以帮助有同样需求的朋友。 1.使用场景 之前我工作中有需要在图标中添加特殊标识的&#xff0c;我是费劲用散点图进行添加&#xff0c;十分麻烦。又比…
阅读更多...
利用Vite或者webpack创建Vue项目，并启动Vue项目

利用Vite或者webpack创建Vue项目，并启动Vue项目

文章目录背景环境准备准备Node.js和npm即可Vite打包webpack打包总结背景 大家好&#xff0c;我是杜晓帅~&#xff0c;一名Java开发程序员&#xff1b;最近想总结一下前端开发的一些东西&#xff0c;包括项目的打包和如何将后端处理的数据在前端进行一个展示&#xff0c;相信大家…
阅读更多...
React 重新渲染指南

React 重新渲染指南

前言 老早就想写一篇关于React渲染的文章&#xff0c;这两天看到一篇比较不错英文的文章&#xff0c;翻译一下(主要是谷歌翻译&#xff0c;手动狗头)&#xff0c;文章底部会附上原文链接。 介绍 React 重新渲染的综合指南。该指南解释了什么是重新渲染&#xff0c;什么是必要…
阅读更多...
前端后端的爱恨情仇

前端后端的爱恨情仇

全文目录一、API爆炸的时代1.背景介绍2.问题引出3.解决方案二、核心功能1.API文档2.API调试3.Mock 数据4.自动化测试5. 在线调试三、其他功能1.代码生成2.数据导入/导出四、惊喜功能五、总结一、API爆炸的时代 随着最近行业的移动化、物联网化、数字化转型、微服务等多种概念的…
阅读更多...
vue的脚手架安装及安装失败问题解决

vue的脚手架安装及安装失败问题解决

vue的脚手架安装及安装失败问题解决 提示&#xff1a;本文是较为详细的vue脚手架安装教程及其问题解决&#xff0c;若需要快速使用的宝们请按照文章目录快速查找并使用相关代码 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文…
阅读更多...
Node.js | 你不知道的 express 路由使用技巧

Node.js | 你不知道的 express 路由使用技巧

🖥️ NodeJS专栏：Node.js从入门到精通 🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述） 🖥️ TypeScript知识总结：TypeScript 学习笔记（十万字超详细知识点总结） 🧑‍💼 个人简介：大三学生，一个不甘平庸的平凡人🍬…
阅读更多...
前端发送axios请求报错Request failed with status code 500解决方案

前端发送axios请求报错Request failed with status code 500解决方案

1.报错如下 2.因为后端的api是自己使用nodeexpress搭建的后台&#xff0c;然后要求请求头的参数格式为application/x-www-form-urlencoded的参数格式 打开报错请求 发现自己的请求头参数格式没有错误&#xff0c;jwt的身份验证也通过了&#xff0c;然后使用post测试接口&#x…
阅读更多...
JavaScript之Ajax（一篇入门Ajax就够了）

JavaScript之Ajax（一篇入门Ajax就够了）

一、概念 1.什么是Ajax Ajax&#xff08;Asynchronous Javascript And XML&#xff09;&#xff0c;即是异步的JavaScript和XML&#xff0c;Ajax其实就是浏览器与服务器之间的一种异步通信方式 异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程…
阅读更多...
vue3 + vite中开发环境和生产环境全局变量配置

vue3 + vite中开发环境和生产环境全局变量配置

目录一、开发环境和生产环境二、配置环境变量三、使用全局变量一、开发环境和生产环境 开发环境&#xff1a;也就是编码时运行的环境&#xff0c;即我们使用npm run dev或者npm run serve运行项目到本地时&#xff0c;项目处于的环境。 生产环境&#xff1a;项目部署到服务器…
阅读更多...
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用

07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用

目录前言主应用微应用部署前言 因为业务系统接入的需要&#xff0c;决定将一个vue3vitets的主应用系统&#xff0c;改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。 网上有很多关于微应用改造的案例&#xff0c;但很多都没写部署之后什么情…
阅读更多...
web前端文件上传可选择的4种方式

web前端文件上传可选择的4种方式

在web前端开发中&#xff0c;文件上传属于很常见的功能&#xff0c;不论是图片、还是文档等等资源&#xff0c;或多或少会有上传的需求。一般都是从添加文件开始&#xff0c;然后读取文件信息&#xff0c;再通过一定的方式将文件上传到服务器上&#xff0c;以供后续展示或下载使…
阅读更多...
WEB核心【记录网站登录人数，记录用户名案例】Cookie技术实现

WEB核心【记录网站登录人数，记录用户名案例】Cookie技术实现

目录 &#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &…
阅读更多...
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

当我们拿到一个前端项目的时候&#xff0c;想要把它运行起来&#xff0c;首先是要给它安装依赖&#xff0c;即cd到当前项目根目录下去执行npm install命令&#xff0c;然后有一定几率在终端你会遇到这样的报错&#xff1a; npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to…
阅读更多...
HTML基础————table标签

HTML基础————table标签

1.什么是table&#xff1f; table是html中的表格&#xff0c;由tr、td、th元素组成。 tr 元素定义表格行&#xff0c;th 元素定义表头&#xff0c;td 元素定义表格单元 2.可选的属性 属性描述border定义表格的边框cellpadding单元格内内容与单元格边的间距cellspacing单元格…
阅读更多...
Vite配置环境变量

Vite配置环境变量

Vite配置代码环境变量和 Vue2 的配置差不多&#xff0c;都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解&#xff1a;环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建 .env.production 生产模式和 .env.development 开发模式两…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023