1.typescript的安装
npm i -g typescript
在命令行里面输入tsc回车出现以下界面表示安装成功
2.HelloTS
首先建一个文件扩展名为ts的文件,HelloTS.ts
用任意记事本软件打开,这里拿vscode举例,在里边输入如下代码:
console.log('Hello TS')
- 点击文件目录
输入cmd,回车,输入tsc HelloTS.ts,会得到一个HelloTS.js的文件,说明我们编译成功
3.TS的类型声明
举例:
- 变量类型
//指定a的类型为number型
let a:number
//进行两个赋值
a=10
a='111'
第一个赋值没有问题,第二个赋值会报错,但是编译js的时候也会通过
- 函数参数以及返回值类型
也可以指定函数参数的类型,和函数返回值的类型,调用时传的值的类型不对,或者返回值的类型不对都会报错。代码如下所示
let sum=function (a:number,b:number):number{
return a+b
}
TS里的类型
具体用法
1,number、string、boolean
let a:number=10
let b:string='aaa'
let c:boolean=true
2,可以用字面量,赋其他值会报错
let b:10
b=11
3,使用 | 来连接多个类型(联合类型)
let c:boolean | number=true
c=10
4,any任何类型都可以,相当于关闭了ts检测,不建议使用any
//any 任何类型
let d:any
d=10
d='aaaa'
d=false
5,unknown类型表示未知类型
//any 任何类型
let e:unknown
e=10
e='aaaa'
e=false
注意:可以把any类型的值赋值给其他任意类型的值,但不能把unknown类型的值赋值给其他类型的变量,否则会报错。例如:
但是unknown类型的变量也可以赋值给其他变量,不过要做类型判断
方法一
let f:unknown
f='aaa'
let g:string
if (typeof f==='string'){
g=f
}
方法二
类型断言:告诉编译器变量的实际类型,两种语法
- unknown类型变量 as 想要赋值的变量的类型
- <想要赋值的变量的类型> unknown类型变量
//unknow类型变量 as 类型
let f:unknown
f='aaa'
let g:string
g=f as string
//<类型>unknow类型变量
let f:unknown
f='aaa'
let g:string
g=<string> f
6,void类型
常用于函数的返回值,返回undefined或null可以
7,never类型
不会返回任何值,抛出错误的时候可以用,用的很少,了解即可
8,object类型
只是单纯的限制对象,开发不常用
let person:object
指定对象里边key的类型常用,在属性名后边加?表示可选,加不加这个属性都不报错
let person:{
age:number,
name?:string
}
但是上边这种写法还是有缺点的,例如我只想让age属性的类型为number,其他属性不做规定,要是按照上边第一种写法,就只能有且只有一个属性名叫做name,属性的类型为string,我们可以使用[变量名:string]:any来解决这种需求
let person:{ age:number, [propsName:string]:any}
person={age:18, name:"张三"}
person={age:18, name:"张三", address:"山东"}
同上,若我们只给变量定义为Function,没有什么意义
let fn1:Function
我们可知利用类似箭头函数的写法,指定函数的参数以及返回值
let fn1:(a:number,b:number)=>number
9,数组类型
写法一 :变量名:类型[ ]
let a:string[]
写法二:变量名:Array<类型>
let array:Array<string>
10,元组tuple,长度固定的数组
let h:[string,number]
h=["123",12]
11,枚举类型enum
把所有可能的情况都列举出来,实例代码
enum Gender{
Male,
Female
}
let person:{
name:string,
gender:Gender
}
person={
name:"张三",
gender:Gender.Male
}
if (person.gender === Gender.Male) {
console.log(true)
}
我们可以用 & 符号来表明所连接的条件都必须满足
let arr : { name:string } & {age:number}
最后介绍一下类型的别名,例如我们定义以下类型
let a = 1 | 2 | 3 | 4 | 5
let b = 1 | 2 | 3 | 4 | 5
显然可以看出,当我们定义的类型过长时,另一个变量也想用时写起来很麻烦,我们可以用下面的方式进行简化