专注前端开发,每年100集免费视频。
首页/视频教程/ TypeScript从入门到精通图文视频教程-2020年新版/
TypeScript从入门到精通图文视频教程-2020年新版
2020-07-09 视频教程 70377

我原本准备更新Vue3.x的教程的,由于官方文档一直不出,我又不敢瞎讲,所以干脆先来一个TypeScript教程热身,TypeScript已经在我们公司全面使用了,现在招聘的环节也增加了一个要求,就是要求必须熟练使用TypeScript。我以前也出过TypeScript的教程,不过那个太简单,不够深入。所以在这个空档期,准备自己重学一下TypeScript,然后出一个比较完全的教程。

01.TypeScript简介和课程介绍

努力做到全网最好的免费TypeScript图文视频教程。

以前的TypeScript教程看这里:TypeScript免费视频教程 ,Deno前置知识 (共15集)

这里我建议你耐心点,跟我一起学习这版最新的《TypeScript从入门到精通图文视频教程》,这样能更好的对TypeScript有全面的了解。

TypeScript简介

TypeScript是由微软公司在2012年正式发布,现在也有8年的不断更新和维护了,TypeScript的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript其实就是JavaScript的超集,也就是说TypeScript是建立在JavaScript之上的,最后都会转变成JavaScript。这就好比漫威里的钢铁侠,没穿装甲之前,他实力一般,虽然聪明有钱,但还是接近人类。但是有了装甲,他就厉害太多了,甚至可以和神干一架。

也许你会觉的我这说的太夸张,我刚开始学习时,也是这样想的,但是用了2年左右,特别是大型项目中,真的好用。比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主,我会在强烈的要求所有人都使用TypeScript的语法进行编程。

使用VSCode进行编写代码

我的所有前端课程都是使用VSCode进行编写代码的,因为这是我在工作中用的最多的编辑器,也是目前我认为最好用的编辑器。

下载地址:https://code.visualstudio.com/

如果你已经参加了工作,我相信你身边至少有80%以上的前端,在使用这款编辑器。

使用VSCode讲解,还有一个主要的愿意就是他们都是微软出的产品,所以有很好的兼容性和支持,VSCode上有很多专门为TypeScript专门作的语法适配,所以在编写时就会轻松快乐起来。

TypeScript开发环境搭建

如果你想使用TypeScript来编写代码,你需要先安装一下它的开发环境,这并不复杂。

1.安装Node的运行环境

