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

news/2024/5/20 1:59:43 标签: 学习, 笔记, javascript, typescript, 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. 安装指令:
typescript">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. 安装tsnpm 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.niftyadmin.cn/n/5307313.html

相关文章

TOGAF架构开发方法

TOGAF针对架构开发方法定义了一系列阶段和步骤,这些阶段和步骤对架构的迭代过程进行了详细、标准的描述。 企业架构的项目过程 一、预备阶段(Preliminary) 1、目标 预备阶段的目标是: 对组织的背景和环境进行审查(调…

RT_Thread 调试笔记:串口打印、MSH控制台 相关

说明:记录日常使用 RT_Thread 开发时做的笔记。 持续更新中,欢迎收藏。 1.打印相关 1.打印宏定义,可以打印打印所在文件,函数,行数。 #define PRINT_TRACE() printf("-------%s:%s:%d------\r\n", __FIL…

机器学习在缺陷检测中的突破与实践

机器学习在缺陷检测中的突破与实践主要体现在以下几个方面: 自动化检测:机器学习技术能够自动化地处理大量的数据,并通过学习和识别各种缺陷的模式和特征,实现自动化检测。这大大提高了缺陷检测的效率和准确性,减少了人…

SpringCloud微服务架构,适合接私(附源码)

一个由商业级项目升级优化而来的微服务架构,采用SpringBoot 2.7 、SpringCloud 等核心技术构建,提供基于React和Vue的两个前端框架用于快速搭建企业级的SaaS多租户微服务平台。 架构图 项目介绍 用户权益 仅允许免费用于学习、毕设、公司项目、私活等。…

免费的音频转换网站

https://convertio.co/zh/ 音频转换网站 我用mp4转mp3和wav格式,是免费的。 我用的时候是免费的,现在是2024年1月6日下午17点03. 据说超过100m是要收费的,我目前没有这么大的音频要转换,也没有实验过超过100m要不要收费。 希…

结队编程 - 华为OD统一考试

OD统一考试 题解: Java / Python / C 题目描述 某部门计划通过结队编程来进行项目开发,已知该部门有 N 名员工,每个员工有独一无二的职级,每三个员工形成一个小组进行结队编程,结队分组规则如下: 从部门中…

将文本文件导入Oracle数据库的简便方法:SQL Loader Express

需求 我有一个文本文件dbim.txt,是通过alert log生成的,内容如下: 2020-09-11 2020-09-11 ... 2023-12-03 2023-12-03 2023-12-26我已经在Oracle数据库中建立了目标表: create table dbim(a varchar(16));我想把日志文件导入Or…

win11家庭版开启远程桌面功能

win11家庭版不支持远程桌面 下载补丁 https://download.csdn.net/download/yonggeit/88706714 用谷歌浏览器会提示危险文件,选择“保留危险文件”即可,如果大家不放心,可用杀软进行查杀。 解压后 选择“install.bat”右键选择“以管理员身份…