【TypeScript】Ts基本概念

news/2024/11/22 18:55:28/

TypeScript基本概念

TypeScript 是什么?

目标:能够说出什么是typescript

内容:

  • TS 官方文档
  • TS 中文参考 - 不再维护

在这里插入图片描述

  • TypeScript 简称:TS,是 JavaScript 的超集,简单来说就是:JS 有的 TS 都有

在这里插入图片描述

  • TypeScript = Type + JavaScript(在 JS 基础之上,为 JS 添加了类型支持
  • TypeScript 是微软开发的开源编程语言,可以在任何运行 JavaScript 的地方运行

在这里插入图片描述

为什么要有typescript

目标:能够说出为什么需要有typescript

内容:

  • 背景:JS 的类型系统存在“先天缺陷”弱类型,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)
    • 开发的时候,定义的变量本应该就有类型
  • 这些经常出现的错误,导致了在使用 JS 进行项目开发时,增加了找 Bug、改 Bug 的时间,严重影响开发效率

为什么会这样? var num = 18 num.toLowerCase()

  • 从编程语言的动静来区分,TypeScript 属于静态类型的编程语言JavaScript 属于动态类型的编程语言

    • 静态类型:编译期做类型检查
    • 动态类型:执行期做类型检查
  • 代码编译和代码执行的顺序:1 编译 2 执行

  • 对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)

  • 对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)

并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间

对比:

  • 使用 JS:
    1. 在 VSCode 里面写代码
    2. 在浏览器中运行代码 --> 运行时,才会发现错误【晚】
  • 使用 TS:
    1. 在 VSCode 里面写代码 --> 写代码的同时,就会发现错误【早】
    2. 在浏览器中运行代码

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合,TypeScript 已成为大中型前端 项目的首选编程语言

目前,前端最新的开发技术栈:

  1. React: TS + Hooks
  2. Vue: TS + Vue3
  • 注意: Vue2 对 TS 的支持不好~

安装编译 TS 的工具包

目标:能够安装ts的工具包来编译ts

内容:

  • 问题:为什么要安装编译 TS 的工具包?
  • 回答:Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为 JS 代码,然后才能运行
  • 安装命令:npm i -g typescript 或者 yarn global add typescript
    • typescript 包:用来编译 TS 代码的包,提供了 tsc 命令,实现了 TS -> JS 的转化
    • 注意:Mac 电脑安装全局包时,需要添加 sudo 获取权限:sudo npm i -g typescript yarn 全局安装:sudo yarn global add typescript
  • 验证是否安装成功:tsc –v(查看 typescript 的版本)

在这里插入图片描述

编译并运行 TS 代码

目标:能够理解typescript的运行步骤

内容:

  1. 创建 hello.ts 文件(注意:TS 文件的后缀名为 .ts
  2. 将 TS 编译为 JS:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)
  3. 执行 JS 代码:在终端中输入命令,node hello.js

1 创建 ts 文件 ===> 2 编译 TS ===> 3 执行 JS

  • 说明:所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可
  • 注意:由 TS 编译生成的 JS 文件,代码中就没有类型信息了

真正在开发过程中,其实不需要自己手动的通过tsc把ts文件转成js文件,这些工作应该交给webpack或者vite来完成

创建基于TS的vue项目

目标:能够使用vite创建vue-ts模板的项目

内容:

基于vite创建一个vue项目,使用typescript模板

yarn create vite vite-ts-demo  --template vue-ts

http://www.ppmy.cn/news/142844.html

相关文章

typescript(ts)基础

基本类型 const a: string boo // 不写string ts解析器会做类型推论 const b: number 123 // 可 NaN Infinity 也支持16/2/8进制 const c: boolean true // 类型声明/类型注解1 << 1 位运算有啥用?? 1 << 2 & | ! 是啥? 怎么来的? 为什么用ts(优点) …

什么是ts(typeScript)

ts:官网地址&#xff1a;https://www.tslang.cn/ 首先通过 npm 全局安装 TypeScript&#xff1a;npm i -g typescript 全局 安装 ts命令&#xff1a; npm install -g typescript 使用 tsc -v 检测是否安装成功 创建ts项目过程&#xff1a; 1.新建一个ts文件 2.在控制终端…

ICM TSCC视频格式的播放

最近从网上下载了些教学视频&#xff0c;文件后缀为.avi&#xff0c;但我将常见的AVI解码软件都装上了&#xff0c;还是无法观看视频&#xff1a;视频无法得到解码。 用realone播放提示&#xff0c;找不到支持icm tscc格式的解码器。 网上搜索了一遍&#xff0c;有人提到装一个…

ts基础应用

目录 一 认识ts 二 ts优势 三 初始化安装 四 数据类型 静态类型 基本类型与对象类型 函数相关类型 五 类型注解与类型推断 六 基本语法练习 坑一: 类型为 any 所以只能这在一样 坑二 &#xff1a;其他的case 一 认识ts ts 是一个js 的超级集群&#xff1b;他不会被…

8.TypeScript入门之TS类型声明文件

~~ ~~ 上一章节&#xff1a;7.TypeScript入门之TS高级类型&#xff08;索引签名类型和映射类型&#xff09; Ⅴ.TypeScript 类型声明文件 概述 今天几乎所有的 JavaScript 应用都会引入许多第三方库来完成任务需求。 这些第三方库不管是否是用 TS 编写的&#xff0c;最终都…

【科普】TS文件格式:什么是TS?如何打开,编辑和转换它?

概要 对于TS文件&#xff0c;相信很多人都对它很陌生&#xff0c;它并不像MP4格式那么流行。为了让大家进一步了解TS文件&#xff0c;本文将围绕TS文件格式&#xff0c;详细介绍它的来源、适用范围、打开方式以及如何编辑转换等。什么是TS文件格式 TS&#xff08;Transport St…

TS科普 1 简介

TS科普 1 TS是日本高清摄像机拍摄下进行的封装格式&#xff0c;全称为MPEG2-TS。TS即"Transport Stream"的缩写。它是分包发送的&#xff0c;每一个包长为188字节。包的结构为&#xff0c;包头为4个字节&#xff0c;负载为184个字节。在TS流里可以填入很多类型的数…

TCTCTC

题源PTA,侵删。 1-1 毕业设计中关键技术分析部分应该写前人相关工作的综述。F (1分) 1-2 学术会议中的Poster展示环节只需要展板到位&#xff0c;不要求作者必须守在展板前。 (1分) F 1-3 开题报告中的初步方案应该简述如何实现各项任务&#xff0c;包括任务之间的关系、…