你可以到Node.js官网去下载Node进行安装(https://node.js.org),建议你下载LTS版本,也就是长期支持版本。安装的过程我就不演示了,这个过程就和安装QQ一样,没有任何难度。

如果你已经安装了,可以打开命令行工具,然后使用node -v命令查看安装的版本,但是一般还有一个命令需要检测一下,就是npm -v,如果两个命令都可以输出版本号,说明你的Node安装已经没有任何问题了。

2.全局安装typeScript

你要使用TypeScript先要在你的系统中全局安装一下TypeScript,这里你可以直接在VSCode中进行安装,安装命令可以使用npm也可以使用yarn

npm install typescript -g
yarn global add typescript

这两个你使用那个都是可以的,根据喜好自行选择,我在视频中使用的npm进行安装。

3.建立项目目录和编译TS文件

E盘(当然你可以在你喜欢的任何一个地方安装),新建一个目录,我这里起的目录名字叫做TypeScriptDemo,然后把这个文件在VSCode中打开。 我在视频里用了命令行的形式建立,直接使用ctrl+r打开运行,然后在运行的文本框里输入cmd,回车后,打开命令行工具,在命令行中输入下面的命令。

e:
mkdir TypeScriptDemo

完成后,打开E盘,打开VSCode,把新建立的文件夹拖入到VSCode当中,新建一个Demo1.ts文件,写入下面代码:

 function jspang(){
    let web: string="Hello World"
    console.log(web)
 }

 jspang()

这时候你使用node Demo1.ts是执行不成功的,因为Node不能直接运行TypeScript文件,需要用tsc Demo1.ts转换一下,转换完成后typeScript代码被编译成了javaScript代码,新生成一个demo1.js的文件,这时候你在命令行输入node Demo1.js,在终端里就可以顺利的输出jspang的字符了。

4.ts-node的安装和使用

但是这样操作的效率实在是太低了,你可以使用ts-node插件来解决这个问题,有了这个插件,我们就不用再编译了,而使用ts-node就可以直接看到编写结果。

使用npm命令来全局安装,直接在命令行输入下面的命令:

npm install -g ts-node

安装完成后,就可以在命令中直接输入如下命令,来查看结果了。

ts-node Demo1.ts

好了,今天就学这么多吧,恭喜你有学会了新的编程技能,小伙伴们,加油!!!


02.TypeScript的静态类型

TypeScript的一个最主要特点就是可以定义静态类型,英文是Static Typing。那到底是什么意思那?太复杂的概念性东西这里就不讲了,你可以简单的理解“静态类型”为,就是你一旦定义了,就不可以再改变了。比如你是男人就是男人,一辈子都要作男人;是女人就是女人,一辈子都是女人。这个事不可以改变!呃....好像现在也可以随便变来变去啊,这里说的是正常情况。但是它还有一些特性,这个并不像表面的那么简单。现在我们就来学习。

如何定义静态类型

你可以在上节课的文件夹下建立一个新的demo2.ts文件,然后写下这段代码:

const count : number = 1;

这就是最简单的定义一个数字类型的count的变量,这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了,不可以改变了。比如我们这时候给count复制一个字符串,它就报错了。

//错误代码
const count : number = 1;
count = 'jspang'

但这只是最简单的理解,再往深一层次理解,你会发现这时候的count变量,可以使用number类型上所有的属性和方法。我们可以通过在count后边打上一个.看出这个特性,并且编辑器会给你非常好的提示。这也是为什么我喜欢用VScode编辑器的一个原因。

自定义静态类型

你还可以自己去定义一个静态类型,比如现在你定义一个小姐姐的类型,然后在声明变量的时候,就可以使用这个静态类型了,看下面的代码。

interface XiaoJieJie {
    uname: string ,
    age:number
} 

const  xiaohong : XiaoJieJie ={
    uname: '小红',
    age: 18
}

这时候你如果声明变量,跟自定义不一样,VSCode直接就会报错。需要注意的是,这时候xiaohong变量也具有unameage属性了。

这节课你需要记住的是,如果使用了静态类型,不仅意味着变量的类型不可以改变,还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性,并且编辑器这时候也会给你很好的语法提示,加快了你的开发效率。

随着你不断的深入学习,你会对这两个优点有更深的理解。

03.TypeScript基础静态类型和对象类型

在TypeScript静态类型分为两种,一种是基础静态类型,一种是对象类型,这两种都经常使用,非常重要,我们先来看一下什么是基础静态类型。

基础静态类型

基础静态类型非常简单,只要在声明变量的后边加一个:号,然后加上对应的类型哦。比如下面的代码,就是声明了一个数字类型的变量,叫做count

const count : number = 918;
const myName :string = 'jspang'

类似这样常用的基础类型还有,我这里就举几个最常用的哦,null,undefinde,symbol,booleanvoid这些都是最常用的基础数据类型,至于例子,我这里就不详细的写了,后面碰到,我们再继续讲解。

对象类型

我们先来看一个例子,通过例子有经验的小伙伴就知道个大概了,然后我们再来讲解(其实上节课我们也讲到了,我们这里就当复习了)。新建一个文件demo3.ts(你可以跟我不一样),然后写下如下代码。

const xiaoJieJie:{
    name:string,
    age:number
} = {
    name:'大脚',
    age:18
}
console.log(xiaoJieJie.name)

写完后,我们在terminal(终端)中输入ts-node demo3.ts,可以看到结果输出了大脚。这就是一个经典的对象类型,也是最简单的对象类型。对象类型也可以是数组,比如现在我们需要很多小姐姐,我们就可以这样写。

const xiaoJieJies : String [] = ['谢大脚','刘英','小红']

这时候的意思是,变量xiaoJieJies必须是一个数组,数组里的内容必须是字符串。你可以试着把字符串改为数字,VSCode会直接给我们报错。

const xiaoJieJies : String [] = ['谢大脚','刘英',123]

现在都讲究面向对象编程,我这面向对象编程这么多年了,也没再多编出来一个。我们再来看看下面的代码。这个代码就是用类的形式,来定义变量。

class Person{}
const dajiao : Person = new Person()

这个意思就是dajiao必须是一个Person类对应的对象才可以。我们还可以定义一个函数类型,并确定返回值。代码如下:

const jianXiaoJieJie : ()=> string =()=>{return '大脚'}

那我们现在总结一下对象类型可以有几种形式:

  • 对象类型
  • 数组类型
  • 类类型
  • 函数类型

这几种形式我们在TypeScript里叫做对象类型。

这节课我们就主要学习了基础类型和对象类型的概念,希望小伙伴都能学会,再次提醒,动手练习会有更好的效果。小伙伴们,加油。

04.TypeScript中的类型注释和类型推断

这节课我们学习一下TypeScript中的两个基本概念:类型注解类型推断,这两个概念在我们编写TypeScript代码时会一直使用(重点),但很多教程都没有讲解,不过在官方文档中有比较好的解释。你现在可能还不能完全理解我说的这两个概念,但是你看完文章后就会有很直观的了解啦。

type annotation 类型注解

这个概念我们在前三节课中一直使用,只是我没明确这个概念和关系,所以你会觉的很陌生。这就好比,你身边有一个特别漂亮的姑娘,她一直很喜欢你,你也很喜欢她,但窗户纸一直没捅破,直到有一天你们喝多后,去了如家酒店(谈了谈心),你们的关系就明确了。

学程序并没有这么复杂,我们直接点,新建一个文件demo4.ts ,然后看代码:

let count : number; 
count = 123

这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。是不是一下就明白了,其实程序这东西就这么简单,真正复杂的是人。

type inferrence 类型推断

当你明白了类型注解的概念之后,再学类型推断就更简单了,先来看一段代码。还是在Demo4.ts文件中写入下面的代码。

let countInference = 123

这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到变量上时,你会发现TypeScript自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码TS会自动的去尝试分析变量的类型。这个就彷佛是人的情商比较高,还没等女生表白那,你就已经看出她的心思。

工作使用问题(潜规则)

  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解

先来看一个不用写类型注解的例子:

const one = 1;
const two = 2;
const three = one + two;

再来看一个用写类型注解的例子:


function getTotal(one , two){
    return one + two
}

const total = getTotal(1,2)

这种形式,就需要用到类型注释了,因为这里的onetwo会显示为any类型。这时候如果你传字符串,你的业务逻辑就是错误的,所以你必须加一个类型注解,把上面的代码写成下面的样子。

function getTotal(one : number, two :number){
    return one + two
}

const total = getTotal(1,2)

这里有的一个问题是,为什么total这个变量不需要加类型注解,因为当onetwo两个变量加上注解后,TypeScript就可以自动通过类型推断,分析出变量的类型。

当然TypeScript也可以推断出对象中属性的类型,比如现在写一个小姐姐的对象,然后里边有两个属性。

const XiaoJieJie = {
    name:'刘英',
    age:18
}

写完后你把鼠标放在XiaoJieJie对象上面,就会提示出他里边的属性,这表明TypeScript也分析出了对象的属性的类型。

在写TypeScript代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

05.TypeScript函数参数和返回类型定义

这节主要学习一下函数的参数类型定义和返回值的定义,学完这节内容后,你会对函数的参数和返回值类型定义都有通透的了解。

简单类型定义

上节课我们写了一个getTotal的函数,并且对传入的参数作了定义,我们再复习一遍。

新建一个文件demo5.ts,然后写入代码

function getTotal(one : number, two :number){
    return one + two
}

const total = getTotal(1,2)

这时候我们写的代码其实是有一个小坑的,就是我们并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了,比如写程了下面这个样子。

function getTotal(one : number, two :number){
    return one + two+ ''
}

const total = getTotal(1,2)

这时候total的值就不是number类型了,但是不会报错。有的小伙伴这时候可能会说,可以直接给total一个类型注解,比如写成这个样子。

const total : number =getTotal(1,2) 

这样写虽然可以让编辑器报错,但是这还不是很高明的算法,因为你没有找到错误的根本,这时错误的根本是getTotal()函数的错误,所以合适的做法是给函数的返回值加上类型注解,代码如下:

function getTotal(one : number, two :number) : number{
    return one + two
}

const total = getTotal(1,2)

这段代码就比较严谨了,所以小伙伴们在写代码时,尽量让自己的代码更加严谨。

函数无返回值时定义方法

有时候函数是没有返回值的,比如现在定义一个sayHello的函数,这个函数只是简单的terminal打印,并没有返回值。


 function sayHello(){
     console.log('hello world')
 }

这就是没有返回值的函数,我们就可以给他一个类型注解void,代表没有任何返回值。

 function sayHello() : void{
     console.log('hello world')
 }

如果这样定义后,你再加入任何返回值,程序都会报错。

never返回值类型

如果一个函数是永远也执行不完的,就可以定义返回值为never,那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候,抛出了异常,这时候就无法执行完了)。

 function errorFuntion() : never{ 
    throw new Error()
    console.log('Hello World')
 }

