快速入门 TypeScript

快速入门 TypeScript

一、什么是 TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.Any browser. Any host. Any OS. Open source.

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上，且 TypeScript 是开源。

二、为什么要用 TypeScript？

• TypeScript 增加了代码的可读性和可维护性
• 在编译阶段就发现大部分错误，这总比在运行时候出错好。
• 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取
• TypeScript 拥抱了 ES6 规范。（ES6就是会抄东西）

三、安装 TypeScript

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。webpack 项目中翻译 ts 安装TypeScript-loader。
编译一个 TypeScript 文件很简单：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

主流的编辑器都支持 TypeScript，这里只推荐使用 Visual Studio Code。

四、Hello TypeScript

我们从 Hello TypeScript 这个例子开始，将以下代码复制到 hello.ts 中：

function main(str:string):void{
    console.log(str);
}
main("hello TypeScript!");

然后执行：

tsc hello.ts

这时候会生成一个编译好的文件 hello.js：

function main(str) {
    console.log(str);
}
main("hello TypeScript!");

node 运行Hello.js 文件输出结果：

node hello.js
hello TypeScript!

TypeScript 中，使用:指定变量的类型，:的前后有没有空格都可以。JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。下面尝试把这段代码编译一下：

function main(str:string):void{
    console.log(str);
}
main(["hello TypeScript!"]);

C:\Users\Administrator\Desktop>tsc hello.ts
hello.ts:4:6 - error TS2345: Argument of type 'string[]' is not assignable to pa
rameter of type 'string'.

4 main(["hello TypeScript!"]);
       ~~~~~~~~~~~~~~~~~~~~~

Found 1 error.

但是 TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。

五、基础语法

5.1 TS 是强类型语言

申明变量必须指定类型，指定完，在赋值过程中改变类型是不被允许的：

let a : number = 5;
let b : boolean = false;
let c : string = "我是字符串！";
// 声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
let d : void = null;
let e: undefined = undefined;
let f: null = null;
console.log(a,b,c,d,e,f);

var a = 5;
var b = false;
var c = "我是字符串！";
// 声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
var d = null;
var e = undefined;
var f = null;
console.log(a, b, c, d, e, f);

执行结果：

C:\Users\Administrator\Desktop>node hello.js
5 false '我是字符串！' null undefined null

任意值（Any）用来表示允许赋值为任意类型。就相当于不指定类型：

let ar: any;//=let a;

只从语法上来看完全可以把 TS看做是一个大型 ESLINT。

联合类型：

let a: string | number;

这里的 let a: string | number 的含义是，允许 a 的类型是 string 或者 number，但是不能是其他类型。
除了以上 ES5 的基本类型，ES6 新增了一个 symbol 类型。原始数据类型 Symbol，表示独一无二的值。原来 ES5 的对象属性名都是字符串，这容易造成属性名的冲突。现在对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。注意，Symbol 函数前不能使用 new 命令，因为生成的 Symbol 是一个原始类型的值，不是对象。

let s = Symbol();
let s1 = Symbol('foo');
let s2 = Symbol('bar');
s1 // Symbol(foo)
s2 // Symbol(bar)

有了参数以后，就等于为它们加上了描述，输出的时候就能够分清，到底是哪一个值。
作为属性名的 symbol。

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

5.2 对象的类型——接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。赋值的时候，变量的形状必须和接口的形状保持一致

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

let a:Person = {
    name : "hero",
    age : 19
}
console.log(a);

tsc 翻译后：

var a = {
    name: "hero",
    age: 19
};
console.log(a);

node 运行成功：

C:\Users\Administrator\Desktop>node hello.js
{ name: 'hero', age: 19 }

上面定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的。

可选属性 ：有时我们希望不要完全匹配一个形状，那么可以用可选属性

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

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

使用 [propName: string] 定义了任意属性取 string 类型的值。

只读属性：被定义后就不能改变。

interface Person {
    readonly id: number;
}
let a: Person = {
    id: 10
};

不允许：a.id++

5.3 数组的类型

最简单的方法是使用「类型 + 方括号」来表示数组(数组的项中不允许出现其他的类型：)：

let arr: number[] = [1, 1, 2, 3, 5];

数组泛型：
使用数组泛型（Array Generic） Array 来表示数组：

let arr: Array = [1, 1, 2, 3, 5];

元组（Tuple）：高级版的数组，精确定义每一项是什么类型的数组。

const f: [string, number, string] = ['小明', 12, '男'];

5.4 函数的类型

有返回值时，例如返回值为 number：

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

函数没有返回值时：

function sum(x: number, y: number): void {
    console.log(x + y)
}

5.5 枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
枚举使用 enum 关键字来定义：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
;
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

也可以打点调用：

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
let a:Days = Days.Sun;
console.log(a); //7

手动赋值：

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

上面的例子中，未手动赋值的枚举项会接着上一个枚举项递增。Tue = 2，Wed = 3。

5.6 类

传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。

类的概念：

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

一个简单的案例：

class Person {
    name: string;
    age : number;
    constructor(name) {
        this.name = name;
    }
    sayHello(): string {
      return `My name is ${this.name}`;
    }
}

let a : Person = new Person('Jack');
console.log(a.sayHello()); // My name is Jack

翻译完成之后：

var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHello = function () {
        return "My name is " + this.name;
    };
    return Person;
}());
var a = new Person('Jack');
console.log(a.sayHello()); // My name is Jack

static定义类访问的属性和方法。

class Person {
    static c : string = "静态属性";
    constructor() {

    }
    static sayBai():string{
        return "我要和你说拜拜了！";
    }
}
console.log(Person.c);//静态属性
console.log(Person.sayBai());//我要和你说拜拜了

//====tsc 翻译
var Person = /** @class */ (function () {
    function Person() {
    }
    Person.sayBai = function () {
        return "我要和你说拜拜了！";
    };
    Person.c = "静态属性";
    return Person;
}());
console.log(Person.c);
console.log(Person.sayBai());

public private 和 protected

名称	作用
public	表示谁都可以改
private	表示只有自己能够改
protected	表示只有自己和自己的子类可以改（不常用）

class Person {
    public  name: string;
    private age : number;
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    sayHello(): string {
      return `My name is ${this.name},my age is ${this.age}`;
    }
    changeAge(){
        return this.age+=1;
    }
}

let xiaoming : Person = new Person("Condor Hero",18);
console.log(xiaoming.sayHello());
// 可以直接修改姓名
console.log(xiaoming.name = "改名字");
// private 修饰的age不允许外部使用只能内部修改
// console.log(xiaoming.age++);
// >>>>>>>>>>>>>>报错如下三行<<<<<<<<<<<<
// hello.ts:21:22 - error TS2341: Property 'age' is private and only accessible wit
// hin class 'Person'.
// 21 console.log(xiaoming.age++);
// >>>>>>>>>>>>>>报错如上三行<<<<<<<<<<<<
// 调用内部方法修改private 修饰的age
console.log(xiaoming.changeAge());