1.TypeScript是什么？
是以javascript语言为基础，是javascript的超集，
扩展了js，并添加了类型
可以在任何支持javascript的平台运行。
-
TS不能被JS解析器直接执行
- 所以TS需要进行转换，编译为JS代码，最后执行的还是js代码
2. TS增加了什么
- 类型
- 支持ES的新特性
- 添加了ES不具备的特性
- 丰富的配置选项
- 强大的开发工具
3. TS开发环境的搭建
安装nodejs
-
安装 typescript
npm i typescript -g 创建一个ts文件 xxx.ts
-
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- tsc xxx.ts
4. 类型
-
类型声明
类型声明是TS非常重要的一个特点
通过类型声明可以指定ts中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错。
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
-
语法：
//声明一个变量 let 变量:类型=值 let 变量:类型; 变量=值 //如果变量声明和赋值是同时进行的，TS解析器会自动检测变量的类型，会确定为值的类型，如果后面赋值为其他类型，则会提示错误。 let 变量=值 function(参数:类型,参数:类型):返回值类型{ }
- 类型
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1,33,2.5 | 任意数字 |
| string | "hi" | 任意字符串 |
| boolean | true,false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值(undefined) | 没有值或undefined |
| never | 没有值 | 不能是任何值 |
| object | {name:"孙悟空"} | 任意的JS对象 |
| array | [1,2,3] | 任意js数组 |
| tuple | [4,5] | 元素，TS新增类型，固定长度数组 |
| enum | enum(A,B) | 枚举，TS中新增类型 |
// 可以使用字面量进行类型声明
let aa:10;
aa=10;
// 可以使用 | 来连接多个类型(联合类型)
let bb: "male" | "female";
let cc : boolean | string;
cc=true;
cc="hello"
//* any表示任意类型，一个变量设置any之后相当于对该变量关闭了TS的类型检测
// * 使用TS时，不建议使用any类型
// let dd:any;
// dd=false;
// dd=123;
//* 声明变量时如果不指定类型，则TS解析器会自动判断变量的类型为any (隐式的any)
let dd;
dd=20;
dd="123"
//* 如果一个变量的类型是any，它可以赋值给任意变量
// let e:string;
// e=dd;
// * 如果一个变量的类型是unknown，它不能赋值给有类型的变量
// * 它实际上是一个类型安全的any。
let e:string;
let eu:unknown;
e="hello ts"
eu="wjy";
if(typeof eu =="string"){
e=eu;
}
// * 类型断言 可以用来告诉解析器变量的实际类型,以下两个作用是一样的
/**
* 语法：
* 变量 as 类型
* <类型> 变量
*/
e=eu as string
e= eu;
// e=eu;
// * void 如果不设置函数的返回值，默认是void【没有或为空】
// * 函数的返回值会自动类型检测，如果在分支判断中返回不同的值，则会返回值的类型就是 联合类型
function sum1(num){
if(num>0){
return true;
}else{
return 123
}
}
//* void 用来表示空，以函数为例，就表示没有返回值
// * void：空 | undefined | null
function fn():void{
// return undefined;
// return null;
return ;
}
// * never不能是任何值
// * 表示永远不会返回结果
function fn2():never{
throw new Error("报错了！")
}
// * 联合值 f的只能为 10 20 30
let f: 10 | 20 | 30;
// * 联合类型 ff的类型可以为 number string boolean
let ff: number | string | boolean;
1. object【对象】
// 方式一：
let obj:object;
// 或
let obj:{};
// object 表示一个js对象
let a :object;
a={
name:"hyz",
age:22
};
// * 因为万物皆对象，所以实际用它是没有什么意义的
a=function(){}
// 方式二
let b:{};
b={
name:"wjy",
age:20
}
//可以指定一个变量的类型是对象，可以指定这个对象的属性有哪些，属性的类型是什么
let 变量名 :{
属性名:类型,
属性名:类型
}
let b: {
name:string
};
b={
name:"wjy",
age:20,// b会报错，因为指定的时候没有指定age属性
}
{}用来指定对象可以包含哪些属性和属性的类型
指定的属性的个数，多了一个属性也不行，少了一个属性也不行
1.1 如果想指定属性是可选的（可有可无）
可以在属性名后面 加 ?
let b:{
name:string,
age?:number
}
b={
name:"wjy"
}
1.2 规定对象指定属性是必须的，其他属性是可选的
let c:{[propName:string]:any}
let c:{name:string,[propName:string]:any};
c={
name:"wjy",
age:20,
isFlag:true
}
2. 函数
// * 指定d的类型是一个函数，它的参数个数为两个，两个参数的类型都是number,返回值类型也为number
let d:(a:number,b:number)=>number;
d=function(n1,n2):number{
return n1+n2;
}
3. 数组
语法
let 变量名:类型[];
let 变量名:Array<类型>
// * 在ts中，数组一般存储的是相同的类型的值
let e:string[];// e是一个字符串数组，只能存储字符串
e=['a','b','c'];
let f:number[];// f是一个数组，存储的是number类型
let g:Array;//g是一个数组，存储的是number类型
g=[1,2,3,4,5]
4. 元组(js无)
在js中是没有这个概念的，它表示固定长度的数组
语法：
let 变量名:[类型,类型,...]
let h:[string,string];
h=["hello","world"];//不会报错
h=["hello"];//报错
h=["hello","world","wjy"]//报错
赋值的时候不能多于指定的个数，也不能小于指定的个数
5. 枚举(js无)
将所有可能的数据列出来
/**
* 枚举 enum：将所有可能的数据列出来
*/
enum Gender{
Male=1,
Female=0,
}
let i:{name:string,gender:Gender};
i={
name:"孙悟空",
gender:Gender.Male
}
console.log(i.gender===Gender.Male);
console.log(Gender.Male);
6. &表示同时【语法】
&表示同时，表示都要满足，
// * 表示j既是string类型，又是number类型，这个写法其实一点意义都没有
// * 因为一个变量不可以同时满足两个类型的要求
let j:string & number;
// 表示j是一个对象，对象里面的属性既要有name属性，又要有age属性
let j:{name:string} & {age:number};
j={
name:"wjy",
age:20,
}
7. | 表示或【语法】
|表示或，表示只要满足一个就可以了。
8. 类型的别名
可以使用type定义一个类型，可以是基本类型，也可以是由字面量组成的类型。
// 定义了一个类型
type myType= 1|2|3|4|5;
let k: myType ;
let l :myType;
k=1;