[前端基础]typescript安装以及类型拓展

(0)写在前面:

作者之前都是在写js,所以这里介绍ts肯定是不能从头开始介绍了,主要在js的基础上介绍ts关于类型的几个特性,以及ts的安装还有配置问题

(1)ts和js是什么关系

通俗点来讲,ts是js的扩展,或者说js可以理解为ts的一部分。在实际应用上来说,ts是对js在编写层面上作出的一种规范。甚至运行的时候,都要通过ts编辑器将ts代码文件转化为js代码才能顺利执行。

(2)ts的安装,启动以及环境配置

ts的安装可以直接使用指令

npm install -g typescript

下载完成后,通过tsc指令编译你的ts文件

tsc ‘目标文件名称’

会生成同名的js文件,这个时候再使用node去执行js

node ‘同名的js文件’

这个其实就是底层的原理,因为node环境还有浏览器环境之恩那个识别js,所以我们要先把ts转化为js。第一眼看可能是多次一举,但是在编写ts的时候,无论是ide也好,ts编译器也好,都会对我们的一些错误进行修正,让生成的js代码更加和谐。

不过如果想要跳过这个中间产物,可以直接使用工具ts-node,可以直接去编译ts并且执行,不需要我们手动去执行一些东西了

npm install -g ts-node

接下来就可以通过这个第三方工具直接执行ts文件了

ts-node ‘ts文件’

一个可能需要注意一点的问题就是,有些时候安装完了这两个工具可能是会识别不出tsc和ts-node这两个东西是什么,原因在于window下我们一般要手动配置环境变量。

其实-g这个参数的意思就是全局安装,但是在window下,会有很多其奇怪挂的情况,所以这个全局安装多半会失败。

这个的解决方法就是,你需要从node-module模块中寻找到可能会需要到的应用程序,然后单独提取出来,再把环境变量指向这个东西。(具体可以询问身边的老手或者ai工具,这个东西应该是每个node程序员都要会的)

当然如果你是linux系统就不会有这个顾虑,因为linux处理这类安装的时候,一般是自动帮你集成好了环境变量。

(3)一些关于类型的特性

详见代码注释

//首先要说一句 ts是js的超类,所以js的代码全部是ts代码的一部分
console.log('ddd')//首先声明变量key可以加上类型,ts会做相关的检查
let a:string='dddd'//对于对象,也可以使用接口的方式进行检查
interface User {name:string;age:number;
}
const user:User={name:'',age:0}//方法也可以使用这种方式,对传入参数进行检查
function deleteUser(user: User) {// ...
}//定义组合类型:
type myType=1|2|3|4
// const b:myType=0这样子就会报错
// 有点类似枚举的感觉
//应用:
function testType(obj:string|string []){//这参数可以接收字符串或者字符串数组,内部可以使用typeof等等方法做尝试
}//泛型,用法和其他语言差不多,用来指明本语言中缺失的部分
class Student<type>{name:type;constructor(name:type){this.name=name}
}//结构类型系统,一个ts中很有意思的点,如果有相同的属性部分,那么在使用的时候就会被视为是同一种类型
function testT(point:{x:string,y:number}){//...里面是一些属性
}
//这时候可以传入
testT({x:'',y:1})
//也可以,以这样的方式传入,子集xy的部分会被视为point同类型的东西
const x={x:'',y:1,z:12}
testT(x)
//自由度是真的高啊。。。。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析笔记1

数据分析概述&#xff1a;数据获取--探索分析与可视化--预处理--分析建模--模型评估 数据分析含义&#xff1a;利用统计与概率的分析方法提取有用的信息&#xff0c;最后进行总结与概括 一、数据获取 实用网站&#xff1a;kaggle 阿里云天池 数据仓库&#xff1a;将所有业务数据…

Java之SpringCloud Alibaba【六】【Alibaba微服务分布式事务组件—Seata】

一、事务简介 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit)。 在关系数据库中&#xff0c;一个事务由一组SQL语句组成。 事务应该具有4个属性: 原子性、一致性、隔离性、持久性。这四个属性通常称为ACID特性。 原子性(atomicity) ∶个事务…

【Leetcode】 131. 分割回文串

