TypeScript的入门_does not exist on type 'index-优快云博客

本文链接：https://blog.youkuaiyun.com/whose_moon/article/details/118466870

在入门TypeScript我们常有一下几个问题：

什么是TypeScript?

简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

TypeScript和JavaScript的特点是什么？

JavaScript

JavaScript 是一种轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行，能够实现浏览器端丰富的交互功能，为用户带来流畅多样的用户体验。

JavaScript 是基于对象和事件驱动的，无需特定的语言环境，只需在支持的浏览器上就能运行。

JavaScript 语言具有以下特点：

JavaScript 是一种脚本编写语言，无需编译，只要嵌入 HTML 代码中，就能由浏览器逐行加载解释执行。
JavaScript 是一种基于对象的语言，可以创建对象同时使用现有对象。但是 Javascript 并不支持其它面向对象语言所具有的继承和重载功能。
JavaScript 的语法简单，使用的变量为弱类型。
JavaScript 语言较为安全，仅在浏览器端执行，不会访问本地硬盘数据。
JavaScript 语言具有动态性。JavaScript 是事件驱动的，只根据用户的操作做出相应的反应处理。
JavaScript 只依赖于浏览器，与操作系统的因素无关。因此 JavaScript 是一种跨平台的语言。
JavaScript 兼容性较好，能够与其他技术（如 XML，REST API 等）一起使用。

TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。

TypeScript 具有以下特点：

TypeScript 是 Microsoft 推出的开源语言，使用 Apache 授权协议
TypeScript 增加了静态类型、类、模块、接口和类型注解
TypeScript 可用于开发大型的应用
TypeScript 易学易于理解

为什么会有静态类型/动态类型的概念？

程序都需要进行错误的检查。比如 3 / 0，这个程序会有错误，我们应该在什么时候进行检查呢？

在写程序时，只要编辑器里出现除以0，报错。
在编译时，如果检查到了除以0，报错。
在程序运行时，运行到了除以9，报错。
不报错，返回无穷大 (+inf.0)。

不同的语言设计上会选择在这4个过程中不同时候去报错。静态类型和动态类型的区别在于什么时候报类型的错误？，比如说 3 / "a“，静态类型多是在编译时，动态类型多是在程序运行时。怎么报类型的错误呢？语言里会有类型检查的机制，类型检查的目的是避免程序发生一些事情。

知道了这些问题的答案，现在我们开始学习下TypeScript的基础用法和注意事项吧（本人看文档提取出适合初学者的重要部分）~

类型

1. 原始类型

let isDone: boolean = false;
let decLiteral: number = 6;
let name: string = "bob";
let unusable: void = undefined;
let u: undefined = undefined;
let n: null = null;

*undefined 和 null 是所有类型的子类型

2. 任意类型

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

let something;
something = 'seven';
something = 7;
something.setName('Tom');

*变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

3. 类型推论

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

*声明变量没有明确的指定类型并且直接赋值时，TypeScript 会推测出一个类型，这就是类型推论

4. 联合类型

let myFavoriteNumber: string | number;
myFavoriteNumber = true;

function getLength(something: string | number): number {
    return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

*只能访问此联合类型的所有类型里共有的属性或方法

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

*联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型

对象的类型（接口）

1. 对「对象的形状（Shape）」进行描述

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

2. 类实现接口

一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。

interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

3. 继承

接口的继承

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;

接口继承类

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};

等价于

let point3d: Point3d = {x: 1, y: 2, z: 3};
class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

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

function printPoint(p: PointInstanceType) {
    console.log(p.x, p.y);
}

printPoint(new Point(1, 2));数组的类型数组的类型

数组的类型

1. 「类型 + 方括号」表示法

let fibonacci: number[] = [1, '1', 2, 3, 5];
// Type 'string' is not assignable to type 'number'

2. 数组泛型

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

3. 用接口表示数组（不推荐，就不展开说明了）

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

上例中，我们在函数名后添加了，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。

函数的类型

1. 函数声明

function sum(x: number, y: number): number {
    return x + y;
}

上例中，分别定义了参数的类型，和函数返回值的类型

2. 函数表达式

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

*平时可不写等号的左边的约束，自动靠类型推论得出

3. 用接口定义函数的形状

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

4. 剩余参数

function push(array: any[], ...items: any[]) {
   
    items.forEach(function(item) {
        array.push(item);
});
}

let a = [];
push(a, 1, 2, 3);

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

上例中，解决了访问 animal.swim （如果animal传入 cat）时报错的问题了

字符串字面量类型

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

上例中，'click’等字符串成为了具体的类型

元组

let tom: [string, number] = ['Tom', 25];

类

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。
• 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
• 对象（Object）：类的实例，通过 new 生成
• 面向对象（OOP）的三大特性：封装、继承、多态
• 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
• 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
• 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
• 存取器（getter & setter）：用以改变属性的读取和赋值行为
• 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
• 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

1. 属性和方法

class Animal {
    public name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

2. 类的继承

class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}

let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom

3. 存取器

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

4. 静态方法

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

5. public private 和 protected

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。
• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

6. 抽象类

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }

}

let cat = new Cat('Tom');