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
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【激活函数】SELU 激活函数

1、介绍 SELU (Scaled Exponential Linear Unit) SELU是对ELU激活函数的改进,通过引入自动标准化机制,使得神经网络的隐藏层在训练过程中可以自动地保持输出的均值和方差接近于1。 # 定义 SELU 激活函数 def selu(x, alpha1.67326, lambda_1.0507):retu…

深圳易图讯实景三维数字孪生系统 实景三维电子沙盘

深圳易图讯实景三维数字孪生系统是一款基于三维地理空间的数字孪生系统,首先,该系统集成了多维度地理空间数据,可以将各类数据与应用需求进行充分整合,实现数据跨界融合、场景全角度可视等功能。其次,该系统具备智能化…

计算机毕业设计----ssm大学生兼职论坛

项目介绍 该项目是一个大学生校园兼职平台,分为前台和后台功能,主要用户有三种角色:分别是商家、学生、管理员。商家可以发布兼职信息,发布后,管理员进入后台确认信息是否有效,并且审核该兼职信息。学生登…

【ARM 嵌入式 编译系列 7.2 -- GCC 链接脚本中 DEFINED 函数与 “AT>“ 符号详细介绍】

文章目录 GCC 链接脚本中 DEFINED 函数DEFINED() 函数> (放置在哪个区域)AT> (加载地址) (填充字节) 在链接脚本中,组合示例 GCC 链接脚本中 DEFINED 函数 在 ARM GCC 链接脚本(.ld 文件)中,DEFINED() 是一种内置函数&…

Verifiable Credentials可验证证书 2023 终极指南

1. 引言 Dock公司为去中心化数字身份领域的先驱者,其自2017年以来,已知专注于构建前沿的可验证证书(Verifiable Credentials)技术。本文将阐述何为电子证书、电子证书工作原理、以及其对组合和个人的重要性。 伪造实物证书和数字…

Excel中快速隐藏中间四位手机号或者身份证号等

注意:以下方式必须再新增一列,配合旧的一列用来对比操作,即根据旧的一列的数据源,通过新的一列的操作逻辑来生成新的隐藏数据 1、快捷方式是使用CtrlE 新建一列:手动输入第一个手机号隐藏后的号码,即在N2单…

VS2017 搭建opencv工程

VS2017 搭建opencv工程 opencv在处理图像方面具有很强的能力,在使用opencv之前先需要造好轮子。 1、opencv 官网 ,下载对应的资源文件包。 根据自身选择。下载包之后,解压。分为build和sources source目录下分别存放: modules: …

C#中的值和引用笔记

文章目录 1. 简单介绍2. 如何判断值类型和引用类型3. 语句块4. 变量的生命周期5. 结构体中的值和引用6. 数组中的存储规则7. 结构体继承接口 1. 简单介绍 2. 如何判断值类型和引用类型 在代码中直接转到内部F12 如string类型 值类型int 3. 语句块 4. 变量的生命周期 5. 结构…

OpenHarmony如何隐藏系统状态栏、导航栏

前言 OpenHarmony源码版本:4.0release 开发板:DAYU / rk3568 一、通过setWindowSystemBarEnable方法设置 当我们应用的Alility继承的是UIAbility时,可以onWindowStageCreate(windowStage: window.WindowStage)方法中实现如下操作&#xf…

国科大图像处理2024速通期末——汇总2017-2019、2023回忆

国科大2023.12.28图像处理0854期末重点 图像处理 王伟强 作业 课件 资料 一、填空 一个阴极射线管它的输入与输出满足 s r 2 sr^{2} sr2,这将使得显示系统产生比希望的效果更暗的图像,此时伽马校正通常在信号进入显示器前被进行预处理,令p…

【C++】STL 算法 ③ ( 函数对象中存储状态 | 函数对象作为参数传递时值传递问题 | for_each 算法的 函数对象 参数是值传递 )

文章目录 一、函数对象中存储状态1、函数对象中存储状态简介2、示例分析 二、函数对象作为参数传递时值传递问题1、for_each 算法的 函数对象 参数是值传递2、代码示例 - for_each 函数的 函数对象 参数在外部不保留状态3、代码示例 - for_each 函数的 函数对象 返回值 一、函数…

Scikit-Learn线性回归(四)

Scikit-Learn线性回归四:梯度下降 1、梯度下降1.1、梯度下降概述1.2、梯度下降及原理1.3、梯度下降的实现2、梯度下降法求解线性回归的最优解2.1、梯度下降法求解的原理2.2、梯度下降法求解线性回归的最优解2.3、梯度下降法求解线性回归案例(波士顿房价预测)3、Scikit-Learn…

女性需要了解的健康知识

女性需要了解的健康知识 一:脸部 羊大师发现,你的面容不断透露出你的生活态度,可以从一个女人的脸上看出她过得好不好。从脸色是苍白无华还是红润可见一斑;从是否素颜自然还是妆容精致,这一切都显露在他人面前。因此&…

vue接入海康4G版摄像头通过萤石云平台推送视频流教程

需求 最近需要接入海康视频摄像头,然后把视频的画面接入到自己的网站系统中。以前对接过rtsp固定IP的显示视频,这次的不一样,没有了固定IP。海康的解决办法是,摄像头通过配置服务器到萤石云平台,然后购买企业版账号和…

【开源】基于JAVA语言的智能教学资源库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课程资源模块2.4 课程作业模块2.5 课程评价模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 课程档案表3.2.2 课程资源表3.2.3 课程作业表3.2.4 课程评价表 四、系统展示五、核心代…

Vue CLI初识

脚手架Vue CLI 基本介绍 Vue CLI 是Vue官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】 好处 开箱即用,零配置内置babel等工具标准化的webpack配置 使用步骤 全局安装(只需安装一次即可…

lenovo联想小新Pro-13 2020 Intel IML版笔记本电脑(82DN)原装出厂Win10系统镜像

链接:https://pan.baidu.com/s/1bJpfXudYEC7MJ7qfjDYPdg?pwdjipj 提取码:jipj 原装出厂Windows10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、联想电脑管家等预装程序 所需要工具:16G或以上的U盘 文件格式&a…

机器学习项目标记图像数据 - 安装LabelImg及功能介绍

什么是LabelImg? LabelImg 是一款流行的图像标注工具,主要用于计算机视觉领域。它允许用户为机器学习项目标记图像数据,特别是用于训练目标检测模型。 如何安装LabelImg pip install PyQt5 pip install pyqt5-tools pip install lxml pip …

WPF使用 MahApps.Metro,如何更改MetroWindow标题的字体?

WPF 使用 MahApps.Metro, 如何更改MetroWindow标题的字体? WPF中,在使用 MahApps.Metro后,MetroWindow窗口头部标题的字体默认是大写的;标题显示大写很多时候不是实际需要的,那怎么修改根据XAML输入的内容显示呢&#…

【unity小技巧】实现没有动画的FPS武器摇摆和摆动效果

文章目录 前言开始完结 前言 添加程序摇摆和摆动是为任何FPS游戏添加一些细节的非常简单的方法。但是并不是所以的模型动画都会配有武器摆动动画效果,在本文中,将实现如何使用一些简单的代码实现武器摇摆和摆动效果,这比设置动画来尝试实现类…