给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff1a;[["a","a"…

网站白屏优化

网站白屏优化 <div v-foritem in 10000><child></child> </div>比如要渲染当前页面&#xff0c;会很慢&#xff0c;页面上出现长时间的白屏&#xff0c;因为要渲染10000次child组件。 我们提供的解决方案是按帧加载Dom。 使用按帧加载就不得不提到req…

Leetcode 662. 二叉树最大宽度

文章目录 题目代码&#xff08;9.30 首刷看解析&#xff09; 题目 Leetcode 662. 二叉树最大宽度 代码&#xff08;9.30 首刷看解析&#xff09; class Solution { public:int widthOfBinaryTree(TreeNode* root) {unsigned long long res 1;using pr pair<TreeNode*, u…

【面试题精讲】注释有哪几种形式

“ 有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top ” 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是 Java 注释? Java 注释是一种用于在代码中添加说明和解释的特殊文本。它们不会被编…

Doctest:让你的测试更简单高效

简介&#xff1a;Doctest 是 Python 标准库的一部分&#xff0c;它允许开发者通过在文档字符串&#xff08;docstrings&#xff09;中编写示例来进行测试。这不仅可以在确保代码正确性的同时编写文档&#xff0c;还可以让读者更容易理解代码的用法和期望的输出。 历史攻略&…

【源码】hamcrest 源码阅读及空对象模式、模板方法模式的应用

文章目录 前言1. 类图概览2. 源码阅读2.1 抽象类 BaseMatcher2.1 接口 Description提炼模式&#xff1a;空对象模式 2. 接口 Description 与 SelfDescribing 配合使用提炼模式 模板方法 后记 前言 hamcrest &#xff0c;一个被多个测试框架依赖的包。听说 hamcrest 的源码质量…

RabbitMQ学习笔记(消息发布确认,死信队列,集群,交换机,持久化,生产者、消费者)

MQ&#xff08;message queue&#xff09;&#xff1a;本质上是个队列&#xff0c;遵循FIFO原则&#xff0c;队列中存放的是message&#xff0c;是一种跨进程的通信机制&#xff0c;用于上下游传递消息。MQ提供“逻辑解耦物理解耦”的消息通信服务。使用了MQ之后消息发送上游只…

第45节——页面中修改redux里的数据

一、什么是action 在 Redux 中&#xff0c;Action 是一个简单的 JavaScript 对象&#xff0c;用于描述对应应用中的某个事件&#xff08;例如用户操作&#xff09;所发生的变化。它包含了一个 type 属性&#xff0c;用于表示事件的类型&#xff0c;以及其他一些可选的数据。 …

利用Qt实现可视化科学计算器

&#x1f4de;个人信息 学号&#xff1a;102101433 姓名&#xff1a;林堂钦 &#x1f4a1; 作业基本信息 【课程】福州大学2021级软件工程Ahttps://bbs.csdn.net/forums/ssynkqtd-05作业要求链接https://bbs.csdn.net/topics/617294583作业目标 实现一个简易计算器&…

最短路径专题2 最短距离-多终点(堆优化版)

题目&#xff1a;样例&#xff1a; 输入 6 6 0 0 1 2 0 2 5 0 3 1 2 3 2 1 2 1 4 5 1 输出 0 2 3 1 -1 -1 思路&#xff1a; 根据题意&#xff0c;数据范围也小&#xff0c;也可以用朴素版的Dijsktra来做&#xff0c;朴素版的Dijsktra我做过了一遍了&#xff0c;可以看以一下我…

MySQL - mysql服务基本操作以及基本SQL语句与函数

文章目录 操作mysql客户端与 mysql 服务之间的小九九了解 mysql 基本 SQL 语句语法书写规范SQL分类DDL库表查增 mysql数据类型数值类型字符类型日期类型 示例修改&#xff08;表操作&#xff09; DML添加数据删除数据修改数据 DQL查询多个字段条件查询聚合函数分组查询排序查询…

【数据科学】Scikit-learn[Scikit-learn、加载数据、训练集与测试集数据、创建模型、模型拟合、拟合数据与模型、评估模型性能、模型调整]

这里写目录标题 一、Scikit-learn二、加载数据三、训练集与测试集数据四、创建模型4.1 有监督学习评估器4.1.1 线性回归4.1.2 支持向量机(SVM)4.1.3 朴素贝叶斯4.1.4 KNN 4.2 无监督学习评估器4.2.1 主成分分析(PCA)4.2.2 K Means 五、模型拟合5.1 有监督学习5.2 无监督学习 六…

React18入门(第一篇)——JSX、TSX语法详解

文章目录 一、JSX 语法简介二、和 HTML 标签的几点不同三、JSX 属性四、JSX 事件4.1 简单点击事件4.2 类型限制4.3 带参数&#xff0c;箭头函数 五、插入 JS 变量六、JSX 中使用条件判断七、循环 一、JSX 语法简介 JSX - 是 JS 的扩展&#xff0c;写在 JS 代码里面&#xff0c…

STM32 DMA从存储器发送数据到串口

1.任务描述 &#xff08;1&#xff09;ds18b20测量环境温度存储到存储器&#xff08;数组&#xff09;中。 &#xff08;2&#xff09;开启DMA将数组中的内容&#xff0c;通过DMA发送到串口 存在问题&#xff0c;ds18b20读到的数据是正常的&#xff0c;但是串口只是发送其低…

python (*)和(**)的用法

在Python中&#xff0c;星号除了用于乘法数值运算和幂运算外&#xff0c;还有一种特殊的用法"在变量前添加单个星号或两个星号"&#xff0c;实现多参数的传入或变量的拆解&#xff0c;本文将详细介绍"星号参数"的用法。 # 什么是星号变量&#xff08;*&am…

ORACLE insert 性能比较

ORACLE insert 性能比较 在Oracle数据库中&#xff0c;不是提交越频繁越好。恰恰相反&#xff0c;批量提交可以得到更好的性能。这篇文章给大家简单展示一下在Oracle数据库中逐行提交于批量提交两者之间的性能差别。最后再给出一种可以极大改变性能的方法。 1.创建表t_ref&…

闲话Python编程-函数

在Python实际编程过程中&#xff0c;组织代码结构的两个重要手段是&#xff1a;函数和类。有了函数&#xff0c;我们才能把一个个内聚的流程封装起来&#xff1b;有了类&#xff0c;我们才能把一个个现实对象抽象表达出来&#xff0c;即使你说不用自己写类&#xff0c;但是你用…

Redis Cluster Gossip Protocol: 目录

术语说明 server&#xff1a;当前的节点 cluster&#xff1a;每个节点的内存中都有一个集群信息结构&#xff0c;里面包含了集群中各个节点的状态信息&#xff08;包括server自己&#xff09; myself&#xff1a;当前节点在cluster中的实体 node&#xff1a;cluster节点字典中…