TS快速上手初遇：Hello，TypeScript

Posted 2022-12-03 YK菌

文章目录

• 一、学习TypeScript的意义
• • 1. 强类型 VS 弱类型
  • 2. 静态语言 VS 动态语言
• 二、TypeScript特性
• 三、搭建TypeScript环境

嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信公众号：ykyk2012]

今天开始学习TypeScript，一点一点来，因为参加更文活动，所以每次博文的内容都比较少，我会放在TypeScript专栏中，欢迎关注我的专栏~

这次先上参考链接：

• 官网：https://www.typescriptlang.org/
• 中文网：https://www.tslang.cn/ （貌似很久没维护了）
• 掘金小册： https://juejin.cn/book/6844733813021491207
• 书籍：《深入理解TypeScript》 https://jkchao.github.io/typescript-book-chinese/
• B站尚硅谷视频：https://www.bilibili.com/video/BV1Xy4y1v7S2

一、学习TypeScript的意义

• 为javascript提供可选的类型系统
• 兼容当前及未来的JavaScript的特性

1. 强类型 VS 弱类型

我们都知道JavaScript是一门弱类型的语言，也就是说，我们定义一个变量，不需要考虑它的类型，比如我们定义一个变量a，给它赋值为1

let a = 1

然后我们可以把它赋值为一个字符串、数组、对象等等任意类型

a = 'yk'
a = [1,3,4]
a = name: "YK"

这样做虽然写起来很爽，不会报错，但是会有很多隐患。如果代码出现问题，很难找到问题出在哪里。

强类型语言的特点就是不允许程序在发生错误后继续执行

弱类型的一个特点就是在计算时，不同类型之间对使用者透明地对变量进行隐式转换。

2. 静态语言 VS 动态语言

都说JavaScript是动态语言，而Java是静态语言，那他们的区别到底是什么呢？

一门语言在编译时报错，那么是静态语言，如果在运行时报错，那么是动态语言。

用官方一点的话说就是

在编译阶段确定所有变量的类型的是静态类型语言；在执行阶段确定所有变量的类型的是动态类型语言。

所以说，类型有利于代码的重构，它有利于编译器在编译时而不是运行时捕获错误。我们在编写代码的时候就能避免很多错误，这样可以提高我们编码(找bug)的效率！

最后来个对比表格

静态类型语言	动态类型语言
对类型极度严格	对类型非常宽松
立即发现错误	不能立即发现（单元测试）
运行时性能好	运行时性能差（可以改善 v8）
自文档化	可读性差（工具生成文档）

二、TypeScript特性

TypeScript作为JavaScript的超集，TypeScript究竟比JavaScript多了哪些特性

• 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
• TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
• TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
• 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

也就是说我们编写的TypeScript代码，最终要编译成任意版本的JavaScript，这样就可以在任何可以使用JavaScript的地方使用它了~

三、搭建TypeScript环境

TS代码需要通过编译器编译为JS，然后再交由JS解析器执行，所以我们要搭建TypeScript环境来写我们的TS代码

npm install -g typescript

创建一个ts文件helloTS.ts

console.log('Hello TS')

编译ts文件

tsc .\\helloTS.ts

结果会生成js文件

这样就可以在浏览器中运行，也可以用node来执行了~

https://www.typescriptlang.org/play

可以在官网playground中查看ts编译后的js代码

最后，欢迎关注我的专栏，和YK菌做好朋友！