还有一种是一直循环,也是我们常说的死循环,这样也运行不完,比如下面的代码:

 function forNever() : never{
     while(true){}
     console.log('Hello JSPang')
 }

函数参数为对象(解构)时

这个坑有很多小伙伴掉下去过,就是当一个函数的参数是对象时,我们如何定义参数对象的属性类型。我先写个一般javaScript的写法。

 function add ({one , two}){
     return one + two
 }

 const total = add({one:1,two:2})

在浏览器中你会看到直接报错了,意思是total有可能会是任何类型,那我们要如何给这样的参数加类型注解那?最初你可能会这样写。

 function add ({one :number , two :number}){
     return one + two
 }

 const total = add({one:1,two:2})

你在编辑器中会看到这种写法是完全错误的。那正确的写法应该是这样的。

 function add ({one , two } : {one:number, two:number}) :number{
     return one + two
 }

 const three = add({one:1,two:2})

如果参数是对象,并且里边只有一个属性时,我们更容易写错。 错误代码如下:

function getNumber ({one }:number){
     return one;
 }

 const one = getNumber({one:1})

看着好像没什么问题,但实际这是有问题的,正确的代码应该时这样的。

 function getNumber ({one } :{one:number}) :number{
     return one;
 }

 const one = getNumber({one:1})

