浅谈TypeScript

一、什么是TypeScript

TypeScript是JavaScript的超集，是一种编程语言，添加了静态类型和面向对象的类型，主要用于大型应用或多人协作的项目。

TypeScript和JavaScript的对比

1.应用程序级的javaScript语言

2.是JS的超集，typeScript最终会转成javaScript运行

3.跨平台且开源

4.开始于js，终止js （TS语法遵照JS的语法）

5.重用js，甚至可以引入js流行库，比如echarts.js

6.TS提供了类，接口，模块

二、TypeScript的类型

基础类型包括number， string，boolean，enum(枚举)，any，null，undefined，void，symbol

1.基础静态类型和对象静态类型

const count: number = 918;

const name: string = "liming";

// 普通对象类型

const student: {

  name: string,

  age: number

} = {

  name: "xiaoming",

  age: 20

}

// 数组类型

const teacher: string[] = ["李老师", "王老师"];

// 类类型

class Person {}

const person: Person = new Person();

// 函数类型

const func: ()=>string = ()=>{return "函数"}

2.类型注解和类型推断

如果ts能够自动分析变量类型，我们就什么也不需要做了

如果ts无法分析变量类型，我们就需要使用类型注释

function getTotal(one: number, two: number): number {

  return one + two

}

const total = getTotal(1, 2);

function sayHello(): void {

  console.log("Hello World")

}

function errorFunction(): never {

  throw new Error()

  console.log("Hello World")

}

function forNever(): never {

  while(true){}

  console.log("for Never")

}

function getTotal({one, two} : {one: number, two: number}) {

  return one + two

}

const total = getTotal({one: 1, two: 2});

3.数组类型注解的方法

const stringArr: string[] = ['1', '2'];

const numberArr: number[] = [1, 2];

const undefinedArr: undefined[] = [undefined, undefined];

const arr: (string | number)[] = ['1', 3, '2'];

const xiaokei: [string, string, number] = ['1', '2', 3];

type Student = { name: string; age: number };

class Student{

  name: string;

  age: number;

}

const student: { name: string; age: number }[] = [

  { name: '李老师', age: 18 },

  { name: '王老师', age: 28 }

];

三、TypeScript的使用

1.元组的使用

// 数组

const student：(string | number)[] = ['李明', '张峰', 28];

// 元组

const student：[string, string, number] = ['李明', '张峰', 28];

const student: [string, string, number][] = [

  ['李', '张', 28],

  ['王', '徐', 18],

  ['游', '封', 22]

]

2.接口interface的使用

interface Girl {

  name: string;

  age: number;

  height?: number;

  [propname: string]: any;

  say(): string;

}

const girl: Girl = {

  name: "韩梅梅",

  age: 20,

  sex: "女",

  say() {

    return '123';

  }

}

const meetGirl = (girl: Girl) => {

  girl.age < 24 && console.log(girl.name + '入职');

  girl.age > 24 && console.log(girl.name + '不入职');

  girl.sex && console.log('优秀');

  girl.say();

};

meetGirl(girl);

interface Teacher extends Girl {

  teach(): string;

}

const girl: Teacher = {

  name: "张好好";

  age: 18;

  height: 170;

  sex: "女";

  say(): {

    return "你好，女孩"

  },

  teach(): {

    return "你好，老师"

  }

}

const meetTeacher = (girl: Teacher) => {

  girl.age < 24 && console.log(girl.name + '入职');

  girl.age > 24 && console.log(girl.name + '不入职');

  girl.height && console.log('合格');

  girl.sex && console.log('优秀');

  girl.say();

  girl.teach();

};

meetTeacher(girl);

//Teacher类受到Girl接口的约束

class Teacher implements Girl {

  name='刘颖';

  age=18;

  say() {

    return '你好，武汉人';

  }

}

3.类的概念和使用

class Lady {

  content='李琳月';

  sayHello() {

    return this.content;

  }

}

const lady = new Lady();

console.log(lady.sayHello());

class Girl extends Lady {

  sayHello() {

    return super.sayHello() + '你好';

  }

  sayBy() {

    return '再见';

  }

}

const girl = new Girl();

console.log(girl.sayHello());

console.log(girl.sayBy());

4.类的访问类型

// 类的内部和类的外部

// protected private public

class Person {

  protected name: string;

  public sayHello() {

    console.log(this.name + 'say hello');

  }

}

class Teacher extends Person {

  public sayBye() {

    console.log(this.name);

  }

}

const person: Person = new Person();

person.name = '李明'; // 报错，因为protected是受保护的，所以外面拿不到name

person.sayHello();

5.类的构造函数

class Person {

  public name: string;

  constructor(name: string) {

    this.name = name

  }

}

class Person {

  constructor(public name: string) {

  }

}

const person = new Person("limingming");

console.log(person.name);

class Teacher extends Person {

  constructor(public age: number) {

    super('lilei');

  }

}

const teacher: Teacher = new Teacher(18);

console.log(teacher.age); // 18

console.log(teacher.name); // lilei

