学习TS的总结

解开疑惑

最近刚刚接触TS,我刚开始不太理解，为啥要用TS,限制很多还要转换，觉得js也有类型转换，强类型和弱类型也没有很大的区别，不懂为啥那么的推崇TS。

之后慢慢的了解思考之后，我明白了些用TS的好处

• 方便更准确的检查错误。
• 给程序带来稳定性和可预测性。
• 静态类型检查。项目中不再需要typeof检查类型，数据类型之前就规定好的。比如react传过来的props就不需要写proptypes。

TypeScript 语法

1. 类型注解

类型注解就是给变量、函数添加类型约束。

function hello(name:string){
    return "hello,"+name;
}
复制代码

这里规定了hello函数要接受一个字符串的参数，若此时传number等就会报错。

数据类型

可限制的数据类型有：Boolean number string number[]/Array

元组

元组允许数组类型可以不一致，如 let x:[number,string]

枚举

枚举类型可以为一组数值赋予友好名字

enum Color {Red=1,Green,Blue}
let colorName:string=color[2]
alert(colorName); //Green
复制代码

任意值 any

当不清楚要指定什么类型时，用any来表示任意值let notSure:any=1

当只知道一部分数据的类型时候，也可以使用any,如数组可以包含不同类型的数据

let list:any[]=[1,true,'hello world'];
list[1]=100;
复制代码

空值 void

如一个函数没有返回值时，则返回值类型为void

function noreturn():void{
    alert('this is not return')
}
复制代码

2. 接口

在下面的例子中，我们用接口来接口来描述拥有first,last字段的对象，这就要求在实现接口的时候要保证包含了接口要求的结构。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "li", lastName: "meimei" };

document.body.innerHTML = greeter(user);

复制代码

可选属性

接口里面的属性并非都是必须属性，有些函数只需传入部分参数,如下color属性为可选属性。

interface config{
    color?:string;
    width:number;
}
复制代码

可读属性 readonly

interface config{
    readonly x:number;
    readonly y:number;
}
复制代码

函数类型

使用接口描述函数的类型

interface SearchFun{
    (source:string, subSource:string):boolean;
}
let search:SearchFun;
search=function(source:string,subSource:string){
    let res=source.search(subSource);
    return res>-1;
}
复制代码

类类型实现接口

interface ClockInterface{
    curTime:Date;
    setTime(d:Date);
}
class Clock implements ClockInterface{
    curTime:Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}
复制代码

继承接口

接口可以继承一个接口或者多个接口

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
复制代码

3. 类

创建一个带有构造函数和一些公共字段的类。

在构造函数的参数上使用public,相当于构建了同名的字段名

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);
复制代码

类的修饰符

class Car{
    public type:string;
    private name: string;
    protected color:string;
    readonly shape:string;
}
new Car("train").name; // 错误: 'name' 是私有的.
复制代码

• public：默认
• private:不能在声明他的类的外部使用
• protected:和private很相似，但是能在其派生类中使用
• readonly:只读属性只能在构造函数或者申明时候使用

总结

TS是JS的超集并能编译成JS，也就是说TS最终会要编译成js才使用。

自己在项目中使用TS还很少，先研究一下基础知识。