【TypeScript】TS入门及基础学习（一）
一、前言
TypeScript是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型，支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。
TypeScript可编译为可读的、基于标准的 JavaScript。TypeScript属于强类型语言，JavaScript属于弱类型语言，强类型语言支持静态语言和动态语言，弱类型语言支持动态语言。
这里是TypeScript官方仓库 TypeScript ,有兴趣的可以更深层次了解其本质,了解官方更加详细的说明。
二、基本概念
1.强类型语言和弱类型语言
- 强类型语言：是指编程语言在编译或解释时会严格检查变量类型，变量的数据类型必须在编译时或运行时确定，不同数据类型之间不能相互赋值或运算，除非进行强制类型转换。强类型语言的优点是能够提高程序的安全性和可靠性，减少类型错误带来的问题。比如C++、Java、C#、Python等
- 弱类型语言：是指编程语言在编译或解释时不会对变量类型进行严格检查，变量的数据类型可以随时改变，同一变量可以用来存储不同类型的数据，不需要进行强制类型转换。弱类型语言的优点是灵活、简单，开发效率高。PHP、Ruby、Perl等。
2.动态语言和静态语言
- 静态语言：在编译时进行类型检查。这意味着变量和函数参数类型必须在编码期间指定，并且在编译时不能更改。静态语言的优势在于它们通常更安全，因为编译器可以在编译时捕获许多错误，例如类型不匹配和符号未定义等。
- 动态语言：是一种类型的编程语言，在运行时可以动态地进行类型检查。这意味着，在程序运行时可以改变变量的类型或者函数的参数类型。动态语言的优势在于开发速度非常快，因为它们通常比静态语言更灵活，更容易编写和理解。
三、TypeScript与JavaScript之间的区别和相同
| TypeScript | JavaScript | |
|---|---|---|
| 类型 | 强类型化面向对象的编译语言。它是由微软开发的。 | 轻量级的解释型语言。它是由Netscape推出的。 |
| 实施端 | 内部实现不允许在服务器端使用它。它只能在客户端使用。 | 可以在客户端和服务器端使用 |
| 数据绑定 | 在代码级别绑定数据，Typescript 使用类型和接口等概念来描述正在使用的数据。 | 没有引入这样的概念。 |
| 汇编 | 用TypeScript编写的代码首先需要编译，然后转换为JavaScript。此转换过程称为转译。 | 在JavaScript的情况下不需要编译 |
| 模块化编程 | 支持模块、泛型、接口 | 不支持模块、泛型、接口 |
| 函数中的可选参数 | 编写的函数代码中允许任意数量的可选参数 | 不支持可选参数函数 |
| 应用方向 | 用于解决大型项目的代码复杂性 | 脚本语言，用于创建动态网页 |
| 发现错误时间 | 编译期间发现并纠正错误 | 解释型语言，只能在运行时发现错误。 |
四、环境搭建及演练准备
对于TypeScript，不能像JavaScript直接在浏览器可以运行，因此我们需要安装编译环境，如果仅仅是用来练习，则可以有两种方案进行练习与演练，其一就是直接安装到本地练习，另一种就是使用官方提供的在线环境进行演练。
如果是真实项目中使用，得需要使用babel等工具预先处理。
4.1 安装到本地
- 安装
使用npm或yarn进行全局安装到本地yarn add typescript -g 或者 npm install typescript -g - 查看版本
安装完之后，查看安装的版本tsc -V
-
编译ts文件，编译后生成以js结尾的同名文件
tsc xxx.ts
我们在项目中创建 hellowworld.ts , 添加内容如下，针对变量 userName 进行了类型定义，定义为基本数据类型string， 然后通过 tsc 命令进行编译，就可以编译成浏览器可直接运行的js代码
var userName:string = '我是suwu150';
console.log(userName);
编译后，能够发现在同文件夹下生成同名JavaScript代码,文件名为 hellowworld.js ，其内容是编译之后的JavaScript代码，可直接在浏览器运行。
var userName = '我是suwu150';
console.log(userName);
4.2 在线运行
这个是官方提供的一个在线演练的环境，后面有很多演练的例子，我们会在此基础上进行演示
官方在线演示环境的地址： https://www.typescriptlang.org/play/
同样的，我们将 TypeScript 代码编写到左侧编辑器，能够同步在右侧看到编译之后的结果
var userName:string = '我是suwu150';
console.log(userName);
编译后结果，右边是js代码，左边是ts代码。
以上就是TypeScript基础知识及环境准备。希望喜欢的同学能够点赞关注。
文章来源：https://www.toymoban.com/news/detail-619836.html
文章来源地址https://www.toymoban.com/news/detail-619836.html
到了这里，关于【TypeScript】TS入门及基础学习（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
