TypeScript

TypeScript

typescript是在javascript上添加静态类型定义构建而成,但浏览器不能够直接进行支持解析typescript语法,而是需要通过插件来进行编译成javascript之后才可以运行

安装

npm i -g typescript // 全局安装

tsc -V // 查看是否安装成功

使用

手动编译:

创建ts结尾的文件,里面可以正常书写js代码

ts和js的区别在于ts可以在形参后面加上:类型

tsc xxx.ts // 对ts文件进行编译成js,编译后的js文件是没有类型修饰的

在ts中定义用的是let修饰符,编译之后就变成var

vscode自动编译:

在当前工程的命令行中输入tsc --init

就会生成一个配置文件

修改生成的配置文件tsconfig.json

修改内容

"outDir":"./js" //指定生成目录
"strict":false //原本配置已经存在,是否开启严格模式

类型注解

ts提供了强大的静态代码分析能力,可以在编写代码的时候就提供错误提示

类型注解是指在类型后面加上:类型,来进行限制类型,当我们传入的类型不匹配的时候就会有提示,且编译不能通过

接口

接口是一种类型的约束

可以将属性设置为只读,设置成只读那么就只可以获取不可以进行修改

在属性名后加上?那么说明这个属性可以传入也可以不传入

接口可以继承接口

(()=>{
    interface XXXX{}
    //接口可以继承多个接口
    interface XXX extends XXXX,XXXXXX{
        name: string, //默认必填
        readonly age:number,//只读
        sex?:stirng //可有可无
    }
})()

(()=>{
    //定义一个接口
    interface XXX {
        name: string, //默认必填
        readonly age:number,//只读
        sex?:stirng //可有可无
    }
    function showName(person:XXX){
        console.log(person.name)
    }
    showName({
        name:"哈哈" //只能传入约束的形参
    })
})()

类

定义的类和js方式一样

接口的约束对类传递参数一样有效,多一个少一个都会语法不过

(()=>{
    //定义一个接口
    interface XXX {
        name: string
    }
    class Person{
        name: string
        // 构造器
        constructor(name: string){
            this.name=name
        }
    }
    function showName(person:XXX){
        console.log(person.name)
    }
    const person = new Person("123")
    showName(person)
})()

基础类型

基本语法

let name:数据类型 = xxx

let a:boolean = xxx
let a:number = xxx
let a:string = xxx

字符串和数字之间可以进行拼接

一开始定义的类型是什么就只能够使用什么类型,不能赋值其他类型

any类型和void:

any类型可以存放任意类型的数据

:any[]可以存放任意数据类型的数组

使用any类型那么不管方法是否不存在也可以编译通过

void可以在函数声明后面加上,表示该方法没有返回值

function sb():void{}
let vd:void=undefined //意义不大

数组

let 变量名:数据类型[] = [xxx]

定义的数据类型和数组里的数据类型需要保持一致

元组

let 变量名:[string,number] = [“”,1]

元组指定的类型和个数一开始就指定,且需要对应

枚举

enum Color{

​ red,

​ green

}

枚举里面的所有元素都可以叫元素,每个元素都有自己的编号,可以通过Color[0]来进行获取

编号默认是0开始的我们也可以进行指定,下面的依次递增加1

enum Color{

	red=1,

	green

}

赋值编号之后那么下一个就会按照上一个的编号来增加1,green的索引则是2

object

不属于基本类型的,比如对象

function getObject(obj:object):object{
    return {
        xxx:'xxx'
    }
}
getObject({})

联合类型

联合类型表示可以取值为多种数据类型

多种类型用|分隔

function abc(str:number|string):stirng{
    return str.toString()
}

类型断言

当我们确定类型就是某种类型的时候可以使用类型断言来让编译器通过编译

比如联合类型上,需要调用string的方法,但可能是number就可以使用类型断言来告诉编译器

通过<类型>变量 来进行指定

或 变量 as 类型

function abc(str:number|string):stirng{
    if((<string>str).length)
    return str.toString()
}

类型推断

在没有明确指定类型的时候会对应初始值的类型来进行推测一个类型

接下来赋值则同样需要按照对应相同类型进行赋值,否则无法通过编译

函数类型

接口可以用于定义函数的参数类型

(()=>{
    //定义一个接口
    interface XXX {
        // 定义调用签名
		(source:stirng,sss:stirng):boolean
    }
    const searchfuc:XXX  = function XXX{
        console.log(person.name)
    }
    showName("","")
})()

类类型

接口同样可以用于定义类的方法

多个接口通过,进行分隔

(()=>{
    //定义一个接口
    interface XXX {
        fly()
    }
   	class person implements XXX{
        fly(){
            console.log("实现接口的方法")
        }
    }
    const person = new person()
})()

readonly

readonly是一个关键字,被修饰的属性只能是只读的,不能被修改