这样写才是正确的写法,小伙伴们赶快动手练习一下吧,刚开始学你可能会觉的很麻烦,但是你写的时间长了,你就会发现有规矩还是好的。人向往自由,缺鲜有人能屈驾自由。

06.TypeScript中数组类型的定义

这节课学习一下TypeScript中的数组类型,一般的数组类型定义我们已经接触过了,只是没有单独拿出来讲,所以先来复习一下。

一般数组类型的定义

现在我们可以定义一个最简单的数组类型,比如就是数字类型,那么就可以这么写:

const numberArr = [1,2,3] 

这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是number类型。这是TypeScript通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。

const numberArr:number[] = [1,2,3] 

同样道理,如果你的数组各项是字符串,你就可以写成这样。

const stringArr : string [] = ['a','b','c']

也就是说你可以定义任意类型的数组,比如是undefined

const undefinedArr : undefined[]=[undefined,undefined]

这时候问题来了,如果数组中有多种类型,比如既有数字类型,又有字符串的时候。那我们要如何定义那。 很简单,只要加个(),然后在里边加上|就可以了,具体看代码。

const arr: ( number| string )[] = [1,'string',2]

数组简单类型的定义就是这样了,并不难。

数组中对象类型的定义

如果你作过一些项目,你就会知道真实的项目中数组中一定会有对象的出现。那对于这类带有对象的数组定义就稍微麻烦点了。 比如现在我们要定义一个有很多小姐姐的数组,每一个小姐姐都是一个对象。这是的定义就编程了这样。

