TypeScript从入门到入土(1) ts的安装以及ts中类型

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

显然可以看出，当我们定义的类型过长时，另一个变量也想用时写起来很麻烦，我们可以用下面的方式进行简化