TS和JS的区别

• ts与js相比增加了类型的限制
• ts在变量赋值时必须提供与提供的类型匹配的值
• 限制变量只能访问绑定类型中的属性和方法

JS转TS

• 手动转换: 通过命令 tsc 文件名.ts 进行转换
• 自动转换
  • 通过tsc --init创建一个tsconfig.json文件
  • outDir属性表示输出路径
  • strict属性表示是否开启严格模式
  • 具体属性介绍见tsconfig.json属性说明

TS中的数据类型

• 布尔类型: boolean
• 数字类型: number
• 字符串: string
• null和undefined
• 数组: 有两种定义方式
  • Array<数组内数据类型>
  • 数组内数据类型[]
• 元组(tuple): 元组类型用来表示一个已知元素数量和类型的数组
• 枚举(enum): 用于标识状态和固定值
• any: 不确定数据类型可以赋值any,尽量不用
• void: 空值,常用于函数没有return的时候
• object: 复杂数据类型
• 联合类型: 可以对一个变量定义多个类型, 类型中间用 | 分割
• 类型断言: 手动的指定一个值的类型, 只在编译阶段起作用
  • 写法1: <类型> 值
  • 写法2: 值 as 类型
• 类型推断: ts在没有明确指出类型时推断出一个类型
  • 定义的变量赋值时, 推断的类型与赋值的类型一致
  • 定义变量没有赋值时, 推断类型为any

let num: number = 1 // 数字类型
let str: string = "33" // 字符串类型
let bool: boolean = true // 布尔类型
// 数组定义方式1
let arr1: Array<string> = ['w','q','g']
// 数组定义方式2
let arr2: number[] = [1,2,3,4]
let tuple: [string,number,number,boolean] = ['w',1,3,true] // 元组
enum enu {flag = 1, flag2 = 'ww'} // 枚举
if(num === enu.flag) {
    console.log('判断中使用枚举类型');
} else if(str === enu.flag2) {
    console.log('注意,使用枚举时如果两边数据类型不同会报错');
}
// 空值的使用
function fn0(): void{
    console.log('使用void没有返回值');
}
function fn1(): number{
    console.log('返回值为number类型');
    return 1
}
// 联合类型
let func = (a: number | string): string {
    console.log('参数a可以是number类型也可以是string类型');
    // 类型断言
    if(<string> a) {
        return <string> a
    } else if(a as number) {
        return a.toString()
    }
}

TS中的接口

• 接口可以对属性或行为进行规范,包括属性接口, 函数接口和类接口
• 可选类型: 在函数传参或接口定义时有些属性或参数可传可不传,这是会给可选属性 变量名?:类型

属性接口

• 属性接口是对TS中对象的一种约束,通过interface定义

interface objInter {
    name: string
    age: number
    idCore?: number
};
let peoplOne: objInter = {
    name: '老祖',
    age: 86000,
    idCore: 210782082605247482
}
// 没有实现可选属性
let peoplTwo: objInter = {
    name: '一劫',
    age: 319960000,
}

函数接口

• 对函数的参数返回值进行约束

interface fnInter {
    (name: string, age: number): string,
}
let useInterFn:fnInter = (name: string, age: number): string=> {
    return `${name}活了${age}岁`
}

泛型

• 泛型是在定义函数,接口或类的时候,不提前指定类型,而是在使用的时候决定类型.
• 泛型可以解决类接口和方法的复用性以及对不特定数据的支持

// 泛型: 支持不特定的数据类型, 传入参数要和返回参数一致
// 三个相同的大写字母表示泛型(通常使用T): 具体什么类型在调用时候决定
function getDataFn<T>(value: T):T {
    return value
}
console.log(getDataFn<number>(111));
console.log(getDataFn<string>('111'));
// 类的泛型
class MinClass<T> {
    list:T[] = []
    add(value: T): void {
        this.list.push(value)
    }
    minFn(): T {
        var min = this.list[0]
        this.list.forEach((item,index) => {
            if(min > item) {
                min = item
            }
        });
        return min
    }
 }
 let m = new MinClass<number>() // 实例化类并且规定类中T的类型为number
 m.add(12)
 m.add(20)
console.log(m.minFn()); //=> 2
// 接口泛型
interface ConfigFn {
    <T>(value1: T,value2: T): T
}
let esFive: ConfigFn = function<T>(v1: T,v2: T): T{
    return v1
}
esFive<string>('33','44')
esFive<number>(31,55)
let esSix = <T>(v1: T, V2: T): T => {
    return V2
}
esSix<number>(31,55)
// 第二种方法
interface TconfigFn<T> {
    (value: T): T
}
function TesFive<T>(v: T): T {
    return v
}
let five:TconfigFn<string> = TesFive
five('3ee')