TypeScript的介绍

1.ts是由微软开发的开源变成语言（vscode和ts都是微软提供的，vs里面很多ts的适配，里面有很多ts的插件，让写法更佳舒适）

2.ts是js的超集（超集的理解：ts在js之上，包含js所有最新的语法特性，包含es6、es7所对应的写法）

【 es 3一个版本，es5一个版本 ，es 6一个版本，es2017,2018,2019都是es7版本】

3.ts是开发大型应用的基石(为什么要学ts？很多大型项目都是基于ts来开发的，比如angular，vscode，vue 3.0，react;越来越多的特性都偏向ts，大型应用基本都用ts语法做支持）

4.ts提供了更丰富的语法提示

5.ts在编译阶段能检查语法错误

安装

1.先去官网安装node

2.npm i typescript

错误检查&ts的编译

编译：

（为什么需要编译？因为浏览器无法识别ts，所以需要将ts编译成js）

var a:string='123';
console.log(a);

 执行tsc index.ts，将index.ts文件编译为index.js文件。

 创建配置文件：tsc --init    ， 配置完rootDir和outDir后，直接输入tsc编译

错误检查：

 但是这段代码在js中却可以正确运行

js是动态类型，可以动态更改变量的类型

var a = '123';
a=123;
console.log(a);

ts是静态类型的（一旦定义完类型后就无法更改它的类型）：

ts中的数据类型&&ts新增的语法特性

数据类型

js：基本类型：boolean 、string、number、null、undefined、symbol

      引用类型：object

ts：数据类型：

  1.  number 
    let num: number = 6;
  2. string 
    let str: string = '123';
  3. boolean 
    let flag: boolean = false;
  4. any 
    let obj:{ // 对象类型的注解
    str: string,
    toString: () => void
} = {
    str: '124',
    toString: function () {

    }
}
console.log(obj);

// 或这样写1
// interface Obj {
//    str: string;
//    toString: () => void
// }
// let obj: Obj = {
//     str: '123',
//     toString:function () {

//     }
// }

// 或这样写2
// type Obj = {
//    str: string;
//    toString: () => void
// }
// let obj: Obj = {
//     str: '123',
//     toString:function () {

//     }
// }

    let obj:any = {
    str: '124',
    toString: function () {

    }
}
console.log(obj);

     

     表示任意数据类型。

    1）如果是对象的话，any不能提示原有的属性和方法 

    2）如果是不同变量的话，可以是任意的数据类型

    3）未给初始值的变量类型为any （比如let a; 这里的a就是any类型,所以可以a='123'; a=123;不会报错）

  5. undefined ， 
    let num: number = undefined;
    配置项中--strictNullChecks会严格检查null和undefined类型，赋值会赋不成功                      （想赋的话把此参数改成true，但是官网不建议这么赋值，想这样赋的话就用联合项）                                                       推荐写法： 
    let num: number | undefined = undefined;
                                                                     
  6. null  ，null和undefined是所有类型的子类型。
  7. never，表示永不存在值的类型。当报错或死循环的时候用它。 
    function error(message) {
    throw new Error(message);
}
function fail() {
    return error('something failed');
}
function infiniteLoop() {
    while (true) {
    }
}
  8. void  ：表示没有类型，用在函数没有返回值的时候。 
    function test(): void {
    console.log(1111);
}
  9. 枚举
  10. 数组 ： 
    // 数组的注解；有3种表示方法
// 1.类型[]
let arr1: number[] = [1, 2, 3];

// 2.Array<类型> Array<number>
let arr2: Array<number> = [1, 2, 3];

// 3.interface
interface NumberArray {
  [index: number]: number;
}
let list: NumberArray = [1, 2, 3, 4];


// 类数组
function test() {
  let args: IArguments = arguments;
}

  11. 元祖

  Object：非原始类型。

// 全局声明一个函数，规定这个函数的参数是对象或null，没有返回值
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create([]); // OK
create(function(){}); // OK
create({}); // OK
// 由此看出，这里的object就是非原始类型

      进一步的区分：interface、number[]、string[]、boolean[]

      数组中泛型的写法：Array<number>、Array<string>、Array<boolean>

      函数注解：

let test=function(a:number,b:number):number{
    return a+b;
}

类型注解

开发者自己定义的ts变量类型就是类型注解

类型推断

当我们没有指定类型的时候，ts会自动帮我们分析当前的变量类型。

（当类型推断能推断出正确的类型时，就不用类型注解，比如函数这种情况下

function add(a, b) {
  return a + b;
}
add(1, 2);

）

联合类型

注意：

1.联合类型的公有属性是不会报错的；比如toString()，number和string类型都有这个方法就不会报错。

2.在赋值的时候就已经确定了数据的类型。不能更改类型了。

 

接口

对对象的形状进行描述；

对类的一部分的行为的抽象；

interface Person {
  name: string;
  age: number;
}
let person: Person = {
  name: "lily",
  age: 18,
};

【interface定死了以后，它的属性不可多，也不可少

 

】

如果想要多或少属性怎么办呢？

可少；可以用可选属性?:

可多；用任意属性[propName:string]:any

 

如果遇到id这种唯一不可变的属性，可以用readonly属性

 改造：

ReadonlyArray<T>类型

let ro: ReadonlyArray<number> = [1,2,3,4];

readonly 还是 const？

当做变量用const，当做属性用readonly(主要判断属性是否可写）

函数类型接口

(之前是按这样的方式来注解函数，有1个问题：在注解函数的同时实现了这个函数，如果我只想要定义这个函数类型，没办法定义)

function mySearch1(source: string, subString: string): boolean {
  let result = source.search(subString);
  return result > -1;
}

函数表达式的方式太冗长

let mySearch: (source: string, subString: string) => boolean = function (
  source: string,
  subString: string
): boolean {
  let result = source.search(subString);
  return result > -1;
};

我们希望抽象出来一个参数是source和subString，返回值是boolean的函数类型

第一种（不常见）：

type SearchFunc = (source: string, subString: string) => boolean;
let mySearch: SearchFunc = (source: string, subString: string): boolean => {
  let result = source.search(subString);
  return result > -1;
};

第二种（常见）：

interface SearchFunc {
    (source: string, subString: string): boolean;
  }
let mySearch: SearchFunc = (source: string, subString: string): boolean => {
  let result = source.search(subString);
  return result > -1;
};

 可索引类型接口（就是数组类型接口）

当索引是number时候，就可以描述一个数组：

interface numberArr {
  [index: number]: number;
}
let test: numberArr = {
  0: 1,
  1: 2,
};
let arr: numberArr = [1, 2, 3];

 注意：索引签名支持2种形式：字符串和数字。因为所有的number最终会转为字符串，当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。

 官网例子：

（1）为什么第一个索引签名是number会报错？ 因为Animal父类的name是string类型

（2）那如果把第一个改成string又为什么会报错？因为两者重复。

（3）如果把第二个索引签名改成number类型为什么不报错？因为所有number最后都被会js转成string类型。

（4）如果number都会被转为string，那么回到第一个问题，为什么不能给第一个索引签名设置为number？因为string类型范围比number范围大，Animal是父类， 父类必须比子类范围要大，所以第一个必须是string，第二个必须是number

索引签名有点类似老大的意思，索引签名是个大范围，接口里面的属性必须得在这个范围内。

interface NumberDictionary {
  [index: string]: number | string;
  length: number; 
  name: string; 
}

索引签名也可以设置为只读：

类 类型接口

可以用接口来描述类吗？不完全可以，因为类有构造器。

“对类的一部分的行为的抽象”的理解：

把类上 抽象的公共属性和方法，抽成一个接口。

想要解决这个报错问题，可以改配置项"noImplicitAny": false

interface Alarm {
  alert(): void;
}
interface Light {
  color: string;
  lightOn(): void;
  lightOff(): void;
}
class Door {}
class SecurityDoor extends Door implements Alarm {
  alert() {
    console.log("hi");
  }
}
class Car implements Alarm, Light {
  color = "red";
  lightOn() {}
  lightOff() {}
  alert() {}
}

类和接口对比：

（1）抽象类中定义抽象方法要实现；
         接口中定义的属性方法都要实现；

（2）抽象类中的方法属性可以通过继承方式来拿到；
         接口的抽象方法需要实现；实现接口的话，接口所有方法都要实现；

（3）1个类可以实现多个接口；多个子类可以继承1个抽象的类

 用类 分别实现类的静态部分与实例部分

（类的静态部分和实例部分需要单独写）

想通过接口直接实现类的构造函数是会报错的，因为constructor存在于类的静态部分，所以不在检查的范围内。

但是也有办法：

单独抽离1个构造函数的interface，用函数检查的方式单独检查函数的interface，然后返回一个new的实例

interface ClockInterface {
  currentTime: Date;
  getTime(h: number, m: number): void;
}
interface ClockConstructor {
  new (h: number, m: number): any;
  getTime1():void; // 相当于一个静态方法
}

class Clock implements ClockInterface {
  currentTime = new Date();
  getTime() {}
  constructor(h: number, m: number) {}
  static getTime1() { }
}
function createClock(Clock: ClockConstructor, h: number, m: number) {
  return new Clock(h, m);
}
let clock = createClock(Clock, 12, 12);

继承接口

就是接口可以继承接口 或 类可以实现接口。

“接口可以继承接口”的理解：

接口是对象形状的描述，接口继承接口就相当于在原本基础上进行进一步的约束。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};  // 这里接口继承接口，然后用断言的方式赋初始值
square.color = "blue";
square.sideLength = 10;

官方这里没有解释为什么这里要用类型断言：

如果let square:Square;这样写，报错提示：“在赋值前就使用了变量”；定义了square，但是没有初始值，但是一旦给初始值，就回去检查它类型，就会类型不符，所以用类型推断方式。

接口的混合类型

函数类型的interface，可以通过添加属性的方式来实现对象的interface

相当于函数类型interface+对象类型interface

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

接口继承类

1.类可以实现接口:类可以抽象一部分功能，让接口实现

2.接口可以继承接口：接口相当于一个对象，继承一个对象，就是能在这个对象上面添加更对属性

3.接口可以继承类：类也是接口，接口可以继承接口，所以接口能继承类。

报错：

1.image重复，改成image1。

2.提示错误实现接口SelectableControl，因为接口继承Control接口：在Image里定义state，但是因为是私有成员，所以没法直接实现state。

 接口和类的关系：

// 2种写法效果是一样的
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

interface PointerInterface {
  x: number;
  y: number;
}

interface Point3D extends Point {
  z: number;
}

interface Point3D extends PointerInterface {
  z: number;
}

虽然这种写法方式没有问题，但容易引起大家歧义，不建议大家用接口继承类。

 函数

函数有2种写法：函数声明和函数表达式。

函数声明的注解方式：

function test(a: number, b: number): number {
  return a + b;
}

函数表达式的注解方式：

let test1: (a: number, b: number) => number = (a, b) => {
  return a + b;
};

let test2: (a: number, b: number) => {} = (a, b) => {
  return { a, b };
};
console.log(test2(1, 2));

当参数少了的时候同interface可以设置可选参数

【可选参数注意事项】

(1)默认把可选参数放在后面，必选参数不能位于可选参数后。

function test(a: string, b?: string): string {
  return "" + a + b;
}
console.log(test("1", "2"));

(2)默认值和可选参数不能放一起。

当参数多了可以用剩余参数 ,...args，...args是个数组，必须放到最后面

 

// 语法
function test1(
  { first, second }: { first: number; second: number } = { first: 1, second: 2 }
) {
  return first + second;
}
function test2({ first = 2 }: { first: number }) {
  return first;
}


// 解构赋值
// 变量和属性名一致时，对象可简写
// let {a:a,b:b,c:c}={a:1,b:2,c:3};
// 等价于
// let {a,b,c}={a:1,b:2,c:3};
// 不完全结构是值（右边）多了；结构失败是变量（左边）多了

关于this

this有4个规则：

（1）默认情况下this指向window。（函数的独立调用、立即执行函数、闭包中的this都指向window）

（2）隐式绑定，谁调用就指向谁。

（3）显示绑定，call、apply、bind绑定this指向

（4）new的this指向实例化后的对象

官网例子

报错的this指向window，我们希望这里的this指向deck。

就可以这么写

noImplicitThis配置项

 控制当源文件中存在this的值是any的时候是否报错，noImplicitThis默认为false，即当源文件中存在this为any的情况也不报错，如果设置为true则会报错

函数的重载

ts的重载解决的只是表意问题，能够表意更清楚

function reverse(x: string): string;
function reverse(x: number): number;
function reverse(x: number | string) {
  if (typeof x === "string") {
    return x.split("").reverse().join("");
  } else {
    return Number(x.toString().split("").reverse().join(""));
  }
}
console.log(reverse(123));

编译后

类

类的注解方式

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

继承

继承中的super在constructor内部默认是构造函数；在这以外super指的是父类。

class Animal {
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}
let sam = new Snake("Sammy the Python");
sam.move();

类成员的修饰符

public:

（1）自身调用：

（2）子类调用：

（3）实例调用：

 private：

（1）只能自身调用

protected：（控制可访问否，上面都是）

（1）自身可以调用（2）子类可以调用

readonly：（控制可写否）

顺序：public readonly

不能修饰成员方法

参数属性

参数属性可以方便地让我们在一个地方定义并初始化一个成员。

class Octopus1 { // 简写
  constructor(private theName: string) {}
}

class Octopus2 {
  private theName: string;
  constructor(theName: string) {
    this.theName = theName;
  }
}

存取器（改变赋值和读取的行为）

1.成对出现，定义了getter一定也有setter，并且修饰同一属性

2.这里的赋值操作相当于调用了set方法，判断里用到了fullName属性，相当于调用了get方法。

静态属性

静态属性用static来定义，通过类/构造函数来访问。如果是实例属性用this.来访问的。

抽象类

abstract关键字来定义抽象类，抽象类能够作为其它派生类的基类使用。

特点：（1）无法创建实例

           （2）抽象类中的抽象方法一定要实现

abstract class Animal {
  abstract makeSound(): void; // 发声方式
  move(): void {
    console.log("roaming the earch...");
  }
}
class Snack extends Animal {
  makeSound() {
    console.log("zzzzzzzz");
  }
  move(): void {
    console.log("roaming the earch...");
  }
}
class Cow extends Animal {
  makeSound() {
    console.log("mmmmmmmmmm");
  }
  move(): void {
    console.log("roaming the earch...");
  }
}

高阶技巧

1.定义了一个类的时候，相当于定义了一个类型/构造函数

2.接口可以继承

# typescript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue