【typescript】typescript使用笔记

安装

$ npm install -g typescript
$ cnpm install -g typescript

初始typescript配置

tsc --inint//创建tscconfig.json文件
//修改tsconfig.json 设置编译的js文件夹
"outDir":"./js"
//可以设置vscode监视任务，之后修改项目中的ts自动生成js

变量的声明

let dName:string = 'Ruiky'

常见类型

• string
• number
• boolean
• Array
• null
• undefined
• Symbol
• object
• tuple元祖(新增)
• enum枚举(新增)
• any任意类型(新增)
• never(新增)
• void(新增)

变量使用

1. 变量的声明

let dName:string = 'Ruiky'

2. 字符串类型

let cName:string = 'Ruiky'

3. 数值类型

let dAge:number = 18
dAge = 18.13
dAge = -1

4. 布尔值类型

let isMan:boolean = true
isMan = false

5. undefined和null

let undef:undefined = undefined
let nu:null = null

6. 数组,元素类型固定

+ 声明语法1

let arrHeros:string[] = ['superman','spiderman']

+ 声明语法2

let arrHeros2:Array<string> = ['superman','spiderman']

7. 元祖,规定了元素的数量和每个元素类型的“数组”，而每个元素的类型可以不相同

+ 语法

let tup1:[string,number,boolean] = ['acb',18,true]

+ 访问元祖中元素和长度

console.log(tup1[0],tup1.length)

为什么要有元祖，ts中数组元素类型必须一直，如需要不同的元素，可以使用元祖

8. 枚举

+ 语法 枚举项一般使用英文和数组，枚举值使用整型数字

enum gunType{
    
    
    M416 = 1,
    AK47 = 2,
    Goza = 3
}

+ 枚举值默认是可以省略的,数字从0开始

enum personType{
    
    
    man,
    woman,
    unknown
}

+ 使用枚举

console.log(personType.man)
console.log(personType.woman)
console.log(personType.unknown)
let userSex:personType = personType.man

+ 判断变量中的性别是否为man

if(userSex == personType.man){
    
    
    console.log(userSex)
}else{
    
    
    console.log(userSex)
}

9. any代表任意类型，一般在获取dom时使用

+ 我们在接收用户输入或第三方代码库时，还不能确定会返回什么类型的值，此时也可以使用any类型
+ 语法

let txtName:any = document.getElementById('txtN')

10. void代表没有类型，一般用在无返回值的函数

 + 语法(ts中函数必须指出返回值的类型)

function sayHi1():string{
    
    
    return 'hi'
}
let re1 = sayHi1()

+ 使用void

function sayHi2():void{
    
    
    console.log('我是使用void的函数')
}
sayHi2()

11. never代表不存在的值得类型，常用作为抛出异常或无限循环（死循环）的函数返回类型never是ts中的底部类型，这意味这所有类型都是never的父类，所以never类型的值可以赋给任意类型的变量

+ 语法

function test():never{
    
    
    while(true){
    
    

    }
}
let x:never = test()
function error():never{
    
    
    throw new Error('抛出的异常')
}

12. 类型判断 如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明，但是ts会自己判断类型

let age = 18
//age = 'abc' 会报错因为ts将age变成了number

13. 联合类型 表示取值可以为多种类型中的一种let 变量名： 变量类型1|变量类型2 = 值

let gName :string | null = prompt('请输入小狗的名字：')
console.log('hello',gName)

函数

// 函数 返回值类型
function sayName(name:string):string{
    
    
    // 如果没有返回值，则定义为void
    console.log('hi')
    return name
}
let dog:string = sayName('dog')