当前位置: 首页>编程语言>正文

TypeScript部署 typescript is


文章目录

  • 1. TypeScript 介绍
  • 1.1 TypeScript 是什么
  • 1.2 TypeScript 为什么要为 JS 添加类型支持?
  • 1.3 TypeScript 相比 JS 的优势
  • 2. TypeScript 初体验
  • 2.1 安装编译 TS 的工具包
  • 2.2 编译并运行 TS 代码
  • 2.3 简化运行 TS 的步骤



1. TypeScript 介绍

1.1 TypeScript 是什么

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

TypeScript部署 typescript is,TypeScript部署 typescript is_编程语言,第1张

1.2 TypeScript 为什么要为 JS 添加类型支持?

背景:JS 的类型系统存在“先天缺陷”,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)。
问题:增加了找Bug、改 Bug 的时间,严重影响开发效率。

从编程语言的动静来区分,TypeScript 属于静态类型的编程语言,JS 属于动态类型的编程语言。
静态类型:编译期做类型检查; 动态类型:执行期做类型检查 代码编译和代码执行的顺序:1 编译 2 执行

对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)
对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)
并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间

1.3 TypeScript 相比 JS 的优势

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

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

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

问题:为什么要安装编译 TS 的工具包?
回答:Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为JS 代码,然后才能运行。

安装命令:npm i -g typescript。

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

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_02,第2张

验证是否安装成功:tsc –v(查看 typescript 的版本)。

TypeScript部署 typescript is,TypeScript部署 typescript is_TypeScript部署_03,第3张

2.2 编译并运行 TS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_04,第4张

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

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

2.3 简化运行 TS 的步骤

问题描述:每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
简化方式:使用 ts-node 包,直接在 Node.js中执行 TS 代码。

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

使用方式:ts-node hello.ts 解释:ts-node 命令在内部偷偷的将 TS -> JS(注意这里外部不会重新生成JS文件),然后,再运行 JS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_前端_06,第6张



文章目录

  • 1. TypeScript 介绍
  • 1.1 TypeScript 是什么
  • 1.2 TypeScript 为什么要为 JS 添加类型支持?
  • 1.3 TypeScript 相比 JS 的优势
  • 2. TypeScript 初体验
  • 2.1 安装编译 TS 的工具包
  • 2.2 编译并运行 TS 代码
  • 2.3 简化运行 TS 的步骤



1. TypeScript 介绍

1.1 TypeScript 是什么

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

TypeScript部署 typescript is,TypeScript部署 typescript is_编程语言,第1张

1.2 TypeScript 为什么要为 JS 添加类型支持?

背景:JS 的类型系统存在“先天缺陷”,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)。
问题:增加了找Bug、改 Bug 的时间,严重影响开发效率。

从编程语言的动静来区分,TypeScript 属于静态类型的编程语言,JS 属于动态类型的编程语言。
静态类型:编译期做类型检查; 动态类型:执行期做类型检查 代码编译和代码执行的顺序:1 编译 2 执行

对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)
对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)
并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间

1.3 TypeScript 相比 JS 的优势

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

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

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

问题:为什么要安装编译 TS 的工具包?
回答:Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为JS 代码,然后才能运行。

安装命令:npm i -g typescript。

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

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_02,第2张

验证是否安装成功:tsc –v(查看 typescript 的版本)。

TypeScript部署 typescript is,TypeScript部署 typescript is_TypeScript部署_03,第3张

2.2 编译并运行 TS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_04,第4张

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

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

2.3 简化运行 TS 的步骤

问题描述:每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
简化方式:使用 ts-node 包,直接在 Node.js中执行 TS 代码。

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

使用方式:ts-node hello.ts 解释:ts-node 命令在内部偷偷的将 TS -> JS(注意这里外部不会重新生成JS文件),然后,再运行 JS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_前端_06,第6张



文章目录

  • 1. TypeScript 介绍
  • 1.1 TypeScript 是什么
  • 1.2 TypeScript 为什么要为 JS 添加类型支持?
  • 1.3 TypeScript 相比 JS 的优势
  • 2. TypeScript 初体验
  • 2.1 安装编译 TS 的工具包
  • 2.2 编译并运行 TS 代码
  • 2.3 简化运行 TS 的步骤



1. TypeScript 介绍

1.1 TypeScript 是什么

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

TypeScript部署 typescript is,TypeScript部署 typescript is_编程语言,第1张

1.2 TypeScript 为什么要为 JS 添加类型支持?

背景:JS 的类型系统存在“先天缺陷”,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)。
问题:增加了找Bug、改 Bug 的时间,严重影响开发效率。

从编程语言的动静来区分,TypeScript 属于静态类型的编程语言,JS 属于动态类型的编程语言。
静态类型:编译期做类型检查; 动态类型:执行期做类型检查 代码编译和代码执行的顺序:1 编译 2 执行

对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)
对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)
并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间

1.3 TypeScript 相比 JS 的优势

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

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

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

问题:为什么要安装编译 TS 的工具包?
回答:Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为JS 代码,然后才能运行。

安装命令:npm i -g typescript。

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

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_02,第2张

验证是否安装成功:tsc –v(查看 typescript 的版本)。

TypeScript部署 typescript is,TypeScript部署 typescript is_TypeScript部署_03,第3张

2.2 编译并运行 TS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_javascript_04,第4张

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

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

2.3 简化运行 TS 的步骤

问题描述:每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
简化方式:使用 ts-node 包,直接在 Node.js中执行 TS 代码。

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

使用方式:ts-node hello.ts 解释:ts-node 命令在内部偷偷的将 TS -> JS(注意这里外部不会重新生成JS文件),然后,再运行 JS 代码

TypeScript部署 typescript is,TypeScript部署 typescript is_前端_06,第6张



https://www.xamrdz.com/lan/5nt1924446.html

相关文章: