1.TypeScript入门之TS初体验(运行TS代码)

news/2024/11/7 18:36:22/

Ⅰ.TypeScript介绍

1.1 TypeScript是什么

TypeScript(简称TS)是JavaScript的超集(JS有的TS都有)。

TypeScript = Type + JavaScript(在JS的基础之上,为JS添加了类型支持

//TS代码:有明确的类型,即:number(数值类型)
let age1: number = 18
//JS代码:无明确类型
let age2 = 18

TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行(浏览器等)

1.2 TypeScript为什么要为JS提供类型支持?

背景:JS类型系统存在先天缺陷,JS代码中绝大部分错误都是类型错误(Uncaught TypeError)。

问题:增加了找bug,改bug的时间,严重影响了开发效率。

*TS属于静态类型的编程语言,JS属于动态类型的编程语言。

静态类型:编译期做类型检查;动态类型:执行期做类型检查

1.3 TS 相比于 JS 的优势

  1. 更早(写代码的同时)发现错误,减少改bug,找bug的时间,提升开发效率。
  2. 程序中任何位置的代码都有代码提示,随时随地的安全感,增强了开发体验。
  3. 强大的类型系统提升了代码的可维护性,使得重构代码更加容易
  4. 支持最新的ECMAScript语法,优先体验最新的语法,让你走在前端技术的最前沿。
  5. TS 类型推断 机制,不需要在代码中的每个地方都显示标注类型,让你在享受优势的同时,尽量降低了成本。

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

Ⅱ.TypeScript初体验

2.1 安装编译TS 的工具包

Node.js/浏览器 都只认识JS代码,不认识TS代码。需要先将TS代码转换为JS代码后,然后才能运行。

npm i -g typescript

typescript包:用来编译TS代码的包,提供了 tsc命令 ,实现了TS -> JS的转换。

tsc -v(查看TypeScript的版本)

2.2 编译并运行TS 代码

1.创建hello.ts文件(注意:TS文件后缀名为**.ts**)。

2.将TS编译为JS:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)。

3.执行JS 代码:在终端中输入命令,node hello.js


创建TS文件 ————> **编译TS ** ————> 执行 JS

所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可

注意:由TS编译生成的 JS 文件 ,代码中就没有类型信息了

2.3 简化运行TS的步骤

使用 ts-node包,“直接”在Node.js中执行 TS 代码,ts-node并不会生成 JS 文件

安装命令:npm i -g ts-node(ts-node包提供了ts-node命令)。

查看版本:ts-node -v

使用方式:ts-node hello.ts

解释:ts-node命令在内部偷偷的将 TS -> JS ,然后,再运行 JS 代码

~~
~~
下一章节:TypeScript入门之TS常用类型(1)


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

相关文章

TypeScript(TS)基础内容详细介绍

目录 一、TypeScript概念 二、TypeScript特点 三、开发环境配置 四、初识ts 五、TypeScript类型声明 1、any: 2、number数字类型 3 string字符串类型 4 boolean布尔类型 表示逻辑值:true 和 false。 5 数组类型 6 元组类型 7 enum枚举类型…

TS的声明文件

TS的声明文件 .ts文件: 既包含类型信息又可执行代码。可以被编译成 .js 文件。 .d.ts文件: 只包含类型信息的类型声明文件。不会生成 .js 文件,仅用于提供类型信息。 .ts是implementation(代码实现文件).d.ts是de…

Ts/Typescript基础运用

01、什么是Typescript、ts ts: TypeScript 的缩写,是微软开发的编程语言, TypeJavaScript (Type是类型 》在JS基础之上,为了JS添加了支持类型) 那我们为什么要学习ts呢?js不香嘛? 我们来看这一段js代码 let age 18age 19 //正确…

TS基础

1 写在开始之前,为什么要学习TS vue2.x中的组件是通过声明的方式传入一系列option,和TypeScript的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。 而3.0修改了组件的声明方式,改成了类式的写法&…

TCC

引言:TCC事务的由来在当前如火如荼的互联网浪潮下,如何应对海量数据、高并发成为大家面临的普遍难题。广大IT公司从以往的集中式网站架构,纷纷转向分布式的网站架构,随之而来的就是进行数据库拆分和应用拆分,如何在跨数…

搭建 TypeScript 环境 TSC 命令的使用 配置 tsconfig 文件

目录 一、全局配置 TypeScript 环境1、查看 TS 版本2、全局安装 TS 二、TSC 命令的使用1、使用 tsc 生成 tsconfig.json 配置文件2、通过 tsc 编译指定的 ts 文件3、通过 tsc 自动编译 ts 文件 三、tsconfig.json 配置文件的解析1、顶层属性(1)、compile…

TS入门详解(typescript)

一、什么是ts ts可以理解为JavaScript的超集,它是由微软公司开发的一种编程语言,可以运行在任何浏览器还有操作系统 二、TypeScript的发展优缺点 优点: 增加了代码的可读性和可维护性 非常包容(可以定义所有类型) …

TS的类型声明

目录 1.TS把JS变成了静态类型的语言,可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的,但是TS会考虑函数的参数类型和个数,且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…