TypeScript 比起 JavaScript 有什么优点?
提供了类型约束,因此更可控,更容易重构,更适合大型项目,更容易维护。
如何使用 TypeScript ?
首先确定电脑安装了 node.js ,
然后 安装 : npm install -g typescript
让全局可以使用 typescript
因为 typescript 经过编译才可以变成 javascript
所以可以在项目根目录下写一个 tsconfig.json 文件夹
{
“compilerOptings”: { //配置 tsc编译器
"target" : "ES2017" // 指定要编译的版本
}
}
有了这个文件夹,就可以直接 tsc 进行编译,因为它会自动找到ts文件进行编译。
.ts 文件中书写:
基本数据类型:boolean 、number、string、undefind、null
- 分为隐式 和 显示
隐式类型:
let a = 10; //a隐式的确定了number类型
a = "hello"; //a 赋值string类型就会报错
显示类型:
let b: boolean = true; //显示类型确定b只能是 boolean类型
任意类型:
let c: any =10;
c = "hello" ; //可以任意类型
类型用到函数返回值的参数中:
function add(a: number, b: number):number{
return a+b;
}
函数返回值的类型可以省略,因为可以通过返回值推断出返回值的类型:
function add(a: number, b: number){
return a+b;
}
add(1,2); //true , 正常调用
let res:string = add(1,2) //error, number类型不能赋值给string类型
add("1",2); //error, 字符串1 不是number类型
add(1); //error, 只传一个参数,会显示没有给b传值
如果没有返回值的话,可以使用void表示没有返回值类型
function add(a: number, b: number):void{
console.log(a+b);
}
组合类型:
如果一个变量有多个类型,但又不想使用any破坏类型检查,可以使用组合类型
let a: number | string =10;
a = "hello";
//但这样只能给a 使用类型,并且书写不方便。如果变量b要使用同样类型,还得重复定义。
要解决这个问题可以用 type关键字给这个组合类型写个别名:
type NumStr = number | string; //自定义类型建议首字母大写
let a: NumStr = 10;
a = "hello";
let b: NumStr = "hello";
如果只想定义变量取某几个特定的取值,也可以
let c: "on" | "off" ="on";
c = "off" ; //true
c = "other"; //error c不能取值除 on 或 off的类型
对象类型:
- 检查对象属性
要检查对象里的属性是否符合规定就要用到 interface 接口了。
接口是用来规范一个对象里,应该拥有哪些属性,包括它的名字和类型。
interface Post {
title: string; //注意:每个属性后要用分号结尾,不用逗号
author: string;
}
//多定义类型
let post: Post ={
title: "标题",
author: "fh",
publishDate: "2020-05-01"; //error ,对象里只能定义接口的属性。
}
//少定义类型
let post: Post ={
author: "fh", //error, 对象里确实title属性
}
- 检查函数属性
除了检查对象类型,也可检查函数类型属性
注意:如果传递进来的对象没有定义类型的话,那么只要它的属性里包含接口里定义的规范,就可以通过检查,哪怕它多出属性来。
interface Post {
title: string; //注意:每个属性后要用分号结尾,不用逗号
author: string;
}
function getTitle(post: Post) {
console.log(post.title);
}
let post ={ //没有定义类型 ,多出一个属性
title: "标题",
author: "fh",
publishDate: "2020-05-01"
}
getTitle(post); //true,可以通过检查
如果想要防止这种事情,
1:可以给传递的对象也定义接口类型
let post:Post ={
title: "标题",
author: "fh",
publishDate: "2020-05-01" //error ,对象里只能定义接口的属性。
}
2:直接传递值
getTitle(
title: "标题",
author: "fh",
publishDate: "2020-05-01"
);
数组类型:
- 给数组规定类型可以保证数组里都是同一个类型,
- 以防止处理数组元素类型时,混进来其他类型的元素,导致异常。
- 或者防止意外给数组元素赋了其他类型的值。
let arr: number[] = [1,2,3];
泛型表示需要用到构造函数类型。
let arr: Array<number> = [1,2,3];
元组:tuple 有限元素数量的数组,但需要分别赋值每个元素的类型
eg:
//三元组:这个数组里有三个元素
let tup: [number,string,boolean] = [1,"fh",true];
TS中:never 类型是什么,为什么使用never类型?
never类型表示没有出现的类型,
使用never是为了避免新增了联合类型没有对应的实现