6.类的Getter，Setter和static

// private最大用处是封装一个属性，通过get和set访问这个属性

class Student {

  constructor(private _age: number) {

  }

  get age(){

    return this._age - 10;

  }

  set aged(age: number) {

    this._age = age + 3;

  }

}

const student = new Student(28);

console.log(student.age); // 18

student.aged = 25;

console.log(student.age); // 18

class Girl {

  static sayhello() {

    return 'Hello World';

  }

}

console.log(Girl.sayhello());

7.抽象类和只读属性

// 只读属性

class Person {

  public readonly _name: string;

  constructor(name: string) {

      this._name = name;

  }

}

const person = new Person("zhangying");

person._name = "wanger" // 报错

console.log(person._name)

// 抽象类

abstract class Teacher {

  abstract teach()

}

class BaseTeacher extends Teacher {

  teach() {

    console.log("小学老师")

  }

}

class SeniorTeacher extends Teacher {

  teach() {

    console.log("中学老师")

  }

}

class CollegeTeacher extends Teacher {

  teach() {

    console.log("大学老师")

  }

}

8.联合类型和类型保护

interface Student {

  study: boolean;

  listen: () => {};

}

interface Teacher {

  study: boolean;

  teach: () => {};

}

function judgeWho(person: Student | Teacher) {

  if (person.study) {

    (person as Teacher).teach();

  } else {

    (person as Student).listen();

  }

}

// 注释

function judgeWhoHow(person: Student | Teacher) {

  if ("teach" in person) {

    person.teach();

  } else {

    person.listen();

  }

}

// 注释

function add(first: string | number, second: string | number) {

  if (typeof first === 'string' || typeof second === 'string') {

    return `${first}${second}`;

  }

  return first + second;

}

// 注释

class NumberObj {

  count: number;

}

function addObj(first: object | NumberObj, second: object | NumberObj) {

  if (first instanceof NumberObj && second instanceof NumberObj) {

    return first.count + second.count;

  }

  return 0;

}

9.枚举类型

enum Status {

  ORANGE = 1,

  APPLE,

  WATERMELON

}

function getServe(status: any) {

  if (status === Status.ORANGE) {

    return 'orange';

  } else if (status === Status.APPLE) {

    return 'apple';

  } else {

    return 'watermelon';

  }

}

console.log(Status.MESSAGE); // 1 默认从0开始

console.log(Status[1]); // ORANGE

const result = getServe(2);

console.log(result) // APPLE

10.泛型

function join<T>(first: T, second: T) {

  return `${first}${second}`;

}

join<string | number>('1', 2);

// 注释

function func<T, P>(first: T, second: P) {

  return `${first}${second}`;

}

func<string, number>('1', 2);

// 泛型在数组中的使用

// 方案1

function myFun<T>(params: T[]) {

  return params;

}

myFun<string>(['1', '2']);

// 方案2

function fun<T>(params: Array<T>) {

  return params;

}

fun<string>(['1', '2']);

// 传数组

class SelectGirl {

  constructor(private girl: string[]) {}

  getGirl(index: number): string {

      return this.girl[index];

  }

}

const selectGirl = new SelectGirl(['李宁', '封生']);

selectGirl.getGirl(1);

// 用泛型重写

class SelectGirl<T> {

  constructor(private girls: T[]) {}

  getGirl(index: number): T {

      return this.girls[index];

  }

}

const selectGirl = new SelectGirl<string>(['李宁', '封生']);

selectGirl.getGirl(1);

// 传对象数组

interface Girl {

  name: string;

}

class SelectGirl<T extends Girl> {

  constructor(private girls: T[]) {}

  getGirl(index: number): string {

      return this.girls[index].name;

  }

}

const selectGirl = new SelectGirl([

  { name: '李宁' },

  { name: '封生' }

]);

selectGirl.getGirl(1);

// 注释

class SelectGirl<T extends string | number> {

  constructor(private girls: T[]) {}

  getGirl(index: number): T {

      return this.girls[index];

  }

}

const selectGirl = new SelectGirl<string>(['李宁', '封生']);

selectGirl.getGirl(1);

四、TypeScript的命名空间

namespace Home {

  class Header {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Header';

        document.body.appendChild(elem);

      }

  }

  class Content {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Content';

        document.body.appendChild(elem);

      }

  }

  class Footer {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Footer';

        document.body.appendChild(elem);

      }

  }

  export class Page {

      constructor() {

        new Header();

        new Content();

        new Footer();

      }

  }

}

const page = new Home.Page()

namespace Component {

  export class Header {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Header';

        document.body.appendChild(elem);

      }

  }

  export class Content {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Content';

        document.body.appendChild(elem);

      }

  }

  export class Footer {

      constructor() {

        const elem = document.createElement('div');

        elem.innerText = 'This is Footer';

        document.body.appendChild(elem);

      }

  }

}

namespace Home {

  export class Page {

      constructor() {

        new Component.Header();

        new Component.Content();

        new Component.Footer();

      }

  }

}

const page = new Home.Page()