日常项目开发使用typescript

一、前言

本文基于开源项目：

https://github.com/microsoft/TypeScript

https://www.typescriptlang.org/docs/

前阵子有小伙伴跟广东靓仔说自己在日常项目开发过程中有使用typescript，不过仅仅只是使用了基础的类型声明，有些时候项目时间赶甚至写了很多any。    

这里广东靓仔整理了一些日常项目开发使用typescript的小技巧，希望对小伙伴有所帮助。

二、TS基础知识

   Typescript的基础知识我们要牢牢掌握，有一句老话，楼房建得高不高，地基很重要。

  Typescript的基础类型基本都是小写字母开头的（除了Array），很多小伙伴忽略了这点。相信有小伙伴有使用过Number ，TS指导建议我们不要这样使用。我们都知道在JavaScript代码中几乎从不使用的非原始装箱对象。

/* WRONG */ 
function reverse(s: String): String; 
请使用类型数字，字符串和布尔值。
/* OK */ 
function reverse(s: string): string; 
/* OK */ 
let decLiteral: number = 6;

基础类型：

1、boolean

2、number

3、string

4、[]、Array<>

// 在元素类型后面接上[]，表示由此类型元素组成的一个数组
let list: number[] = [1, 2, 3];
// 数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3];

5、Tuple

// 声明一个元组
let x: [string, number];
// 正确的初始化
x = ['广东', 10]; // OK
// 错误的初始化
x = [10, '靓仔']; // Error

6、enum

const enum Directions {
  Up,
  Down,
  Left,
  Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]

7、any ---- 尽量不使用

8、void

9、undefined和null

10、never

function error(message: string): never {
    throw new Error(message);
}

11、类型断言：<>、as

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构

温馨提示我们定义变量的时候，尽量使用let

三、tsconfig.json 字段说明

tsconfig.json 所包含的属性并不多，只有 7 个。  

tsconfig可以到http://json.schemastore.org/tsconfig查看，下面我们重点讲讲字段。

files: 数组类型，用于表示由 ts 管理的文件的具体文件路径

exclude: 数组类型，用于表示 ts 排除的文件（2.0 以上支持 Glob）

include: 数组类型，用于表示 ts 管理的文件（2.0 以上）

compileOnSave: 布尔类型，用于 IDE 保存时是否生成编译后的文件

extends: 字符串类型，用于继承 ts 配置，2.1 版本后支持

compilerOptions: 对象类型，设置编译的选项，不设置则使用默认配置，配置项比较多，后面再列

typeAcquisition: 对象类型，设置自动引入库类型定义文件(.d.ts)相关，该对象下面有 3 个子属性分别是：

   enable: 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认 false

   include: 数组类型，允许自动引入的库名，如：["jquery", "lodash"]

   exculde: 数组类型，排除的库名

如不设定 files 和 include，ts 默认是 exclude 以外的所有的以.ts 和.tsx 结尾的文件。如果，同时设置 files 的优先级最高，exclude 次之，include 最低。

上面都是文件相关的，编译相关的都是靠 compilerOptions 设置的，接着就来看一看。

............

............一般情况下，tsconfig.json 文件只需配置 compilerOptions 部分。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, // 允许引入没有默认导出的模块
    "module": "es2015",
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015"
    ]
  }
}

allowSyntheticDefaultImports 是使用 vue 必须的，而设置 module 则是让模块交由 webpack 处理，从而可以使用 webpack2 的摇树。另外，加上allowJs，这样就可以一点点将现有的 js 代码转换为 ts 代码了。

如果，在 webpack 中设置过 resolve -> alias，那么，在 ts config 中也需要通过 baseUrl + path 的方式来定义模块查找的方式。

<a name="tslint"></a>

四、ts使用小技巧

1.注释

我们平时开发过程可以通过 /** */ 形式的注释可以给 TS 类型做标记提示，这样子编辑器会有更好的提示。

/** This is a cool guy. */
interface Person {
  /** This is name. */
  name: string,
}
const p: Person = {
    name: 'cool'
}

当我们鼠标移动到person会有tooltip，一眼就看出来是什么了。

2.接口继承

和类一样，接口也是可以相互继承。让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface Shape {
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

3interface & type

TypeScript 定义类型的两种方式：接口（interface）和 类型别名（type alias）。

比如下面的 Interface 和 Type alias 的例子中，除了语法，意思是一样的：

Interface

interface Place {
  x: number;
  y: number;
}
interface SetPlace {
  (x: number, y: number): void;
}

Type alias

type Place = {
  x: number;
  y: number;
};
type SetPlace = (x: number, y: number) => void;

而且两者都可以扩展，但是语法有所不同。此外，请注意，接口和类型别名不是互斥的。接口可以扩展类型别名，反之亦然。

4. typeof

typeof可以获取一个对象/实例的类型

typeof 只能用在具体的对象上，这与 js 中的 typeof 是一致的，并且它会根据左侧值自动决定应该执行哪种行为。

interface Opt {
  timeout: number
}
const defaultOption: Opt = {
  timeout: 500
}

有时候可以反过来：

const defaultOption = {
  timeout: 500
}
type Opt = typeof defaultOption

5. 运算符

非空断言运算符 !

这个运算符可以用在变量名或者函数名之后，用来强调对应的元素是非 null|undefined 的。

function onClick(callback?: () => void) {
  callback!();  // 参数是可选入参，加了这个感叹号!之后，TS编译不报错
}

   这个符号的场景，特别适用于我们已经明确知道不会返回空值的场景，从而减少冗余的代码判断，如 React 的 Ref。

function Demo(): JSX.Elememt {
  const divRef = useRef<HTMLDivElement>();
  useEffect(() => {
    divRef.current!.scrollIntoView(); 
    // 当组件Mount后才会触发useEffect，故current一定是有值的
  }, []);
  return <div ref={divRef}>Demo</div>
}

可选链运算符 ?.

?.这个是开发者最需要的运行时(当然编译时也有效)的非空判断。

obj?.prop
obj?.[index]
func?.(args)

?.用来判断左侧的表达式是否是 null | undefined，如果是则会停止表达式运行，可以减少我们大量的&&运算。

比如我们写出a?.b时，编译器会自动生成如下代码

a === null || a === void 0
 ?
  void 0
 :
  a.b;

这里涉及到一个小知识点:undefined这个值在非严格模式下会被重新赋值，使用void 0必定返回真正的 undefined。

空值合并运算符 ??

??与||的功能是相似的，区别在于??在左侧表达式结果为 null 或者 undefined 时，才会返回右侧表达式。

比如我们书写了let b = a ?? 10，生成的代码如下：

let b = a !== null && a !== void 0
 ?
  a
 :
  10;

而 || 表达式，大家知道的，则对 false、''、NaN、0 等逻辑空值也会生效，不适于我们做对参数的合并。

数字分隔符_

let num:number = 1_2_345.6_78_9

_可以用来对长数字做任意的分隔，主要设计是为了便于数字的阅读，编译出来的代码是没有下划线的。

五、总结

   typescript我们可以在Vue中引入，广东靓仔之前写过Vue+ts+vuex的相关文章，我们可以使用vue 支持 jsx，进而使用render jsx。当然我们也可以在React中引入typescript。    总体来说ts其实对于规模较大的前端团队来说，还是很有必要的。