1.TypeScript的介绍
TypeScript是拥有类型的javaScript超集,它可以编译成普通/干净/完整的js代码 ES3
js所拥有的内容ts都支持,并且js有ES678...ts也都支持这些语法
ts拥有独特的一些数据类型 枚举 元祖 void any
2.Typescript的类型
1.布尔值类型(boolean)
2.数字类型(number)
3.字符串类型(string)
4.数组类型(array)
5.元组类型(tuple)
6.枚举类型(enum)
7.任意类型(any)
8.null和undefined
9.void类型
10.never类型
3.TypeScript声明变量
在ts中声明变量需要使用类型注解的形式,语法 var/ let / const 变量名:数据类型 = 值
4.枚举
1.枚举类型就是将一组可能出现的值,一个一个列举出来,定义在一个类型中,这个类型就是枚举类型 枚举类型放常量 字符串 数字(全大写)
5.类型断言
1.在一些时候ts无法获取具体的类型信息(HTMLElement),但是这些(HTMLmageElement),信息有独特的属性和方法,此时就需要告诉ts当前的这个数据类型到底是那种,TS只允许类型断言转换为更具体或者不太具体(any/unknown)的类型版本,这种情况会导致ts类型混乱
let test = document.getElementById("test") as HTMLImageElement
test.innerText = "xxx";
test.appendChild(document.createElement("div"));
test.onclick = function (){
console.log("xxxx")
};
test.addEventListener("click",()=>{
console.log("xxxx222")
})
test.src = "图片地址url"
6.数据类型补充
1.联合类型
//: number|string 联合类型注解
type A = number|string|boolean;
let a: A;
a = "123";
a = 123;
2.可选类型补充
1.可选类型可以看作undefined和所写类型的一个联合类型 ,?可选择的类型
2.
//函数可选类型
function fn(msg?:string){ // undefined | string
console.log(msg)
}
fn();
fn(undefined);//undefined
fn("hello world")
7.继承
1.和类一样,接口也可以相互继承,这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活的将接口分割到可重用的模块里
interface Shape {
color: string;
}
face
interface Square extends Shape {
sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
8.ts的类的修饰符
//在typeScript中 类的属性和方法支持三种修饰符
//1 public
// 修饰的是在任何地方可见 公有的属性或方法 默认编写的属性就是public的
//2 private
// 修饰的是仅在同一类中可见 私有的属性或方法(不参与继承)
//3 protected
// 修饰的是仅在类自身及子类中可见 受保护的属性或方法(不能读写)
//4 readonly
// 修饰的是这个属性我们不希望外界可以任意的修改,只希望确定值之后直接使用(只能读)
class Person{
readonly name:string;
constructor(name:string) {
this.name = name;
}
}
let p = new Person("aa");
console.log("=======>",p.name);