Typescript从入门到精通（上）

HEGEHUB

已于 2022-06-03 12:09:06 修改

阅读量703

点赞数 1

CC 4.0 BY-SA版权

分类专栏： typescript 前端Javascript 文章标签： typescript javascript 开发语言

于 2022-05-24 10:21:12 首次发布

本文链接：https://blog.youkuaiyun.com/cloudyless/article/details/124883240

1.Typescript前置介绍

1.1Typescript是什么？

1.2TS在JS上增加了什么？

1.3Typescript为什么优于Javascript？

3.8.2对象的可选属性（跟函数可选参数语法一样）

3.9接口类型

3.9.1接口类型和类型别名的区别

3.9.2接口类型的继承（extends）

4.1.2class类的继承extends

4.1.3class类的继承implements

4.1.4class类中成员的可见性

4.1.4class中的readonly修饰符

4.2类型兼容性

4.2.1class和interface的兼容性

前言：学完了立超老师的typescript，立超老师确实讲的不错，但是最近做了一个ts+hooks的项目的时候，感觉ts里还有很多泛型等相关的知识立超老师没有深入去讲，然后又去看了黑马的，所以在此结合两个视频的内容，做了相关笔记内容，希望对大家有帮助。

1.Typescript前置介绍

1.1Typescript是什么？

Typescript是javascript的超集（JS有的TS都有，相当于一个包含关系）

1.2TS在JS上增加了什么？

Typescript=Type+Javascript（可以这么理解，在JS的基础上，为其添加了类型支持）还增添了很多其他的功能。

1.3Typescript为什么优于Javascript？

js中不会检查变量的类型是否会发生变化，从而会导致很多bug，但是Ts会检查，消除了开发中的许多常见的bug。

2.Typescript环境搭建

不论是node环境还是浏览器环境只认识js，不认识ts。所以我们要将ts编译成js，才能运行。所以我们就要借用typescript包中的tsc命令将其转化为js

2.1安装typescript包

全局安装typescript

npm install typescript -g

判断是否安装成功

tsc -v

没有出现“xxx”不是内部或外部命令，也不是可运行的程序或批处理文件就证明没有出错

2.2编译ts文件

编译ts文件

1.创建test.ts文件

console.log("hello")

2.在终端中运用tsc命令将test.ts文件编译为test.js文件

tsc test.ts

2.3简化TS运行

方式一：

tsc test.ts --watch

会监视到你每次修改ts文件，一旦修改则运行 tsc test.ts生成对应的js文件

方式二：

安装ts-node包(检测是否安装成功同上安装typescript)，提供ts-node命令，相当于在node环境里运行ts，但是其内部原理也是在内部转换成js然后再运行

全局安装ts-node

npm install ts-node -g

运行对应ts文件

ts-node test.ts

3.Typescript的常用类型

3.1类型注解

let a:number
a=18
let b:string="abc"

:number就是类型注解，用来给变量添加类型约束，类型约束就是约定了是什么类型，就只能给该变量赋值什么类型

3.2类型分类

js已有类型

（原始类型）基本数据类型：number，string，boolean，undefined，null，symbol
（对象类型）引用数据类型：object（对象，数组，函数，类等对象）

ts新增类型

联合类型，自定义类型（类型别名），接口，元祖，字面量类型，枚举，void，any等

3.3原始类型

1.number

let a：number=19

2.string

let a：string="abc"

3.boolean

let a：boolean=true

4.undefined

let a：undefined=undefined

5.null

let a：null=null

6.symbol

let a：symbol=Symbol()

3.4数组类型

数组类型的两种写法

写法一：类型[]

let c:number[]
c=[1,2]

写法一：Array<类型>

let d:Array<string>
d=['q','e']

3.5联合类型

竖线（|）在Ts中表示联合类型，由多个其他类型组成的类型，表示可以是这些类型中的任意一种

需求：如何让一个ts数组里面即有number类型又有string类型的数组呢？就要通过联合类型来实现。

let e:(number|string)[]
e=[1,"r"]

3.6类型别名

类型别名（自定义类型）：为任何类型起别名，简化该类型的应用。

创建类型别名：type 自定义类型名=
使用：直接使用该类型别名作为变量的类型注解即可

type f=(number|string)[]//小括号一定要加
let g:f
g=[1,"c"]

3.7函数类型

函数的类型其实是指函数的参数和函数的返回值的类型

3.7.1单独指定参数和返回值类型

函数表达式和函数声明式是一样的

//函数声明式 
function fun(value:number,value1:number):number{
     return value+value1
 }
//函数表达式
 const fun1=(value:number,value1:number):number=>{
     return value+value1
 }

3.7.2同时指定参数和返回值类型

只适用于函数表达式（也可以用在后面的对象属性为方法的定义上）

fun2:(value:number,value1:number)=>number

 const fun2:(value:number,value1:number)=>number=(value,value1)=>{
     return value+value1
 }

3.7.3函数返回值类型

void类型

表示没有返回值，或者返回值为undefined

 function fun3(val

最低0.47元/天解锁文章