ts快速上手之实现hello world 常见的踩坑排除

news2024/11/15 4:11:57

前言

大家新年快乐,刚过了一个年又快要到情人节了,提前祝各位同行有女朋友的情人节快乐,没有对象那就new一个对象吧[滑稽]

关于TypeScript

闲话少说,相信大家在这个平台上看到的文章好多开头都会说一些介绍是多久诞生的,为啥诞生等等等,巴拉巴拉的一大堆,这些东西其实百度一下就知道了,我这里就不做太多了阐述了,理解万岁

什么是TypeScript

我的理解是:之前的JS代码写起来实在太简单了,不像Java啊C啊这些语言,可以规范数据类型,然后写起来很快但是出现了bug调试起来就难了等等等等,所以就有了TypeScript

TS和Js有什么关系呢?

其实ts就相当于js的超集,你可以理解为ts的代码包括Js的语法
换句话说就是 在ES6中的ES5然而这个ES5就是JS
在这里插入图片描述

注意:ts并不是一门全新的语言,它只是在js的基础上做的扩展,你写完TS之后你的编译器会将其编译为JS代码,然后JS解析器才会去执行(说人话就是你的浏览器并不能解析ts代码,想要运行的话必须要编译为js,就相当于你买东西要给了钱才能拿走是一个道理)

TS的优点和好处

  • 静态类型检查器(规范数据类型类似与varchat,int啊这些)
  • 减少运行时异常出现的机率(定义变量或者传参规范数据类型之后的确能减少bug的出现)
  • 后期容易维护(其实我并没有啥感觉)

开始上手TypeScript

安装ts

在安装之前请先确保您的电脑已经暗转了node.js且具有npm包管理器
命令行全局安装方式如下

npm install -g typescript

在这里插入图片描述

验证是否安装完成的方法

在命令行中输入tsc -v如果出现了版本号则为安装成功
在这里插入图片描述

编写基础代码

我这边使用的编辑工具为VSCode,本人其实也是推荐这个工具的,微软大大出品嘛,并且vscode貌似也是使用ts开发的

  • 首先打开你的编辑器新建一个扩展名为ts的文件
    在这里插入图片描述
    首先我们写一个简单的helloworld
    其实我们使用js可能就是
(() => {
  // 一般定义
  function hello_word(str) {
    return "hello" + str;
  }
  let arr = hello_word("world");
  console.log(arr);
})();

如果我们使用VSCode运行代码时出现了ts-node的情况该怎么办呢?
在这里插入图片描述
其实只需要本地安装ts-node或者手动编译代码即可

手动编译代码的那些坑

手动编译代码

打开你的内置终端

tsc '你需要编译的ts文件'

在这里插入图片描述

小提示:输入 tsc之后可以直接tab键补全文件名

如果出现了下面的问题就以管理员权限运行powerShell执行下面的代码

Set-ExecutionPolicy Unrestricted

选择 A 或者 Y然后回车
在这里插入图片描述
然后运行下面的代码如果显示结果如图所示则为成功

Get-executionPolicy

在这里插入图片描述
执行完毕之后会在同级目录下生成一个同名的JS文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/544e94ce43b44cab95c9cfb6c5845026.png
运行结果如下(node ‘你的js文件’)
在这里插入图片描述
现在我们来试试TS的代码写法

(() => {
  // 因为我想要打印的hello world为字符串
  // 我为了防止出现问题,我规定传入的string必须为字符串类型
  // ts写法如下
  function hello_word(str:string) {
    return "hello" + str;
  }
  let arr = hello_word('world');
  console.log(arr);
})();

我们可以看到我们编译之后的运行结果是正常的
在这里插入图片描述
但是我如果调用函数传参的结果错了呢?
例如:我传递一个Number类型的数据呢?
在这里插入图片描述
我们会发现立马就会产生报错,如图所示

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

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

相关文章

Java面试——MyBatis篇

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

Flutter(一)介绍、Dart语言简介

Flutter介绍 纯原生开发主要面临动态化更新和开发成本两个问题,而针对这两个问题,诞生了一些跨平台的动态化框架 跨平台技术简介 Flutter 是 Google 推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开…

【云原生kubernetes】k8s service使用详解

一、什么是服务service? 在k8s里面,每个Pod都会被分配一个单独的IP地址,但这个IP地址会随着Pod的销毁而消失,重启pod的ip地址会发生变化,此时客户如果访问原先的ip地址则会报错 ; Service (服务)就是用来解决这个问题的…

Django设计模式以及模板层介绍

MVC和MTV 传统的MVC作用:降低模块间的耦合度(解耦)Django的MTV模式 作用:降低模块间的耦合度(解耦)什么是模板 1、模板是可以根据字典数据动态变化的html网页2、模板可以根据视图中传递的字典数据动态生成相…

AtCoder Grand Contest 061(题解)

A - Long Shuffle 这道题本质是一个找规律的题 既然是打表题,我们先暴力把他打出来 (盗一张图.jpg) 接下来就是在这张图中挖掘答案 我们可以明显的看到偶数行是有一些规律的 要么是相邻对的互换,要么不变 不变和互换的位置也有讲究,在二进制…

DS期末复习卷(四)

