TypeScript (又称ts)

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);

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值