TypeScript学习笔记

---

一、TypeScript是什么？

• 以JavaScript为基础构建的语言
• 一个JavaScript的超集
• 可以在任何支持JavaScript的平台制行
• TypeScript扩展了JavaScript，并添加了类型
• TS不能被JS解析器直接制行
• TS编译后为JS

二、TS相较于JS增加了什么？

• 类型
• 支持ES的新特性
• 强大的开发工具
• 添加ES不具备的新特性
• 丰富的配置选项

三、TS的类型声明

// 1.声明一个变量a，同时指定它的类型为number
let a:number
// 2.声明完变量直接进行赋值
let c:boolean=false;
// 3.如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let d=false;
d=true
// 4.声明函数(a、b、结果：三者的类型都是number)
function sum(a:number,b:number):number{
	return a+b;
}
let result=sum(123,456)

4、TS中的类型

代码如下（示例）：

// 可以直接使用字面量进行类型声明
let a:10;
a=10;
// 可以使用 | 来连接多个类型（联合类型）
let b:"male" | "female";
b="male";
b="female";

let c:boolean | string;
c=true;
c="hello";

//any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// 显式any--->let d:any;
// 隐式any-->let d;(声明变量 如果不指定类型，则TS解析器会自动判断变量的类型为any)
let d;
d=10;
d="hello"


// d的类型是any，它可以赋值给任意变量eg：↓
let s:string;
s=d;

// unknow 表示未知类型
let e:unknown;
e=10;
e="hello";
e=true;
// unknow 实际上是一个"类型安全的any"
// unknow 类型的变量，不能直接赋值给其他变量。可以通过以下方法赋值
// 方法1：
if(typeof e==="string"){
    s=e；
}
// 方法2：类型断言，可以用来告诉解析器变量的实际类型
//两个语法：
// ①变量 as 类型 
s=e as string;
// ②<类型>变量
s=<string>e;

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn():void{

}

// never 表示永远不会返回结果
function fn2():never{
    throw new Error("报错了！")
}

//object表示一个js对象(不常用)
let a:object;
a={}
a=function(){
};

// {}用来指定对象中可以包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
// 在属性名后边加上？，表示属性是可选的
let b:{name:string,age?:number};
b={name:"孙悟空",age:18};

// [propName:string]:any 表示任意类型的属性
let c:{name:string,[propName:string]:any};
c={name:"猪八戒",age:18,gendrt:"男"};

// 设置函数结构的类型声明
// 语法：（形参：类型，形参：类型...）=>返回值
let d:(a:number,b:number)=>number;
d=function(n1,n2){
    return n1+n2;
}

// 数组的类型声明：
// 两种方法：类型[]、Array<类型>

// string[] 表示字符串数组
let e:string[];
e=["a","b","c"];

//number[]表示数值数组
let f:number[];

let g:Array<number>;
g=[1,2,3];

// 元组：固定长度的数组
// 语法：[类型，类型，类型]
let h:[string,number];
h=["hello",123]

// enum枚举
enum Gender{
    Male,
    Female
}
let i:{name:string,gender:Gender};
i={
    name:"孙悟空",
    gender:Gender.Male //"male"
}
// console.log(i.gender===Gender.Male);

// &表示同时
let j:{name:string}&{age:number};
// j={name:"孙悟空",age:18};


//类型的别名
type myType=1 | 2 | 3 |4 | 5;
let k: myType;
let l: myType;
let m: myType;

k=5