TS学习笔记一:认识TS及环境准备

  本次学习笔记是具有一定js基础的情况下从头开始学习ts相关内容。
在这里插入图片描述

  1. 视频信息

    TS学习笔记一:认识TS及环境准备

  2. B站视频

    TS学习笔记一:认识TS及环境准备

  3. 西瓜视频
    https://www.ixigua.com/7320049274006274560

1.1.目的

  通过本次学习,学习并掌握ts基础知识,达到以下目的:
    1. 学习并掌握ts相关基础知识
    2. 实现能解答常见ts相关面试题
    3. 实现简单ts项目,实现实战锻炼

1.2.计划

  主要内容包括:
    1. ts基础使用方式,不同项目中使用ts
    2. ts特殊语法使用,ts项目配置
    3. ts面试基础题汇总
    4. ts项目实例等

1.3.学习资源

  官网:https://typescript.p2hp.com/,TypeScript 是 具有类型语法的 JavaScript。TypeScript 是一种基于 JavaScript 构建的强类型编程语言,可为你提供任何规模的更好工具。
  安装地址:https://ts.nodejs.cn/download
  开发文档:https://ts.nodejs.cn/docs/
  W3C文档:https://www.w3cschool.cn/typescript/typescript-tutorial.html

1.4.工具准备

  使用Visual Studio Code进行示例代码验证。

1.5.知识点

  1. ts的优势
      TypeScript的优势在于:它有更多的规则和类型限制,代码具有更高的预测性、可控性,易于维护和调试;对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序。
    另外,TypeScript的编译步骤可以捕获运行之前的错误。
  2. 安装指令:
npm install -g typescript|npm install typescript --save
  1. 运行方式:
    通过tsc直接编译或使用ts-node进行直接运行。

1.6.简单使用

  1. 全局安装指令:npm install -g typescript
      全局安装后,创建test.ts文件,输入代码后,可使用tsc test.ts,可将ts文件编译为js文件,编译后可像使用js一样正常使用js,示例如下:
    在这里插入图片描述
  2. 直接运行ts文件:npm i ts-node --g
      全局安装ts-node指令后,创建ts文件,可使用ts-node test.js直接运行ts文件,示例如下:
    在这里插入图片描述
  3. 项目中使用:npm install typescript --save
      使用npm init 创建项目,创建后使用npm install typescript --save安装ts,安装后可在项目中使用ts。可使用.\node_modules\.bin\tsc --init生成ts的项目配置文件,使用npm i @types/node --save-dev安装环境支持,示例如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    4.Express项目中使用:
      创建express项目,并在express项目中安装ts并使用ts相关语法进行基础功能的开发,安装流程如下:
      1. 安装express生成器:npm install -g express-generator
      2. 创建express项目:express tsexpress
      3. 安装ts:npm install typescript --save
      4. 安装依赖:
        (1)npm install @types/node --save-dev
        (2)npm install @types/express --save-dev
      5. 使用ts-node ./bin/www启动项目,启动会报错,需要将app等文件中的代码进行调整,写成ts的写法。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    5.Vue项目中使用:
      创建vue3项目,创建时选择开启ts即可,参考地址: https://cn.vuejs.org/guide/quick-start.html
    在这里插入图片描述

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

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

相关文章

养乐多公司确认 95 G 用户私密数据被泄露

一名自称为DragonForce的组织声称已经公开泄露了澳大利亚养乐多公司(Yakult Australia)的95.19 GB数据。Yakult Australia证实了这次网络攻击的真实性,并表示公司在澳大利亚和新西兰的IT系统都受到了影响。 该公司在一份声明中表示&#xff…

21.串的处理

题目 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String str sc.nextLine();char[] c str.toCharArray();int n c.length;StringBuilder st new StringBuilder();int i 0;while(i<n)…

C++学习笔记 ——this指针+对象数组

目录 一、Cthis指针 二、this指针的一个案列 三、对象数组 四、对象数组代码案列详解 一、Cthis指针 C中的this指针是一个特殊的指针&#xff0c;它指向当前对象的地址。在类中的成员函数中&#xff0c;this指针可以用来访问当前对象的成员变量和成员函数。 当我们调用一…

轻松玩转书生·浦语大模型趣味Demo

轻松玩转书生浦语大模型趣味Demo 大模型及InternLM模型介绍InternLM模型全链路开源 InternLM-Chat-7B智能对话Demo模型介绍模型部署webDemo运行 Lagent智能体工具调用DemoLagent介绍 浦语灵笔图文创作理解Demo通用环境配置模型下载 大模型及InternLM模型介绍 人工智能领域中 参…

shell 计算两个数据百分比,bc高级运算,bc计算系统磁盘剩余内存

目录 安装运算工具 bc使用方法高级数学库 (直接把公式 给他即可)计算百分比计算内存已经使用的百分比计算圆周率 安装运算工具 bc yum -y install bc使用方法 echo $((10/3)) | bc高级数学库 (直接把公式 给他即可) echo $((24)) | bc -l计算百分比 这里是 bc 的用法 也是计…

深度学习 Day24——J3-1DenseNet算法实战与解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 文章目录 前言1 我的环境2 pytorch实现DenseNet算法2.1 前期准备2.1.1 引入库2.1.2 设…

