文章目录
- TypeScript
- 1.安装TS并且配置运行环境
- 2.一些TS基础知识
- 2.1 关于数据类型
- 2.1.1 基础类型
- 2.1.2 联合类型
- 2.1.3 接口
- 2.1.4 数组
- 2.1.5 函数
- 2.2 常用内容
- 2.2.1 创建别名
- 2.2.2 字面量限制
- 2.2.3 元祖&枚举
- 2.2.4 类与接口
- 2.2.5 泛型
TypeScript
为了配合学习Vue3，所以昨天复习了一遍JavaScript，今天就接着学了一遍TypeScript，因为没有涉及到异步Promise那些，所以学起来还算轻松。
1.安装TS并且配置运行环境
一般来说，我们运行.ts文件需要先npm install -g typescript下载，然后使用tsc xxx.ts将ts文件编译为js文件node运行。
但是如果我想直接在WebStorm中运行ts文件，就得另外配置。
首先安装好环境
npm install -D typescript
npm install -D ts-node
npm install -D @types/node配置好运行设置
然后去插件中安装run configuration for typescript
重启WebStorm之后就可以像以前一样点击直接运行.ts文件了
2.一些TS基础知识
2.1 关于数据类型
2.1.1 基础类型
和大多数语言一样，TS的基础数据类型包括布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt，其中布尔就是boolean、数值用number，字符串用string
除此之外，我们如果想恢复JS的灵活性，可以将数据类型定义为any，也就是可以被赋值为任意类型，就不会出现TS中如果定义为string再赋值为int出错了。当我们定义变量时并没有进行赋值，这个时候TS都会将变量推断为any类型，这样就避免了类型检查，后面也就可以灵活赋值。
如果开始没有赋值也就不会进行类型推断，后续任何赋值也就不会出错
2.1.2 联合类型
如果我们就想一个变量能赋值为string和number类型，但是不能赋值为其他类型，这其实也是可以的，这就需要使用联合类型
使用|将两种类型分隔开就可以允许多种类型了
2.1.3 接口
接口之前都是面向对象中定义抽象方法用到的，在TS中除了可以对类的方法进行抽象之外，还可以对属性进行规定。
interface Man{
name:string
age:number
}
let a:Man={
name:"a",
age:18
}
console.log(a)在这种情况下，我们的赋值变量既不能多一些属性，也不能少一些属性。但是每个人还是有不同点的，所以还需要一些可选的属性。
interface Man{
name:string
age:number
alive?:boolean
}
let a:Man={
name:"a",
age:18,
alive:true,
}
let b:Man={
name:"b",
age:99,
}
console.log(a)
console.log(b)
在这里我们的alive属性就是可选的，这个属性可以不存在，但是还是不能添加属性。没有什么是没办法做到的对吧，之前讲过any可以定义任意类型，当然也可以是不存在的类型。
interface Man{
name:string
age:number
alive?:boolean
[xxx:string]:any
}
let a:Man={
name:"a",
age:18,
alive:true,
work:"student"
}
let b:Man={
name:"b",
age:99,
email:"xxxx@xxx.com"
}
console.log(a)
console.log(b)
当然这里面依然可以定义只读属性，只能读取不能修改。
2.1.4 数组
对于数组的定义可以使用传统的方式，类似于C++中的int[]，TS中可以用let arr:number[]=[1,2,3,4]，当然也可以用泛型let arr1:Array<number>=[5,10,15]
let arr:number[]=[1,2,3,4]
let arr1:Array<number>=[5,10,15]
arr.push(11)
console.log(arr,arr1)
arr.pop()
console.log(arr)
2.1.5 函数
有三种定义函数的方式
- 函数声明
- 函数表达式
- =>函数
function sum1(x:number,y:number):number{
return x+y
}
let sum2=function (x:number,y:number){
return x+y
};
let sum3=(x:number,y:number)=>x+y;
let a:number=15
let b:number=16
console.log(sum1(a,b))
console.log(sum2(a,b))
console.log(sum3(a,b))
//可选参数以及参数默认值
function Print(str:string,age:number=18,str2?:string){
if(str2){
console.log(str+` ${age} `+str2)
}else{
console.log(str+` ${age} `)
}
}
Print("aaa")
Print("bbb",1)
Print("bbb",1,"ccc")
2.2 常用内容
2.2.1 创建别名
type 新名字=原始数据类型
2.2.2 字面量限制
从创建别名的时候将别名进行限制，使用|这样就可以使别名只能在几个有限的值中选择。
2.2.3 元祖&枚举
我们利用元祖可以合并不同类型的元素
let person:[string,number]=['aaa',18]
console.log(person)
//单独赋值
let a=[]
a[0]=1
a[1]='aaa'
console.log(a)
//一次赋值时必须同时赋两个值
a=[12,'bbb']
console.log(a)
枚举和其他语言一样，都是可以自增
enum Days{Mon=1,Tue,Wed,Thu,Fri,Sat,Sun}
function Print1(){
for(let i=1;i<=7;i++){
console.log(Days[i])
}
}
let names:Array<any>=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
names.forEach((val)=>{
console.log(Days[val])
})
Print1()
2.2.4 类与接口
interface Do{
sleep(h:number):string
}
class Person implements Do{
name:string
constructor(name:string) {
this.name=name
}
say(sth:string):string{
return `My name is ${this.name},and ${sth}`
}
sleep(h:number):string{
return `睡了${h}小时`
}
}
let a:Person=new Person("aaa")
console.log(a.say("I'm Unhappy!"))
console.log(a.sleep(10))
2.2.5 泛型
function createArray<T>(length:number,value:T[]):Array<T>{
let result:T[]=[]
for(let i=0;i<length;i++){
result[i]=value[i]
}
return result
}
console.log(createArray<number>(5,[3,4.5,7,5,1]))
function swap_diff<T,U>(tuple:[T,U]):[U,T]{
return [tuple[1],tuple[0]]
}
console.log(swap_diff(['aaa',18]))
