TypeScript 基础

TypeScript 是 JavaScript 的超集, 支持 JavaScript 的写法，而且提供类型检查，TypeScript 提供了一些面向对象编程的能力。

数据类型

JavaScript 目前的基础数据类型有 Number， String ，Boolean， Null ，Undfiend ，Symbol ，BigInt,引用数据类型 Array Object Function、Date等 TypeScript 在 JavaScript 的基础上添加了 Never Any Enum Tuple Void这些基础数据类型

Never 表示永远不存在值的类型，没有值能够赋值给 Never 类型

Any 表示能够成为任何类型，好比设定一个变量 没想好它是什么类型的，可是又要经过类型检查，能够设定为 Any

Void 表示没有任何类型,好比一些函数没有返回值，能够把这个函数设置为 void 型

Enum 枚举 枚举是为一组数据赋予了名字，便于读取这组数据中的元素，例如

enum Color {Red = 1, Green = 2, Blue = 4}
let c:Color = Color.Red;
console.log(c) // outut: 1
复制代码

Tuple 元组 当你想表示一个已知元素数量和类型的数组，各元素的类型不相同，能够使用元组，例如

let  arr:[string, number]
arr = ['a',1]
复制代码

类型断言

类型断言就是书写自己去肯定数据类型，不通过类型检查

有两种写法

// 尖括号
let str:any = 'xxx'
let strlength = (<string>str).length

复制代码

// as
let str:any = 'xxx'
let strlength = (<str as string).length
复制代码

接口

TypeScript 的核心思想是提供类型检查，接口 interface 就相似于一个契约，咱们提早约定一个类型限制

对属性的约束

interface Value {
  label: string;
}
function check(obj:Value){
    consle.log(obj.label)
}
let a  = {age:17,label:'xxx'}

check(a) // output : 'xxx'

复制代码

对函数的约束

对函数的约束能够变量不一样，可是类型要一致

interface Func{
name:string;
num:number;
}
function getdata:Func(name:string,value:number){
    console.log(value, name)
}
getdata({name:'xxx',vakue:16})
复制代码

可索引的接口

// 定义一个数组

interface Arr{
    [index:number]:number
}
let array:Arr = [1,2,3,4]
console.log(array[0]) // output:1

let brr:Arr = ['xxx','yyy'] // error!
复制代码

可选属性预约义

对一些可能存在存在的属性进行提早定义

interface data{
    name ?:string;
    age ?:number;
}

function check(obj:data):{name:number,sex:number}{
let newvalue = {name:'xxx',sex:'fexmal'}
return newSquare
}

check({name:'yyy'})

复制代码

readonly / const

const 用于声明一个常量，readonly 用于定义接口中的只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5 // error!
复制代码

泛型

泛型能够帮助咱们复用组件，不限制传入的数据类型

假设咱们使用 any 来定义函数，也能够不限制输入的数据类型,可是这种作法就没有办法控制函数的返回类型，能够输出任意的类型

function func(arg: any):any{
   return arg;
}
复制代码

可是咱们假设设置一个 T 变量帮咱们捕获数据类型，限制函数返回的也是这个类型，这种类型的函数被称为泛型

function identity<T>(arg: T): T {
    return arg;
}
复制代码

泛型类

class Min<T>{
    public arr:T[]=[];
    add(value:T){
        this.arr.push(value);
    }
}
var m1=new MinClassT<number>();
m1.add(123)
复制代码

泛型函数

function getData<T>(value:T):T{
        return value;
    }
     getData<number>(123);

     getData<string>('1214231');
复制代码

泛型接口

interface ConfigFn{
     <T>(value:T):T;
}

var getData:ConfigFn=function<T>(value:T):T{
    return value;
}
    getData<string>('张三');
    getData<string>(1243);  //error!
复制代码

函数

类型推论

类型推论也和类型检查有关，当咱们没有特地指明类型时，TypeScript 会自动进行类型推论来肯定类型

通用

let x = 3 // success ，这里x被推论出是number型的
复制代码

上下文类型

有的时候 TypeScript 会根据所处的上下文进行推论 好比咱们一般的写法：

window.onmousedown = function(mouseEvent) {
    console.log(mouseEvent.button);  // Error！
};
复制代码

上面这种写法没有指明 mouseEvent 的类型，TypeScript 会根据 window.onmousedown 来推论，可是把 mouseEvent 设置为 any 类型就能够经过类型检查了