「Verilog学习笔记」编写乘法器求解算法表达式

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule calculation(input clk,input rst_n,input [3:0] a,input [3:0] b,output [8:0] c);reg [8:0] data1, data2 ; assign c data2 ; always (posed…

猫咪主食罐头巅峰、希喂、K9哪款好?猫咪主食罐头真实对比测评

在当前科学喂养观念广泛传播的背景下&#xff0c;铲屎官们对猫咪主食的营养价值和健康性有了更高的要求。作为猫咪日常成长和活动的主要能量来源&#xff0c;主食的营养价值对猫咪的健康状况有着直接的影响。特别是对于处于成长期的猫咪来说&#xff0c;选择一款优质的主食对其…

关键词优化完整 “操作 “指南

关键词优化的定义 在内容中突出相关关键词的行为&#xff0c;有助于将谷歌流量引向您的网站。关键词优化要求内容创建者做到以下几点&#xff1a; 研究并发现最佳关键词找到自然的方式在内容中突出相关词语 看看&#xff0c;你已经创建了一些很棒的内容。你做了研究&#xf…

K8S部署GitLab

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

SpringBoot 如何 返回页面

背景 RestController ResponseBody Controller Controller中的方法无法返回jsp页面&#xff0c;或者html&#xff0c;配置的视图解析器 InternalResourceViewResolver不起作用&#xff0c;返回的内容就是Return 里的内容。 Mapping ResponseBody 也会出现同样的问题。 解…

明明白白安装Python解释器(多版本共存切换)、Python IDE:PyCharm(专业版永久)、透彻!

Python解释器安装 ———————— 解释器&#xff08;英语&#xff1a;Interpreter&#xff09;。用户可以到Python的官网上直接下载Python解释器安装程序。 在浏览器地址栏中输入&#xff1a; http://www.python.org 需要最新专业版PyCharm永久使用权限的扫码免费获取&a…

基于FFmpeg的短视频编辑工具Cut

前言 最近在学习FFmpeg和音视频的相关知识&#xff0c;为了加强对FFmpeg的认识和了解&#xff0c;于是撸了一个短视频编辑软件Cut。 效果图先行&#xff1a; 技术点 启动页优化 但启动app的时候会有一个短暂的黑屏或者白屏。为什么呢&#xff1f; 是因为在App启动时&#x…

智能分析网关V4在工业园区周界防范场景中的应用

一、背景需求分析 在工业产业园、化工园或生产制造园区中&#xff0c;周界防范意义重大&#xff0c;对园区的安全起到重要的作用。常规的安防方式是采用人员巡查&#xff0c;人力投入成本大而且效率低。周界一旦被破坏或入侵&#xff0c;会影响园区人员和资产安全&#xff0c;对…

分布式系统——共识问题

1. 分布式系统 1.1 分布式系统的概念 分布式系统是由多台计算机组成的网络&#xff0c;这些计算机共同协作以实现一个共同的目标。在这种环境中&#xff0c;每台计算机作为一个独立的进程运行。但对最终用户来说&#xff0c;它们似乎是作为一个单一系统在操作。这个概念对于创…

大学生搜题软件,未来可期吗?

作为一家专注于软件开发的公司《智创有术》&#xff0c;我们致力于为客户提供创新、高效和可靠的解决方案。通过多年的经验和专业知识&#xff0c;我们已经在行业内建立了良好的声誉&#xff0c;并赢得了客户的信任和支持。 支持各种源码&#xff0c;网站搭建&#xff0c;APP&a…

数字孪生在增强现实(AR)中的应用

数字孪生在增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;中的应用可以提供更丰富、交互性更强的现实世界增强体验。以下是数字孪生在AR中的一些应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff…

视频剪辑实战:如何批量嵌套合并视频,提高剪辑效率必备技巧

在视频剪辑工作中&#xff0c;经常要处理大量的视频片段。要提高工作效率&#xff0c;批量嵌套合并视频成为了一项必备技巧。现在一起看看云炫AI智剪如何使用一些实用的技巧&#xff0c;快速、准确地完成批量嵌套合并视频的任务。 合并后的视频截图&#xff0c;由两段不同片段组…

【STM32】STM32学习笔记-DMA直接存储器存储(23)

00. 目录 文章目录 00. 目录01. DMA简介02. DMA主要特性03. 存储器映像04. DMA框图05. DMA基本结构06. DMA请求07. 数据宽度与对齐08. 数据转运DMA09. ADC扫描模式DMA10. 附录 01. DMA简介 小容量产品是指闪存存储器容量在16K至32K字节之间的STM32F101xx、STM32F102xx和STM32F…

解决Gitlab Prometheus导致的磁盘空间不足问题

解决Gitlab Prometheus导致的磁盘空间不足问题 用docker搭建了一个gitlab服务&#xff0c;已经建立了多个项目上传&#xff0c;但是突然有一天就503了。 df -TH查看系统盘&#xff0c;发现已经Used 100%爆满了。。。 &#x1f4a1;Tips&#xff1a;/dev/vda1目录是系统盘目录。…