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
    在这里插入图片描述
  • 16
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

军军君01

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值