本文详细介绍了TypeScript的基础知识，包括它的产生背景、为何使用、与JavaScript的区别，以及如何搭建开发环境。文章深入探讨了TS的基本类型，如字面量、any、unknown、void、object、array、tuple、enum和symbol。此外，还涵盖了编译选项、webpack打包流程，以及面向对象的概念，如类、构造函数、继承、super关键字、抽象类和接口。最后，文章讨论了属性封装和泛型的使用，帮助开发者更好地理解和掌握TypeScript。
目录
一、TypeScript是什么，为什么要使用它？：
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
产生背景：
TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。
为何使用：
从历史上看，JavaScript已经成为了在Internet上编写网页和应用程序脚本语言的主要语言。但是否能通过JavaScript创建大型复杂Web应用系统呢？可能那么容易。
不过值得庆幸的是，我们还有一个解决方案TypeScript。
在过去的几年中，TypeScript的受欢迎程度一直在增长。在2020年最有前途的五种语言中，它也是其中之一。目前最大的前端框架之一的Angular正在使用TypeScript，而在大约60％的前端程序员正在使用或曾使用过TypeScript，而另外22％的开发者希望尝试使用。
二、TS与JS的区别：
TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程
大白话解释：TS拓展了JS的一些功能，解决了JS的一些缺点
表格总结：
TS与JS的关系：
JS 有的， TS 都有， JS 没有的， TS 也有，毕竟 TS 是 JS 的超集
TS比JS增加了什么：
TS缺点：
不能被浏览器理解，需要被编译成 JS
有学习成本，写习惯了 JS 的我们要上手需要花时间去理解，而且 TS 中有一些概念还是有点难，比如泛型
三、TypeScript 开发环境搭建
1.下载node.js并安装
2.使用npm全局安装TS
可以在cmd或终端输入npm i -g typescript
完成后输入tsc查看是否安装完成
3.创建ts文件
4.执行命令：tsc 文件名.ts
四、基本类型：
自动安装config文件
npm --init
TS中对数据类型要求非常严格，定义数据类型后，不可赋予其它数据类型。
js中函数是不考虑参数的类型和个数的：
TS中函数会定义参数类型：
且形参和实参要一致：
TS中的所有数据类型：
前面三个和js中的一样，重点为以下数据类型
字面量：
字面量创建一但确定了数值，不可更改
可以使用| 来链接多个类型（联合类型），但可以使用为声明的值或类型
any类型：
any表示的是任意类型，一个变量设置类型为any后，相当于对该变量关闭了TS的类型检测
使用后会使得变量和js里一样，所以TS中，我们不建议使用any类型
声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式any）
并不是说不可以使用，不到万不得已，最好别用，能避免尽量避免
类型是any时 ，它可以赋值给任意变量，会影响其他变量
//d的类型是any ，它可以赋值给任意变量
// s = d;unknown：
未知数据类型，简单来说，当不知道用的变量为何类型时，可用unknown，并且unknown不会影响其他变量，也不能直接赋值给其他变量
但它也可以用其他方式来赋值给其他变量，比如在赋值前进行类型判断
if(typeof e === "string"){
s = e
}也可以进行类型断言，类型断言可以用来告诉解析器变量的实际类型
语法：
变量 as 类型
<类型>变量
s = e as string;
s = <string>e;void和never：
设置函数返回值，在TS中函数的返回值类型我们是可以自己设置的，但当我们函数返回是空值时，就可以使用void ，表示没有返回值的函数，当确定为void时，函数里写返回值则会报错，但可以return后面什么也不跟，也可以返回undefinded和null
function fun (): void{
return ;
}
function fun (): void{
return null;
}
function fun (): void{
return undefined;
}而never表示永远不会有返回值，连undefinded和null都不会返回，一般用来提示报错，使用较少
function fun (): never{
throw new Error('报错了！')
}object:
object一般情况直接给是没有任何限制的，可以给
`let a : object;`
`a = {};`
`a = function(){}`{}用来指定对象中可以包含的属性
语法：{属性名：属性值，属性名：属性值}
let b : {name:string};
b = {name:'孙悟空'}但给几个属性，赋值就是几个属性，且属性值数据类型要和声明的一致，当需要多个属性值，后面跟“，“往后面继续加就好
那么当我声明了两个属性，但我只给了一个属性附了值，我不想给第二个属性赋值，直接写会报错，那我们应该怎么写呢
let b :{ name:string,age?:number};
b = {name:'孙悟空'}在属性名加上？，表示可选属性
但当我们后面要有多个可选属性时，一个一个往后面加，又会变得很麻烦，此时就用到了
【变量名：string】：any 表示任意类型的属性
let c :{name:string,[propName:string]:any};
c = {name:'猪八戒',age:18,gender:''}当然，中括号外面跟的是什么数据类型，那么可选属性就是什么数据类型，假如是number属性，那么后续的可选属性只能是number
设置函数结构的类型声明
语法：（形参：类型，形参：类型’...）=>返回值
let d: (a:number,b:number)=>number;
d = function(n1,n2):number{
return n1+n2
}注意：所给的类型必须和语法中所给的参数类型一样，否则会报错
array:
数组的类型声明：
类型[]
Array<类型>
let e : string[];
e = ['a','b','c'];
let g :Array<number>;
g = [1,2,3] tuple:
元组 ，就是固定长度的数组，当你数组长度值是固定时，用元组来定义效率会更好
语法：[类型，类型，类型]
let h : [string,number];
h = ['hello',123];enum:
枚举
在处理数据时，在几个值之间要选的值，直接给值会占用内存，这时可以用到枚举，定义一个枚举类，把它所有的可能都写进去，然后进行判断时，直接用枚举去判断就可以了
enum Gender{
male = 0，
Female = 1
}
let i: {name:string,gender:Gender};
i = {
name:'孙悟空'，
gender:Gender.Male
}
console.log(i.gender 
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
