玩转 TypeScript：基础篇

CDEC - Jay

Agenda

浅析静态类型（检查）
TypeScript 前世今生
使用 TypeScript
玩转 TypeScript 类型

浅析静态类型（检查）

何为静态类型（检查）？

弱类型 VS. 强类型

静态类型检查 VS. 动态类型检查

个人理解： 静态类型检查就是在编译期间就能检查到具体的类型；弱类型则是偏向于容忍隐式类型转换

更多讨论，请参考：知乎讨论

静态类型检查的优势

类型检查，规避隐式类型转换、书写错误问题
代码自动完成（补全），提高开发效率
重构相对更容易
代码健壮性更好

静态类型检查的劣势

约束较多，不够灵活
需要额外的一些类型定义，影响开发效率
需要编译，有时候编译时间较长

JavaScript：动态、弱类型

大量的隐式转换
缺少类型检查，导致较容易出现拼写错误
灵活 VS. 健壮性
动态一时爽、重构火葬场（一直动态一直爽？）

有没有可能，为 JavaScript 插上类型的翅膀？

TypeScript 前世今生

缘起

ES6 以前，JavaScript 虽强大灵活但不够简洁
JavaScript 转译语言应运而生：CoffeeScript
随着前端的发展，JavaScript 应用越来越大，JavaScript 语言本身的短板日渐凸显
Google：Dart（因 Flutter 重获新生）
Facebook：Flow
Microsoft：TypeScript

今生

TypeScript 是一种由微软主导开发的开源编程语言
TypeScript 设计目标是开发大型应用
TypeScript 是 JavaScript 的严格超集（兼容 JavaScript）
TypeScript 是一种给 JavaScript 添加特性的语言扩展
TypeScript 已成为大型应用的主流选择

那，如何使用 TypeScript 呢？

使用 TypeScript

Playgroud

最便捷的演练 TypeScript 的地方莫过于：
TypeScript Playgroud

当然，这种方式更多用于学习语法。

TSC 命令编译

npm i typescript -g全局安装 TypeScript

或者 npm i typescript -D 本地安装

编写你的第一个 TypeScript 文件：hello.ts
tsc hello.ts 编译 ts 文件

Deno

Deno：https://github.com/denoland/deno

A secure JavaScript/TypeScript runtime built with V8, Rust, and Tokio

Tokio：The asynchronous run-time for the Rust programming language.

Deno Web Server

import { listenAndServe } from '../deno_std/net/http.ts';

function uint8array2string(uint8Array: Uint8Array): string {
  return new TextDecoder().decode(uint8Array);
}

function string2uint8array(text: string): Uint8Array {
  return new TextEncoder().encode(text);
}

async function main() {
  await listenAndServe('0.0.0.0:9999', req => {
    console.log(req.url, req.method, req.headers, req.proto);
    req.respond({
      status: 200,
      headers: new Headers({ ContentType: 'application/json' }),
      body: string2uint8array(JSON.stringify({ hello: 'deno!' }))
    });
  });
}

main();

With @babel/preset-typescript Or ts-loader

@babel/preset-typescript：https://babeljs.io/docs/en/babel-preset-typescript
ts-loader：https://github.com/TypeStrong/ts-loader
awesome-typescript-loader：https://github.com/s-panferov/awesome-typescript-loader

玩转 TypeScript 类型

JavaScript 基本数据类型？

undefined
null
boolean(Boolean)
number(Number)
string(String)
symbol(Symbol)

TypeScript 基本类型

All javaScript 基本数据类型
Array：Array
Tuple（元组）
enum（枚举）
void（null or undefined）
never（永不存在值）
any（万能，任意类型）

TypeScript 接口类型

通过 interface 定义复杂类型


  interface IPerson {
    age?: number; // 可选属性
    readonly name: string; // 只读属性
    [idx: number]: string; // 索引类型（模拟字典）
  }

  class Person implements IPerson {
    [idx: number]: string;
    age?: number;
    name: string;
  }

通过 interface 定义函数类型


  interface IFunc {
    (n1: number, n2: number): number;
  }

  const add: IFunc = function(n1, n2) {
    // 有了类型约束后，会自动进行类型推断
    return n1 + n2;
  };

通过 interface 定义混合类型


  interface IFunc2 {
    (n1: number, n2: number): number;
    displayName: string;
  }

  const add2: IFunc2 = function(n1, n2) {
    // 有了类型约束后，会自动进行类型推断
    return n1 + n2;
  };
  add2.displayName = 'add2'; // 如果没有这句，会怎样？

类类型：静态部分 VS. 实例部分


  interface PersonInterface {
    name: string;
    age?: number;
    sleep: (hour: number) => string;
  }

  interface PersonCtor {
    // 定义构造
    new (name: string, age?: number): PersonInterface;
  }

  class PersonIns implements PersonInterface {
    sleep: (hour: number) => string;
    name: string;
  }

  function createPerson(ctor: PersonCtor, name: string): PersonInterface {
    return new ctor(name);
  }

  createPerson(PersonIns, 'hi');

问答：如下代码是否可以通过类型校验？


  function fun1(a: { a: number }) {}

  fun1({ a: 1, b: 2 });

TypeScript 类类型

属性修饰符（作用域）
属性修饰符（只读、静态）
Getter and Setter
抽象类
类作为接口使用

Demo演示

TypeScript 高级类型

交叉类型（多个类型取并集）
联合类型（多个类型选其一）
类型别名
类型别名 VS. Interface