const xiaoJieJies : {name:string , age:Number}[] = [
    {name:'刘英',age:18},
    {name:'谢大脚',age:28}
]

这种形式看起来比较麻烦,而且如果有同样类型的数组,写代码也比较麻烦,TypeScript为我们准备了一个概念,叫做类型别名(type alias)。

比如刚才的代码,就可以定义一个类型别名,定义别名的时候要以type关键字开始。现在定义一个Lady的别名。

type  Lady  =  {name:string , age:Number};

有了这样的类型别名以后哦,就可以把上面的代码改为下面的形式了。

type  Lady  =  {name:string , age:Number};

const xiaoJieJies : Lady[] = [
    {name:'刘英',age:18},
    {name:'谢大脚',age:28}
]

这样定义是完全起作用的,比如我们下面在对象里再加入一个属性,这时候编译器就会直接给我们报错了。

这时候有的小伙伴就会问了,我用类进行定义可以吗?答案是可以的,比如我们定义一个Madam的类,然后用这个类来限制数组的类型也是可以的。

class Madam {
    name: string ;
    age:number ;
}

const xiaoJieJies : Madam[] = [
    {name:'刘英',age:18},
    {name:'谢大脚',age:28}
]

可以看到结果,我们这么写也是完全可以的。

这就是这节课的所有内容了,希望小伙伴们可以学会,并动手练习一下。

07.TypeScript中元素的使用和类型约束

TypeScript中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌张,其实元组在开发中并不常用,也可能是我的精力还不够。一般只在数据源是CVS这种文件的时候,会使用元组。其实你可以把元组看成数组的一个加强,它可以更好的控制或者说规范里边的类型。

元组的基本应用

我们先来看一个数组和这个数组注解的缺点,比如我们有一个小姐姐数组,数组中有姓名、职业和年龄,代码如下:

const xiaojiejie  = ['dajiao','teacher',28]

这时候把鼠标放到xiaojiejie变量上面,可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解,代码如下:

const xiaojiejie :(string | number)[]  = ['dajiao','teacher',28]

这时候你已经增加了代码注解,但是这并不能很好的限制,比如我们把代码改成下面的样子,TypeScript依然不会报错。


const xiaojiejie :(string | number)[]  = ['dajiao',28,'teacher']

我们只是简单的把数组中的位置调换了一下,但是TypeScript并不能发现问题,这时候我们需要一个更强大的类型,来解决这个问题,这就是元组。

元组和数组类似,但是类型注解时会不一样。

const xiaojiejie : [string,string ,number]  = ['dajiao','teacher',28]

这时候我们就把数组中的每个元素类型的位置给固定住了,这就叫做元组。

元组的使用

目前我的工作中不经常使用元组,因为如果要使用元组,完全可以使用对象的形式来代替,但是如果你维护老系统,你会发现有一种数据源时CVS,这种文件提供的就是用逗号隔开的,如果要严谨的编程就需要用到元组了。例如我们有这样一组由CVS提供的(注意这里只是模拟数据)。

'dajiao','teacher',28
'liuying','teacher',18
'cuihua','teacher',25

如果数据源得到的数据时这样的,你就可以使用元组了。

const xiaojiejies:[string,string,number][]=[
    ['dajiao','teacher',28],
    ['liuying','teacher',18],
    ['cuihua','teacher',25],
]

这节课你的主要内容是,你要搞清楚元组和数组的区别,在理解后能在项目中适当的时候使用不同的类型。

真诚感谢您的留言,我会亲自查收每一条留言并进行回复,审核后显示在文章底部。
您的昵称
电子邮件
最新留言

No Data

技术胖
专注于WEB和移动前端开发
光头Coder12年经验业余讲师免费视频被访问
只要50元/年 得4项福利

视频离线高清版下载-400集

每周至少两篇文章分享

技术胖收费视频半价购买

每天回答所提问题(选择性回答)