- 什么是TS?
JavaScript的超集,可以编译成JavaScript。添加了类型系统的JavaScript,可以适用于任何规模的项目。
2.什么是接口?
2.1 接口:用于对对象的形状的描述,相当于是一个约束,让对象遵循约束
主要用于对象或者对象数组的定义
interface objInterFace {
name:string; //必须属性
age:number; // 必须属性
sex?:string; // 可选属性
[propName:string]:any; // 任意属性 (往下可以随意添加属性,不限个数)
readonly id: number; // 只读属性
}
2.2 接口继承 extends
interface intef1 {
name:string,
}
interface intef2 extends intef1{
age: number
}
/*
相当于 intef2 = {
name:string,
age: number
}
*/
3.定义变量
变量名 : 数据类型(接口) = 初始值
let flag:boolean = false; //布尔型
let num :number = 1 //数字型
let name:string = 'zyz' //字符串型
let u:undefined = undefined //undefined型
let n:null = null //null型
let data : number | string = '1' // 联合类型定义 值可以是字符串或者数字
let data:any = '1' // any 任意类型
4.定义数组
let arr:number[] = [1,2,3,4,5] // 基本类型定义
let arr2 :(string|number)[] = [1,2,'1'] // 联合类型定义
//接口
interface obj {
name:string;
age:number
}
let arr3 :obj[] = [{name:'zyz',age:18}] // 接口类型定义
5.定义对象
通过接口interface来规定对象属性的类型
const obj:objInterFace = {
name:'zyz'
age:25,
}
6.定义函数
6.1 普通定义:function fn(输入类型):输出类型
function fn(x: number, y: number):number {
return x * y
}
6.2 接口定义
interface INterfn {
(x:string,y:string):boolean;
} // 将函数参数的类型与返回结果的类型定义到接口里
let f1:INterfn = function(x,y) {
return x === y
} // 在函数名后面加冒号引入
7.泛型
7.1 泛型:是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性
泛型类型T T表示任何类型
1.定义对象时使用
interface interF1 <T> {
name:T,
data:T[]
}
const obj1:interF1<string>= {
name:'zyz',
data:['1']
} // 定义对象时 需要把泛型的类型传过去
2.定义函数时使用
interface INterfn {
<T> (x:T,y:T):boolean;
}
let f1:INterfn = function(x,y) {
return x === y
}
f2<string>('1','2') //需要在函数调用时将泛型传过去
7.2 泛型约束
function fn1<T>(x:T):number {
return x.length
}
fn1<number>(2) // 报错
// T表示任何类型,这样写的话会报错,因为某些类型是没有length属性的,例number
//可以给泛型T加上约束
interface length {
length: number;
}
function fn1<T extends length>(x:T):number {
return x.length
}
/* <T extends length> 意思是所传入的泛型T必须拥有length属性 */
8. TypeScript的内置方法
// 首先定义一个接口类型
interface Person {
name: string;
age: number;
sex: "男" | "女";
}
Pick : 从已声明的接口类型中选择指定属性生成新的接口类型
const personPick = Pick<Person,'name'|'age'>
// 此时 personPick 接口类型为:
{
name: string;
age: number;
}
Partical : 将已声明的接口类型中的属性全部变成可选属性
const personPartical = Partical<Person>
// 此时 personPartical 接口类型为:
{
name?: string;
age?: number;
sex?: "男" | "女";
}
Omit : 从已声明的接口类型中删除指定属性生成新的接口类型
const personOmit = Omit<Person,'name'|'sex'>
// 此时 personOmit 接口类型为:
{
age: number;
}
Required : 作用与Partical相反,将已声明的接口类型中的属性全部变成必选属性
const personOmit = Required<Person,'name'|'sex'>
// 此时 personOmit 接口类型为:
{
age: number;
}