【TypeScript】零基础入门，轻松玩转TypeScript编程

前言

小伙伴们大家好。从今天开始我们将从零开始系统的学习一些TypeScript相关的知识。相信小伙伴们或多或少应该也都听说过这玩意了，那么这家伙是干嘛的呢，已经有Javascript了为什么又要搞出个TypeScript，接下来就为大家一一揭晓。

TypeScript

TypeScript是个啥，它跟Javascript又有啥区别？

• TypeScript是由微软团队开发的一种开源、自由的编程语言。
• TypeScript是Javascript的一个超集，支持ES6的所有标准。
• TypeScript是一种能给Javascript添加特性的扩展语言。
• TypeScript的设计一般是针对开发大型应用或者大型开发团队。因为它能够让你的代码更规范，类型更明确，维护更方便。尤其是多人合作开发一个功能模块，或者是封装一套公共的组件库时效果尤为显著。
• TypeScript最后可以编译成Javascript，然后在各种浏览器上运行。
• TypeScript扩展了Javascript的语法，因此Javascript和TypeScript可以共同工作，并且TypeScript能够完全识别Javascript的代码。
• TypeScript的适用场景：TypeScript的设计一般是针对开发大型应用或者大型开发团队。因为它能够让你的代码更规范，类型更明确，维护更方便。尤其是多人合作开发一个功能模块，或者是封装一套公共的组件库时效果尤为显著。
• 另外个人理解：TypeScript更类似于后端的强类型语言（如Java），因为它可以在声明变量时指定类型，可以指定函数是否有返回值以及返回值的类型，还可以定义类、枚举、泛型，接口等等。

说了这么多理论还是不便于大家理解，TypesScript到底是个啥玩意，下面我们就先从它的使用开始一边coding一边学习把。

TypeScript安装

要想使用TypeScript首先得先把它安装在我们的环境中，然后才能够使用。TypeScript的安装也是非常简单的，只需要在命令行中运行：npm install typescript -g 即可将其安装在我们的全局环境中。那么安装完成后还需要看下是否安装成功，同样在命令行中运行：tsc -v 如果输出了版本号则表示对应版本号的TypeScript已经安装成功。

npm install typescript -g
## 安装完成后查看是否成功
tsc -v
# 输出："对应的版本"


TypeScript语法及与Javascript的区别

TypeScript的语法跟Javascript的是一样的：

• 用var、let或const声明定义一个变量/常量
• 用function个定义一个函数
• 用class声明一个类
• 用new来创建一个对象
• 支持if/else判断条件
• 支持for/for…of/for…in/while循环
• 用console.log在控制台打印数据
• 用//进行单行注释，用/**/多行注释等等

但与JS不同的是：

• TS在声明变量时可以同时限定变量的类型，而JS是在赋值时才能够确定变量的数据类型
• TS在定义函数时可以同时指定函数的参数类型，返回值及返回值类型，而JS的参数类型是函数调用时才能够确定，返回值类型则是由return决定

下面我们用代码来演示一下：

TypeScript 声明变量的语法： var/let/const 变量名:类型 = 值

//声明一个指定类型的变量/常量
let hello: string = "Hello TS";
var world:number = 3
const ts:boolean = true


TypeScript 定义函数的语法：

• function 函数名(参数：类型)：返回值类型
• let/var/const 函数名：类型 = function（参数：类型）：返回值类型

//定义一个参数为string类型，返回值为number类型的函数hello
function hello(name:string):number{
console.log(`hello：${name}`);
return 100;//必须有且是数字类型，否则报错
}
let num:number = hello('Yannis');//参数必须是字符串，否则报错
console.log(num);//输出100
//声明一个Function类型的变量helloWorld，值为一个：参数类型为number返回值类型为string的函数
let helloWorld:Function = function(num:number):string{
console.log(num);
return 'hello world';//必须有且是字符串类型，否则报错
}
console.log(typeof helloWorld);// function
let hw:string = helloWorld(10);//10
console.log(hw);// hello world


TypeScript的编译运行

要想查看TypeScript的运行结果，需要先通过 tsc 将TypeScript编译成Javascript然后通过node或浏览器来查看运行结果。
编译命令： tsc 文件名 ，运行后即可生成一个同名的Javascript文件
上述ts代码在通过tsc命令编译出的js文件内容如下：

//声明一个指定类型的变量/常量
var hello= "Hello TS";
var world= 3
var ts= true
//定义一个参数为string类型，返回值为number类型的函数hello
function hello(name){
console.log(`hello：${name}`);
return 100;//必须有且是数字类型，否则报错
}
var num= hello('Yannis');//参数必须是字符串，否则报错
console.log(num);//输出100
//声明一个Function类型的变量helloWorld，值为一个：参数类型为number返回值类型为string的函数
var helloWorld= function(num){
console.log(num);
return 'hello world';//必须有且是字符串类型，否则报错
}
console.log(typeof helloWorld);// function
var hw= helloWorld(10);// 10
console.log(hw);// hello world


关于tsc

上面已经提到：要想查看typescript的运行结果，首先得通过 tsc 命令将其编译成js文件，然后通过node或浏览器查看。这个tsc就是typescript编译器的缩写。它是在typescript安装时随之一起被安装的，因此我们无需再额外进行安装直接可以使用。tsc有入下几个常用命令参数：

• –help：显示帮助信息
• –module：载入扩展模块
• –declaration：额外生成一个.d.ts扩展名的文件
• –removeComments：删除文件中的注释
• –out：编译多个文件合并到一个文件中
• –sourcemap：生成一个sourcemap(.map)文件
• –module noImplicitAny在表达式或声明上有隐含安逸类型时报错。也就是说不允许使用any类型
• –watch：在监视模式下运行编译器，会监视文件输出；也就是说在文件发生改变时会自动重新编译（个人感觉是最常用的一个）

以上参数可叠加使用，如：tsc xxx.ts --watch --removeComments

总结

本文我们学习了typescript的相关知识，通过学习我们了解了什么是ts，什么场景下适合使用ts，ts与js的区别，ts的简单语法与基本使用，ts的编译以及tsc的常用参数。本篇文章就先分享到这里，从下篇文章开始将按照typescript的知识块进行拆分学习与分享。

本文就到这里了，喜欢的小伙伴关于点赞留言加关注哦！