一、TS简介
1.支持所有的js的语法
2.安装：yarn global add typscript
npm i -g typscript
检测版本：tsc -V 初始化：tsc --init 帮助信息：tsc --help 扩展模板
删除文件的注释：tsc --removeComments
3.编译:将ts代码转化成js代码。命令台tsc 加上取的名字如index.ts 例如：tsc index.ts
监视效果，不用重新编译ts转换成js，tsc index.ts -w 或者直接tsc -w 直接监视所有的ts文件
当然也阔以编译多个ts文件，例如：tsc file1.ts file2.ts file3.ts
注：没有用的变量通过tsc是不会转义成js的
详情请见 https://blog.csdn.net/qq_42238554/article/details/112607190
4.空白和换行
TypeScript 会忽略程序中出现的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解。
如果语句写在同一行则一定需要使用分号来分隔，否则会报错。不在同一行书写的可以不用加分号，但是建议加上分号。
5.tsconfig.json
是ts的配置文件，ts编译器可以通过它的信息进行代码的编译；其中有七个属性
注意：如不设定 files 和 include，ts 默认是 exclude 以外的所有的以 .ts 和 .tsx 结尾的文件。如果，同时设置 files 的优先级最高，exclude 次之，include 最低。
files: 数组类型，用于表示由 ts 管理的文件的具体文件路径
exclude: 数组类型，用于表示 ts 排除的文件（2.0 以上支持 Glob）
include: 数组类型，用于表示 ts 管理的文件（2.0 以上）
compileOnSave: 布尔类型，用于 IDE 保存时是否生成编译后的文件
extends: 字符串类型，用于继承 ts 配置，2.1 版本后支持
compilerOptions: 对象类型，设置编译的选项，不设置则使用默认配置，配置项比较多，后面再列
typeAcquisition: 对象类型，设置自动引入库类型定义文件(.d.ts)相关，该对象下面有 3 个子属性分别是：
enable: 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false
include: 数组类型，允许自动引入的库名，如：["jquery", "lodash"]
exculde: 数组类型，排除的库名
{
"compilerOptions": {
"allowUnreachableCode":true,// 不报告执行不到的代码错误。
"allowUnusedLabels":false, // 不报告未使用的标签错误
"alwaysStrict":false,// 以 严格模式（true） 解析并为每个源文件生成 "use strict"语句
"baseUrl":".",// 工作根目录
"experimentalDecorators":true,// 启用实验性的ES装饰器
"jsx":"react",// 在 .tsx文件里支持JSX
"sourceMap":true,// 是否生成map文件
"module":"commonjs",// 指定生成哪个模块系统代码（常用es2015）
"noImplicitAny":false,// 是否默认禁用 any
"noEmitOnError":true,// 表示错误提示的ts文件不会被编译到js中去
"noImplicitThis":true,// 不允许不明确类型的this可以通过function fn(this:window){alert:this}
"strictNullChecks":false,//是否严格检查变量为空值null，如果是空值需要增加判断
"removeComments":true,// 是否移除注释
"types": [//指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
"node",// 引入 node 的类型声明
],
"paths": {// 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
"src": [//指定后可以在文件之直接 import * from 'src';
"./src"
],
},
"target":"ESNext",// 编译的目标是什么版本的，ESNext表示最新版本的值，（常用es2015）
"outDir":"./dist",// 输出目录
"declaration":true,// 是否自动创建类型声明文件
"declarationDir":"./lib",// 类型声明文件的输出目录
"allowJs":true,// 允许编译javascript文件。
"lib": [// 编译过程中需要引入的库文件的列表
"es5",
"es2015",
"es2016",
"es2017",
"es2018",
"dom"
]
},
// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": [
"src/**/*"
],
// 指定一个排除列表（include的反向操作）
"exclude": [
"demo.ts"
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）
"files": [
"demo.ts"
]
}
二、基础类型
布尔，数字，字符串，数组，元祖，枚举，任意值，空值，null，undefined，never，object
//可以用|开连接多个类型，表示或的意思
leta:number|string
a=15;a="abc"
//用&表示且的含义,表示必须要同时满足
letj:{name:string}&{age:number}
j={name:"孙悟空",age:18}
//类型断言
//语法： 变量 as 类型 <类型>变量
s=easstring
s=
//在定义函数类型的时候遇到不明确的类型我们阔以使用泛型
functionfn
returna;
}
//变量声明：var [变量名] : [类型] = 值;
leta:number
a=15;
a="abc";//----定义的是数字，写string时候就会报错
a=14
//布尔
letisDone:boolean=true
//数字
letcount:number=1
//字符串
letusername:string='admin'
//数组 两种表示方式如下
letlist:number[]=[1,2,3]
letlistPlus:Array
//元组 Tuple 就是固定长度的数组
letx: [string,number]
x=['hello',10]
//枚举
enumColor{Red,Green,Blue}
letc:Color=Color.Green//c=1
//任意值:可以表示任意类型，相当于关闭了ts的类型检测，可以赋值给任意变量，所以不建议使用
letnotSure:any=1
notSure='xu'
notSure=true
//unknown 表示未知的类型(类似于任意值，相当于类型安全的any；不能直接赋值给其他变量)
//要是赋值需要给if判断赋值，如:if(typeof e ==="string"){s=e}
lete:unknown
//空值
functiongreeter():void{
console.log('hello')
}
//null
letu:undefined=undefined
letn:null=null
//需要开启： "strictNullChecks": false
letnum:number=null
letstr1:string=undefined
//never 类型表示的是那些永不存在的值的类型
// 返回never的函数必须存在无法达到的终点
functionerror(message:string):never{
thrownewError(message);
}
// 推断的返回值类型为never，永远不会返回结果
functionfail() {
returnerror("Something failed");
}
// 返回never的函数必须存在无法达到的终点
functioninfiniteLoop():never{
while(true) {
}
}
//void用来表示空，以函数为例，就表示没有返回值的函数；return出去的时候不返回值，返回即报错
//return 可以跟null undefined
functionfn():void{
return
}
//object
letobj:object={}
三.接口
1.什么是接口：
就是规定了一些事，对值所具有的结构进行类型检测；
作用：对“对象”进行约束描述；对“类”的部分行为进行抽象
//定义一个接口用于描述一个对象的形状
//函数类型
//语法：(形参:类型;形参:类型.....)=>返回值
//let d (a:number,b:number)=>number
interfaceGreeter{//interface用来定义一个类的结构
(name:string):string
}
//描述一个对象的类型
typemyType={
name:string,
age:number
}
letgreeter:Greeter
//Person接口就像一个普通类型一样去使用
greeter=function(name:string) {
return`hello world!${name}`
}
document.body.innerHTML=greeter('xu')
**一.属性接口**
//1.确定属性
interfaceUserInfo{
name:string;
age:number;
}
constmyInfo:UserInfo={
name:"haha",
age:20
};
//2.可选属性++任意属性
interfaceUserInfo{
name:string;
age:number;
sex?:string//表示可以选择是否填写的可选接口
[propName:string]:any;//任意接口，propName随便取的名字，后any表示任意类型
}
constmyInfo:UserInfo={
name:"haha",
age:20,
test1:'lala',
test2:'ff',
test3:123
};
//3.只读接口，此后不能修改
interfaceUserInfo{
readonlyid:number;
name:string;
age:number;
sex?:string;
[propName:string]:any;
}
constmyInfo:UserInfo={
id:1,
name:"haha",
age:20,
test1:"lala",
test2:"ff",
test3:123
};
二：函数接口
//对方法传入的参数以及返回值进行约束
interfaceFunc{
(param1:string,param2:number):boolean;
}
letmyFunc:Func=function(param1,param2){
returntypeofparam1==="string"&&typeofparam2==="number";
};
myFunc("22222",1111);
三：索引接口
//可对数组或对象进行约束
interface ArrIndex {
[index:number]: string
}
interface Obj { [index:string]:string}
let myArr: ArrIndex = ['first','second']let myObj:Obj = { name: 'kkkk'}
四.类接口
对类进行约束，和抽象类有点相似
类实现接口implements
接口继承接口
接口继承类
四.类与继承
1.什么是类
一切事物皆对象，通过面向对象的方式，将现实世界的事物抽象成对象，现实世界中的关系抽象成类、继承，帮助人们实现对现实世界的抽象与数字建模。面向对象的最基础的单元就是类。类（Class）是一个抽象的概念，是对某一类事物的描述。传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。 使用TypeScript，我们允许开发者现在就使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，而不需要等到下个JavaScript版本。
2.编写类
//定义一个类，用class去定义
//1.直接定义的属性是实例属性，需要通过对象的实例去访问：
//const per = new Greeter(),通过per.name去访问
//2.使用static开头的属性是静态属性（类属性），可以通过类去访问：
//如 static age:number = 18 通过Greeter.age去访问
class Greeter {
//定义类的属性
name: string
age:number = 18//定义实例属性
//构造函数
constructor(name: string) {
this.name = name
}
//定义类的方法
greet() {
//访问内的程序时使用this
document.body.innerHTML = `hello world!${this.name}`
}
}
//使用new 构造了Greeter类的一个实例。它会调用之前定义的构造函数，创建一个Greeter类型的新对象，并执行构造函数初始化它。
let greeter = new Greeter('xu')
//这个对象具有打招呼的行为
greeter.greet()
3.什么是继承
基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。通过继承创建的新类称为“子类”或“派生类”。被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。
4.编写继承
//定义一个类
class Person {
name: string
constructor(name: string) { //constructor 属性返回对创建此对象的数组函数的引用。
this.name = name
}
say() {
console.log(`${this.name}:hello!大家好！`)
}
}
//Teacher类继承了Person类，拥有了name属性和say方法
class Teacher extends Person {//extends表示可以把多个类公用的代码放在一个中继承，避免重复书写代码
//增加自己的course属性
course: string
constructor(name:string, course:string) {
super(name)
this.course = course
}
//增加自己的teach方法
teach() {
//调用继承的方法
this.say()
//访问继承的属性
console.log(`${this.name}:我要讲的课程是${this.course}!`)
}
}
let teacher = new Teacher('徐同保', 'Vue')
teacher.teach()
修饰符（公共、私有、受保护）
概念
public private 和 protectedTypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的private 修饰的属性或方法是私有的，不能在声明它的类的外部访问protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的,受保护的属性和访问不能在类的实例上调用
2.public（公共的，表示默认状态，可以不加）
//定义一个类
classPerson{
publicname:string
constructor(name:string) {
this.name=name
}
publicsay() {
console.log(`${this.name}:hello!大家好！`)
}
}
3.pirvate（私有的，不能声明它的类外部访问）
//定义一个类
classPerson{
privatename:string
constructor(name:string) {
this.name=name
}
privatesay() {
console.log(`${this.name}:hello!大家好！`)
}
}
letperson=newPerson('xu')
//访问私有属性会报错
console.log(person.name)
//访问私有方法会报错
person.say()
4.protected（派生类可以访问父类中受保护的属性和访问）
//定义一个类
classPerson{
protectedname:string
constructor(name:string) {
this.name=name
}
protectedsay() {
console.log(`${this.name}:hello!大家好！`)
}
}
//Teacher类继承了Person类，拥有了name属性和say方法
classTeacherextendsPerson{
//增加自己的course属性
course:string
constructor(name:string,course:string) {
super(name)
this.course=course
}
//增加自己的teach方法
teach() {
//调用继承的方法
this.say()
//访问继承的属性
console.log(`${this.name}:我要讲的课程是${this.course}!`)
}
}
letteacher=newTeacher('徐同保','Vue')
teacher.teach()