关于ts总结

1、Ts简介

• 官网：TypeScript: JavaScript With Syntax For Types.
• 中文网：TypeScript中文网 · TypeScript——JavaScript的超集
• 介绍

• • TypeScript简称TS，TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准3.TS的基本类型。
  • 扩展了JavaScript的语法，TypeScript完全兼容JavaScript
  • TypeScript由微软开发的自由和开源的编程语言
  • TypeScript是一门纯静态的编程语言，需要编译才可以运行。从语法上来讲，TypeScript更严格。比较使用于大型项目的开发

2、安装

cnpm install -g typescript

安装完成后可以通过 tsc -v来查看版本

3、使用

1. 定义一个**.ts文件
2. 通过tsc **.ts转换为js文件
3. 在网页中引用js文件就行

4、ts的基本数据类型

// 字符串
let str="123" // let str:string="123"
//number
let num=123
//boolen
let flag=false;
flag=true
//在声明变量的时候如果不给变量设置数据类型  那么这个变量赋值的时候可以随便赋值
let user;//==let user:any  任何类型
user=123
user="456"

5、Ts的数组

在ts中，数组只能设置单一类型的数据

//TS 中的数组  数组中的数据的类型必须是单一的
let arr:Array<string>=["123","345"]
let arr2:Array<number>=[1,2,3]
let array3:Number[]=[3,4,5]
//如果不指定数据类型  那么ts会自己根据值推断一下
let test=['1',4,true]

6、元祖

//元祖  就在这个数组中可以存储多个类型的数据
let arr:[string,number]=['234',123]

7、枚举

// ts的枚举就是将数据列举出来


enum Color{
    pink,yellow,red
}


let mycolor:Color=Color.pink


console.log(mycolor)

8、定义对象

//定义对象的方式一
 let obj:{username:string,age:number}={username:"张三",age:20}
//定义李四的数据
let obj2:{username:string,age:number}={username:"lisi",age:18}
//type关键字 可以将公共的对象类型使用type关键字来定义
/*
    type  类型名={
        属性名：这个属性的类型
    }
*/
type objtype={
    username:string,
    age:number
}
let obj3:objtype={username:"xiaosi",age:23}
let obj4:objtype={username:"xiaosu",age:23}
//type关键字利用 &来扩充属性
let obj5:objtype&{classname:string}={username:'小六',age:20,classname:'2206B'}

9、接口

//interface 接口  专门用来描述对象的形状 （有哪些属性  属性的类型是什么）


/**
 * interface 接口名={
 *  属性名：类型，
 *  属性名：类型
 * }
 * 
*/
//定义了一个学生的接口
interface Student{
    stuname:string,
    age:number
}
let stu:Student={stuname:'123',age:20}
let stu2:Student={stuname:'345',age:21}
//interface使用extends来扩充接口
interface Stu extends Student{
    classname:string
}


let s1:Stu={stuname:'hello',age:21,classname:'2206B'}


//[{},{}][1,2,3]
//接口类型的数组 事后期列表数据的类型
let arr:Student[]=[{stuname:'123',age:20},{stuname:'345',age:21}]

**interface和type的相同点与不同点**

相同点：就是都可以实现形状的扩展  type使用的是交叉类型&来实现的  interface是通过extends来实现的

不同点：type如果定义了相同的type会报警告  interface会实现的是属性的合并

10、函数

• 怎么定义函数返回值的类型
• 怎么定义参数的类型
• 怎么定义函数类型

// 定义函数的要素  有几个参数  返回值是什么
// 返回值的类型  参数的类型  函数的类型
// void 表示函数没有返回值


// const add=(num1:number,num2:number):number[]=>{
//     return [num1,num2]
// }


// const fun:(num1: number, num2: number) => number[]=add



type funtype=(num1: number, num2: number) => number[]


const add:funtype=(num1,num2)=>{
    return [num1,num2]
}

11、断言

//类型的断言是通过关键字as来实现的  就是要绕过ts的类型推测
//定义一个函数 返回参数的length属性
//将联合类型指定为一个具体的类型
//语法  变量 as 类型    或者  <类型>变量
function fun(arg:string|number):number{
    //断言的第一种写法
    if((arg as string).length){
        //断言的第二种写法
        return (<string>arg).length
    }else{
       return arg.toString().length
    }
}

12、字面量类型

//字面量类型  值就是字面量
 type direction="left"|"right"|"top"|"bottom"


let str:'123'='123'


function  test(str:direction){
    return "按下了"+str+"键"
}


test("left")

13、泛型

在定义变量的时候如果不知道类型怎么办呢：

1. any

使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势

1. 泛型

泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性

泛型的使用

TS中的泛型_ts 泛型_xianghong_yang的博客-CSDN博客

//泛型
function test<A>(arg):A{
    return arg
}


function  fun<T,B,V>(num1:T,num2:B):B{
    return num2
}


fun(123,'123')


interface objtype{
    username:string,
    age?:number
}


function  add(arg:objtype):objtype[]{
    let arr=[arg]
    return arr;
}


function cut<T extends objtype>(arg:T):T{
    return arg
}


cut({username:'小三'})