discuz 网站风格广州seo

【TypeScript】TS入门及基础学习（一）

一、前言

TypeScript 是一种用于应用程序规模的 JavaScript 语言。 TypeScript 向 JavaScript 添加了可选类型，支持用于任何浏览器、任何主机、任何操作系统的大规模 JavaScript 应用程序的工具。

TypeScript 可编译为可读的、基于标准的 JavaScript。TypeScript属于强类型语言，JavaScript属于弱类型语言，强类型语言支持静态语言和动态语言，弱类型语言支持动态语言。

这里是TypeScript官方仓库 TypeScript ,有兴趣的可以更深层次了解其本质,了解官方更加详细的说明。

二、基本概念

1.强类型语言和弱类型语言

• 强类型语言：强类型语言不允许改变变量的数据类型，除非进行强制类型转换。比如C++、Java、C#。
• 弱类型语言：定义与强类型语言相反，一个变量可以被赋予不同数据类型的值。PHP、Ruby、Python。

2.动态语言和静态语言

• 静态语言：编译时确定变量的数据类型，运行期间不可以改变其结构，比如C++、Java、C#。
• 动态语言：运行时才确定数据结构和类型，变量使用之前不需要类型声明，比如：JavaScript、PHP、Ruby、Python。

三、TypeScript与JavaScript的区别

TypeScript	JavaScript
强类型语言，支持动态语言和静态语言	弱类型语言，支持动态语言
用于解决大型项目的代码复杂性	脚本语言，创建动态网页
可以在编译期间发现并纠正错误	只能在运行时发现错误
先被浏览器编译成js语言	在浏览器可以直接使用
支持模块、泛型、接口	不支持模块、泛型、接口

四、环境搭建及演练准备

对于TypeScript，不能像JavaScript直接在浏览器可以运行，因此我们需要安装编译环境，有两种方案进行练习与演练，其一就是直接安装到本地练习，另一种就是使用官方提供的在线环境进行演练。

4.1 安装到本地

• 安装

  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基础知识及环境准备。希望喜欢的同学能够点赞关注。

---