深入浅出TypeScript
1、TypeScript基础
1.1 TS基础-基础类型
①boolean、number、string
string类型
let str: string = 'fly'
boolean类型
// TS中的bool类型只能是true或者false
let str: boolean = true
number类型
let str: number = 1
②undefined、null
undefined类型
let str: undefined = undefined
③any、unknown、void
④never
⑤数组类型[]
⑥元组类型tuple
TS的声明变量与赋值更严谨
const a:number = 1;
a=2;
console.log(a)//2
a='hello';
console.log(a)//报错,不能把string类型的赋值给已声明为number类型的变量
const b:string = 'hahaha';
const c:any=1;
console.log(c)//1
c='hahaha';
console.log(c)//'hahaha'
any表示任意数据类型
const d:object={};
const e:number[];
e=[1,2,3,4,5]
console.log(e)//[1,2,3,4,5]
e=['ha','ha',3,4,5]//报错
const f:any[];
f=[1,2,'ha','ha',true,{name:'张三'},0]
console.log(f)//[1,2,'ha','ha',true,{name:'张三'},0]
1.2 TS基础-函数类型
定义
输入参数
输出参数
函数重载
接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。
为了使用接口表示函数类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的。 如果你不想指定类型,TypeScript的类型系统会推断出参数类型,因为函数直接赋值给了SearchFunc类型变量。 函数的返回值类型是通过其返回值推断出来的(此例是false和true)。 如果让这个函数返回数字或字符串,类型检查器会警告我们函数的返回值类型与SearchFunc接口中的定义不匹配。
1.3 TS基础-interface
定义:TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
个人理解:给对象里每个属性定义类型
接口工作
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
1.4 TS基础-类
定义:写法与JS类似,增加了一些定义
特点:
·增加了public、private、protected修饰符
·抽象类:
·只能被继承,不能被实例化
·作为基类,抽象方法必须被子类实现
·interface约束类,使用implements关键字
2、TypeScript进阶-高级类型
①this类型
class Counter {
constructor(public count: number = 0){}
public add(value: number){
this.count += value
return this
}
public subtract(value: number){
this.count -= value
return this
}
}
let count1 = new Counter(10)
console.log(count1.add(2).subtract(4)) //Counter {count: 8}
②索引类型
·索引类型查询操作符
·索引访问操作符
③映射类型
·基础
·由映射类型进行推断
·增加或移除特定修饰符
④条件类型
·基础
·分布式条件类型
·条件类型的类型推断-infer
个人总结
这一课内容还算简单,都是些基础知识,主要是写代码上可能会有些困难,后续还要努力!!