一、选择题(每题1分共 20分) 1.设一维数组中有n个数组元素,则读取第i个数组元素的平均时间复杂度为(C )。 (A) O(n) (B) O(nlog2n) © O(1) (D) O(n2) 数组读取元素的时间复杂度为O(1) 2.设…

SpringCloud Alibaba

文章目录🚏 第十七章 SpringCloud Alibaba入门简介🚬 一、为什么使用Alibaba🚭 1、spring netflix进入维护模式🚭 Spring cloud alibaba🚬 二、如何使用?🚬 三、版本对应🚏 第十八章…

Jmeter接口测试+压力测试

jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单。因为jmeter是java开发的,所以运行的时候必须先要安装jdk才可以。jmeter是免…

朴素贝叶斯算法和拉普拉斯平滑详细介绍及其原理详解

相关文章 K近邻算法和KD树详细介绍及其原理详解朴素贝叶斯算法和拉普拉斯平滑详细介绍及其原理详解 文章目录相关文章前言一、朴素贝叶斯算法二、拉普拉斯平滑总结前言 今天给大家带来的主要内容包括:朴素贝叶斯算法、拉普拉斯平滑。这些内容也是机器学习的基础内容…

AXI-Lite 学习笔记

AXI-Lite 学习笔记 参考 FPGA:AXI_Lite总线基础2-1]、第二节 AXI总线介绍、ZYNQ PL与PS交互专题_哔哩哔哩_bilibili AXI-Lite总线系列1 - 基础知识_哔哩哔哩_bilibili AXI4 介绍 AXI4 是ARM公司提出的一种片内总线,描述了主从设备之间的数据传输方式。主…

深入浅出原核基因表达调控(乳糖操纵子、色氨酸操纵子)

原核基因表达调控 前言 自然界里,能量时有时无,各种生命为了让自己能够活下去,需要适应环境,在不同的环境合成不同的蛋白质。 原核生物体内有很多细胞,细胞里面有很多蛋白质,但是这些蛋白质在这些细胞里…

React Draggable插件实现拖拽功能

React Draggable插件实现拖拽功能1.下载Draggable插件2.引入Draggable插件3.设置一个div,并设置样式,并用Draggable包裹起来4.设置拖拽的范围5.Draggable常用props1.下载Draggable插件 npm install react-draggable2.引入Draggable插件 // 引入拖拽插件…

浅谈指向二维数组元素的指针变量

(1)指向数组元素的指针变量 例1.有一个3X4的二维数组,要求用指向元素的指针变量输出二维数组各元素的值. 编写程序 1 #include <stdio.h>2 int main()3 {4 int a[3][4] { 1,3,5,7,9,11,13,15,17,19,21,23 };5 int *p;6 for (p a[0]; p < a[0] 12; p) …

sni+tomcat漏洞复现

sni SNI产生背景 SSL以及TLS&#xff08;SSL的升级版&#xff09;为客户端与服务器端进行安全连接提供了条件。但是&#xff0c;由于当时技术限制&#xff0c;SSL初期的设计顺应经典的公钥基础设施 PKI(Public Key Infrastructure)设计&#xff0c;PKI 认为一个服务器只为一个…

SpringBoot简单集成OpenFeign

问题 在SpringBoot中简单集成Feign&#xff0c;不想使用Rest Temple了。 步骤 Maven <properties><spring.cloud-version>2022.0.1</spring.cloud-version></properties> <dependencyManagement><dependencies><dependency><g…

javaEE 初阶 — 连接管理机制

文章目录连接管理机制1. 建立连接&#xff08;三次握手&#xff09;2. 断开连接&#xff08;四次挥手&#xff09;TCP 的工作机制确认应答机制 超时重传机制 连接管理机制 比如 主机A 的空间存储了 主机B 的 ip 和 端口&#xff0c;主机B 的空间存储了 主机A 的 ip 和 端口。…

autoCAD2022 - 设置新的原点

文章目录autoCAD2022 - 设置新的原点概述笔记UCS原点设置功能的菜单位置ENDautoCAD2022 - 设置新的原点 概述 上次整板子的dxf时, 原来的原点不合适, 想调整一下. 当时整完了, 没记录. 这次用的时候, 又找半天… 设置新原点的功能, 不在顶部菜单中, 而是在视图右上角的UCS图标…

微服务网关(十二)redis流量统计

微服务网关&#xff08;十二&#xff09;redis流量统计中间件 redis流量统计中间件 redis详细&#xff1a; redis.go: // RedisConfPipline redis连接的设置方法&#xff0c;例如在流量统计中间件中设置数据和超时时间 func RedisConfPipline(pip ...func(c redis.Conn)) e…

Linux 内核定时器实验

目录 一、内核时间管理简介 二、内核定时器简介 三、驱动编写 1、修改makefile 2、添加定义 3、初始化led函数 4、添加调用 5、初始化定时器与定时器处理函数 这部分代码如下 四、ioctl函数 五、内核添加unlocked_ioctl 函数 1、添加设备操作集unlocked_ioctl成员 2…

【Android 后台持续定位】

最近工作中遇到了一个涉及后台持续性定位的问题。这里做一下总结&#xff1a;随着Android版本的条件&#xff0c;Google对后台服务管控的也是越来越严格。 这时有的小伙伴会说了&#xff0c;开启一个service然后把服务和通知关联一下变成前台服务&#xff0c;不就行了&#xff…