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和所写类型的一个联合类型，？可选择的类型

//函数可选类型
function fn(msg?:string){ //  undefined | stringconsole.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);

TypeScript (又称ts）相关推荐

TypeScript基础 ts文件的创建与执行
创建 1.新建一个文件夹 2.用vscode打开 3.在文件夹下新建一个hello.ts的文件执行在ts文件中输入代码console.log('111') 因为node.js不能直接读取ts代码 ...
【TypeScript】TS全解
文章目录一.TypeScript 介绍 (一)TypeScript (二)优势二.TypeScript 使用准备 (一)安装编译 TS 的工具包 (二)编译并运行 TS 代码 (三)简化运行 TS ...
React TypeScript react+ts 包下载
react+ts下载使用要使用 TypeScript 启动新的 Create React App 项目,您可以做以下搭建TS+React的开发环境 Create React App 是一种官方支持 ...
【TypeScript】TS与Vue
TypeScript与Vue 文章目录 TypeScript与Vue defineProps与Typescript defineEmits与Typescript ref与Typescript reac ...
TypeScript（TS）基础内容详细介绍
目录一.TypeScript概念二.TypeScript特点三.开发环境配置四.初识ts 五.TypeScript类型声明 1.any: 2.number数字类型 3 string字符串类型 ...
typescript (简写Ts)
1.在终端下载2个包 ts包: npm install -g typescript ts-node包: npm install -g ts-node 安装好这个两个包之后,使用 t ...
小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...
【TypeScript】TS基础
TypeScript基础文章目录 TypeScript基础类型注解 TypeScript类型概述 TypeScript原始数据类型数组类型联合类型类型别名函数类型基本使用 void 类型 ...
【TypeScript】TS安装与使用
目录初识TypeScript TypeScript给JS添加类型支持的原因 TypeScript相比JS的优势 TS工具包的安装 TS文件的编译和运行简化TS的运行步骤初识TypeScript ...

TypeScript (又称ts）