TypeScript 初体验

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript 初体验相关的知识,希望对你有一定的参考价值。

1. TypeScript 概述

  • javascript 是什么
  • TypeScript 是什么
  • TypeScript 相比 JavaScript 的优势

1.1 JavaScript 是什么

 
 

JavaScript 的运行环境:1 浏览器 2 Node.js

Node.js 让 JavaScript 摆脱了浏览器的束缚,可以实现服务端/桌面端编程等。

其他: 微信小程序、微信小游戏 等等。

总结:JavaScript 既能运行在 浏览器 中,也可以运行在 Node.js 中,前后端通吃,无所不能。

 

 1.2 TypeScript 是什么

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

TypeScript = Type + JavaScript(为 JS 添加了类型系统)。

TypeScript 微软开发的开源编程语言,设计目标是开发大型应用。 可以在任何浏览器、任何计算机、任何操作系统上运行。

// TypeScript 代码:有明确的类型,即 : number (数值类型)
let age: number = 18
// JavaScript 代码:无明确的类型
let age = 18

1.3 TypeScript 相比 JS 的优势

JS 的类型系统存在“先天缺陷” ,绝大部分错误都是类型错误( Uncaught Type Error )。
 
  • 优势一:类型化思维方式,使得开发更加严谨,提前发现错误,减少改 Bug 时间
  • 优势二:类型系统提高了代码可读性,并使维护和重构代码更加容易
  • 优势三:补充了接口、枚举等开发大型应用时 JS 缺失的功能
  •  Vue 3 源码使用 TS 重写,释放出重要信号:TS 是趋势。
  •  Angular 默认支持 TSReact TS 完美配合,是很多大型项目的首选。
  • 我呼吁:准程序员们,为了发量、为了对象,让我们手拉手一起用 TS 吧!
     

2. 开发工具准备
 

2.1 开发工具介绍

1. 写代码的工具:Visual Studio Code(简称:VSCode),微软开发的代码编辑工具

2. 运行 TS / JS 代码的工具:Node.js,一个基于 Chrome 浏览器 V8 解析引擎的 JavaScript 运行环境。

说明:本课程中,TypeScript 基础知识,使用 Node.js 来运行。

 

2.2 安装 VSCode

1. 按照步骤引导安装即可

2. 安装中文汉化插件:Chinese (Simplified) Language Pack for Visual Studio Code

3. 点击右下角弹出的对话框,重启(RestartVSCode

 

2.3 安装 Node.js

1. 按照步骤引导安装即可

2. 在终端(黑窗口)中输入:node --version,验证是否安装成功(注意:需要重启VSCode)。

3. 如果打印出版本信息说明安装成功。

 

 

2.4 安装解析 TS 的工具包

问题:为什么要安装这个工具包?

答案:

  • Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。
  • 需要先将 TS 代码转化为 JS,然后就可以在 Node.js/浏览器中运行了。

 安装步骤:

1. 打开 VSCode 终端。

2. 输入安装命令:

  • npm i -g typescript 敲回车,来安装(注意:需要联网)。
  • typescript:就是用来解析 TS 的工具包。提供了 tsc 命令,实现了 TS -> JS 的转化。
  • npm:用来安装前端开发中用到的包,是安装 Node.js 时自动安装的
  • i(install):表示安装。
  • -g(--global):全局标识,可以在任意目录中使用该工具。

 

3. 第一个 TS 文件

3.1 步骤

1. 创建ts文件:

① 在桌面中创建文件夹:code。

② 在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹)。

③ 在 VSCode 中新建ts文件:hello.ts(注意:文件后缀名为 .ts)。

2. 写代码:在 hello.ts 文件中,写入以下代码,并保存。

console.log('Hello TS')

 

问题1:TS 代码能直接在 Node.js 里面运行吗?不能

问题2:该如何处理呢?

1 TS代码 -> JS代码 
2 执行JS

 
3. 执行代码,分两步:

① TS代码 -> JS代码:在当前目录打开终端,输入命令 tsc hello.ts 敲回车。

② 执行JS:输入命令 node hello.js(注意:后缀为 .js)。

解释:

 tsc hello.ts 会生成一个 hello.js 文件。

 node hello.js 表示执行这个 JS 文件中的代码。

3.2 简化执行TS的步骤

问题:每次修改代码后,都要重复执行两个命令才能执行 TS 代码,太繁琐。

执行 TS 代码的两个步骤:
1 tsc hello.ts
2 node hello.js

简化方式:使用 ts-node 包,“直接”在 Node.js 中执行 TS 代码。

  • 安装命令:npm i –g ts-node。
  • 使用方式:ts-node hello.ts

解释:

  • ts-node 包内部偷偷的将 TS -> JS,然后,执行 JS 代码。
  • ts-node 包提供了命令 ts-node,用来执行 TS 代码。
现在只需一步:
ts-node hello.ts

4. 注释和输出语句

4.1 注释

注释是对代码的解释说明,用来帮助阅读和理解代码。

注意:注释的内容是不会执行的。

推荐在写代码时,添加代码注释,增加代码的可读性。

北冥有鱼,其名为鲲1。
注1:鲲(kūn),本指鱼卵,此处借用为表大鱼之名。
注释有两种形式:1 单行注释 2 多行注释。
  形式一:单行注释
// 两个斜线,表示单行注释,只能注释这一行内容
// 这是第二行注释
// 快捷键:ctrl + /

形式二:多行注释
/*
这是多行注释
可以注释多行内容
快捷键:shift + alt + a
*/

4.2 输出语句

作用:在终端(黑窗口)中打印信息。

Node.js 会执行我们写的代码,为了能够知道代码执行的结果,就需要使用输出语句,将结果打印出来

console.log('Hello TS')

解释:

  •  console 表示控制台,在 Node.js 中,指的是终端(黑窗口)。
  •  小括号中的内容,表示要打印的信息。

 


黑马前端专栏干货多多,关注再学,好方便~

2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~

以上是关于TypeScript 初体验的主要内容,如果未能解决你的问题,请参考以下文章

前端开发React+TypeScript 项目初体验

TypeScript之面向对象初体验

Ant Design Pro V5 初体验(typescript版)

邂逅TypeScript

Android开发学习之路--React-Native混合开发初体验

前端工程师梭哈初体验(基于Nest.js写服务端代码)