TypeScript

TypeScript

更加严谨，让代码更加严谨，编写代码的时候静态类型的校验

安装

npm install -g typescript

//也可以cnpm i -g typescript

检测是否安装成功

tsc -V
//出现版本号表示安装成功
tsc index.ts //就会生成js
tsc -w index.ts //监听ts

在项目文件夹中执行表示初始化项目

就会多一个tsconfig.json文件 ts的配置文件

 tsc --init

更改ts的配置文件

将outDir放出来并更改为

"outDir"：'./js/'

端运行任务点监视

ts中let和const的区别

1. let定义的值是什么类型它就是什么类型

2. const定义的值就是它的类型

ts原始类型有哪些

js基础数据类型：string，number，boolean，undefined，null，symbol

ts原始数据类型就是js基础数据类型

let str:string = '1'
let num:number = 1
let bool:boolean = false
let und:undefined = undefined
let null:null = null
let sy:symbol = symbol('123')
let vo:void = undefined //表示为空 没有返回值 一般在函数使用
let any：any = 1 //any表示为任意类型

ts非原始数据类型

object Object { }

object 不包含基本数据类型 更常用

let obj：object={a:1}
let obj1:object = [1]
let obj2：Object = 2  //报错

Object包含基本数据类型

let obj：Object={a:1}
let obj1：Object = [1]
let obj2：Object = 2 
let obj3：Object = "hallo"
let obj4：Object = true

{ }等效于Object 也包含基础类型

let obj：{}={a:1}
let obj1：{} = [1]
let obj2：{} = 2 
let obj3：{} = "hello"
let obj4：{} = true

数组类型

第一种

let arr：number[] = [1,2,3];
arr[0]=10
arr[1]='hello'//报错，只能数字类型
let arr：string['a','b','c']
arr[1]='hello'
arr[0]=10//报错，只能字符类型
let arr：number[] = [1,2,3];
let arr:(number|string)[] = [1,2,'3'];

第二种 泛型 类型参数化

let arr：Array<number>=[1,2,3];
arr[0]=10
arr[1]='hello'//报错，只能数字类型
let arr4:Array<number | string> = []
arr4 = [1,2,3,'4']

// 泛型  泛型变量T T表示任意类型
function s<T>(n1:T,n2:T):Array<T>{ //定义的时候用泛型表示
  return [n1,n2]  
} 
s<string>('1','2')  //调用赋值为string上面定义就会为string

第三种 元组

let arr：[number,string,boolran]= [10,'a',true]

联合类型 |

let numstr：number | string=10  //|表示或
numstr = 'a' //正确
let obj：{a：1}|{b：'3'}  //表示要么有a属性要么有b属性，不能有其他属性
obj={a:1}
obj={b:'3'}
obj={a:1,b:'3'}

交叉类型 &

let obj：{name：string,age:number}&{height:number} //&都  必须要有name,age,height属性,缺一不可
obj={name:'张三',age=18,height:180}
obj={name：'lisi'} //报错,缺一不可

any 绕过类型校验 unknown 不知道类型但是有校验

let a：any=1
a='1'
a=[1]
a={b:10}
a.toFixed(2) //a现在是对象在js就会报错，但是在这不报错，绕过了，不检验


let n：unknown
n=1
n='10'
n=[1]
n={b:10}
ntoFixed(2) //报错，有做类型校验，除非将上面改为number

interface接口类型

用来自定义类型

interface myobj{    //定义对象类型
    //属性名：值的类型
    name：string;//必须属性,必须定义的
    age：number
    id?：number //加?表示可选属性,下面可有可无
    [propName:string]:any //任意属性
}
let obj：myobj 
obj= {
    name：'张三';
    age:18
}


interface myarr  //定义数组
     //[idx:number|string] 下标类型：值类型
    [idx:number|string]
}
let arr：myarr
arr=[1,2,'3']    
    

interface fn//定义函数
    //形参及类型，返回值类型
{
  (p：string,a:number)：void
}
let fn：fn
fn=(p:string,a:number)=>{}
fn('1',1)//调用fn函数

 readonly age:string  //表示这个属性只允许只读，不允许修改
 //前面加上readonly表示只读不能修改
 
 //定义泛型接口
 interface Inter {  
    <T>(p1:T,p2:T):boolean   //p1,p2的类型为传入类型，返回为布尔值
  } 

接口继承 使用extends

interface myobj{    //定义对象类型
    //属性名：值的类型
    name：string;
}
interface myobj1{    //定义对象类型
    //属性名：值的类型
    age：string;
    age?：string  //?表示缺省可以省略下面不定义age都没事
    readonly age:string  //表示这个属性只允许只读，不允许修改
}
interface myobj2 extends myobj，myobj1{  //含自身以及继承上面两个
    height：number
}
let p：myobj2
p={
    name:'zs',
    age:'18',
    height:180
}

类型别名 使用type

用来自定义类型

type zdylx =string|number
let sn：zdylx
sn=1


type zdylx1 ={a：number&2,b:string }
let obj:zdylx1
obj={
    a:2,
    b:'hello'
}

interface和type的区别

1. 都是用来自定义类型
2. 类型别名支持联合和交叉类型定义
3. 类型别名不支持重复定义，接口可以

类型断言 as

类型断言可以用来手动指定一个值的类型

语法

值as语法   //建议使用这种
//或者
<类型>值

使用

interface Demo{
    name:string,
    age:number
}

const obj ={
    name："zs",
    age:18
} as Demo
name?:string //表示可以没有
str!.length  //表示一定存在

函数类型定义

function sum(n1:number,n2:string):string{  //括号内表示输入类型 ,括号后面表示输出类型(返回类型)
  return n1+n2  //返回string
}  
sum(1,'2')

function sum1(n1:number,n2?:string):Array<string|number>{  //表示返回一个数组必须是string和number类型  n2可传可不传
  return [n1,n2]
}
sum(1,'2')
 
function sum1(n1:number,n2:string):void{  //没有返回值用void定义
    if(n1>n2){
        console.log(11) 
    }
}
function fn(...args:any[]){ //任意类型的数组 使用展开运算符就是数组格式
   console.log(args)
}
fn(1,2,3)

定义对象数组使用interface

interface list { //使用interface定义对象类型
    name：string, //string类型
    age?:number //number 类型 ?表示可有可无
}
let arr:list[]=[{name:'小米'},{name：'华为',age:18}] //数组里边包含的对象必须符和list定义的类型

定义多维数组

//二维数组
let arr：number[][]=[[1],[2],[3]] //定义二维数组
//泛型表示 套娃
let arr：Array<Array<nmber>> =[[1],[2],[3]] //使用泛型定义二维数组
多维后面n个[]

案例

interface menus { //定义menus的类型接口
    name: string,
    key: string,
    path: string
    icon?: any
}
interface menulist {  //menulist的类型接口
    name: string,
    menus: menus[]   //nus为定义的类型接口
}

let menulist: menulist[] = reactive([  //类型约束
    {
        name: '在线音乐',
        menus: [
            {
                name: '推荐',
                key: 'tuijian',
                path: '/tuijian',
                icon: Home
            },
            {
                name: '音乐',
                key: 'yinyue',
                path: '/yinyue',
                icon: MusicCd
            },
        ]
    },
    {
        name: '我的音乐',
        menus: []
    }
])

ts中引入爆红忽略

//@ts-ignore  忽略当前文件ts类型的检测否则有红色提示(打包会失败)