1-TypeScript简介
首先官网祭天 ---> https://www.tslang.cn/
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
TypeScript 由微软开发的***和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
我们使用一张图来说明TypeScript和JavaScript的关系
使用更加简单的说法：
TypeScript = JavaScript + 类型约束 + 高级特性
我们一般只会在项目中使用类型约束，高级特性我就先不涉及了。
2-环境准备
TypeScript最终会编译成js来运行，所以我们需要先准备好将TypeScript编译为js的环境。
a.安装TypeScript
首先全局安装ts
npm install -g typescript然后可以使用命令来验证安装是否成功了。
tsc --version
b.使用tsc命令编译ts为js
tsc ./src/xxx.ts这时候会自动生成对应的.js文件
然后我们就可以执行对应的js文件。
c.配置tsconfig文件
但是每次都使用tsc命令编译单个文件会比较麻烦，所以我们可以做一个统一配置
先使用 tsc --init 命令初始化一个 tsconfig.json 文件
里面配置如下：
{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "./dist", "skipLibCheck": true, ... } }
然后我们只需要 tsc 一下，所有的ts文件就能被编译了。
d.自动编译
之后我们只需要启动vscode的监听任务功能，就能自动编译了。
1.选择终端 -> 运行任务
2.选择typescript类型的任务
3.选择监视任务
3-变量类型约束
let/const/var 变量:类型 = 值;
let str:string = "abc";
let str2 = "DeF";
类型大小写的区别：
// 小写的number指的是字面量类型的数字
let str3:number;
// 大写的Number指的是对象类型的数字
let n:Number;我们在ts里面，基本都会给任何一个数据添加类型约束。基本语法如下：
const/let/var 变量名:数据类型 = 数据;例如：
const num:number = 10; let str:string = 'abc'; var bool:boolean = true;
在ts里面，类型一旦定义了，在代码执行过程中就不允许改变其类型。
let num:number = 10; num = 'abc'; // 报错：不能将类型“string”分配给类型“number”。
4-any类型
唯一的一个例外，如果我们定义的类型是any，那么就可以被修改类型，因为这个any类型表示任意类型，会跳过ts的类型检查，其实是不安全的，如果不是迫不得已，我们不要使用any。
let value: any; value = 10; value = "abc"; value = null; value = undefined;
5-复杂类型
以前在 js 里面，所有的 引用 都 Object 类型new Object() { }但是在ts里面如果直接使用 {} / new Object(),是会报错的let obja = {} obja.name = '狗蛋'; // 引用类型，在ts里面约束尤其严格Date 对象有 Date 对象的属性和方法。Math 对象 有 Math对象的属性和方法。两者都是对象 ，但是不能混为一谈， 他们两种对象的属性和方法是完全不一样的，如果不区分，就没法推导 对象身上的成员。
如果我们想约束一个复杂数据的类型，就要使用
type/interface/对象字面量的方式。在ts里面，每种对象都是一个类型，每种对象才能进行类型推导和类型约束。
有五个常用方式可以进行类型的约束。
a.对象字面量进行类型约束
let obj:{name:string,age:number} = {name:'狗蛋',age:12}
a-1 补充 另外的字面量进行类型约束
var p1 : {name:string,gender:"男" | "女"}; p1 = { name:"狗蛋", gender : "女" }
b.interface(接口)--开发常用
//接口名称其实怎么写都行，最好有一个约定： interface 都以 I 开头
interface 接口名称 {
属性名:类型;
...
}interface主要用来约定一个复杂数据的类型。
interface IUser{
id:number;
name:string;
gender:boolean;
}
let user:IUser = {
id:1,name:'狗蛋',gender:true
}interface IPerseon{
id:number;
name:string;
age:number;
}
interface IStudent extends IPerseon{
number:number;
}
const s1:IStudent = {
id:2,
name:'翠花',
age:15,
number:1000
}如果有一个属性是可能有可能没有的，可以使用可选的方式声明 ：
interface IUser{
id:number;
name:string;
// ? 表示可选
gender ?: boolean;
}
c.type类型别名--开发常用
type 别名 = 类型
type关键字用于取一个类型别名。
// 类型别名
type mult = number | string;
let m:mult = 10; // 合法
m = 'abc'; // 合法
d.泛类型TS
{
code : number ;
message : string ;
data : ? data的类型无法确定，不同的接口，返回的data是不一样，可能是 null ， 可能是 boolean ，也可以是对象，还可能是数组
}类型<T,...> {属性:T,}
// 比如：
interface IExample1<T,N,M> {
// data的类型不能确定，传多个值必须声明对应个数的形参
data: T,
data2: N,
data3:M
}
let obj1:IExample1<string,string,boolean> = {
data:"abc",
data2:"def",
data3:true
}
let obj2:IExample1<number> = {
data:1
}
// 将来我们想确定请求回来的数据是什么类型
interface IResponse<T> {
code : number;
message : string;
data : T;
}e.函数TS
function 函数名(参数){
函数体
} function 函数名(参数:参数类型): 函数返回值的类型{
}
// 在参数后面加 :类型 意思是要求函数返回该类型
function addFn(a:number,b:number):number{
//必须return，return的类型必须是要求函数返回该类型
return 'abc'
}
