typescript 使用问题记录

[toxic-johann]

使用 paths

在 tsc 中使用十分简单，在 tsconfig.json 中的 compileOptions 上添加 paths 即可。

{
  "compileOnSave": true,
  "compilerOptions": {
    "paths": {
      "@my-types/*": [ "@my-types/*" ]
    }
  },
}

但是 webpack 下不认这个，所以这个时候引入 tsconfig-paths-webpack-plugin 到 webpack resolve 中。

操作配置按照文档操作

这时候编译会成功吗，但 tslint 可能会报 warning 如下图。

这个是由 no-implicit-dependencies 引起的。

如果没啥必要的话，关掉这个规则。

引入自定义 .d.ts

给第三方插件写 .d.ts。写了几个，想统一放在一个自定义的 types 中引入，但是查阅资料发现。

typeRoots are only used to resolve /// directives. if you want to import it, then just use baseUrl or add a path mapping entry. you do not need typeRoots in this case.

换言之， typeroots 没有卵用，自己引入 .d.ts 吧

尝试使用 import 引入会报以下错误，应该是触发了 ts-loader 的一个 bug

引入方式如下：

import '@my-types/link-hijacker.d';
import { hyjack } from '@mapbox/link-hijacker';

使用如下方式可以引入不出错，但看起来很恶心。

/// <reference path='../../@my-types/link-hijacker.d.ts' />
import { hyjack } from '@mapbox/link-hijacker';

解决方法如下：

在 tsconfig.json 中直接用 files 引入所需要的 .d.ts

{
  "files": [
    "@my-types/link-hijacker.d.ts"
  ]
}

vscode 神烦的 "experimentalDecorators"

日常性被提醒 "experimentalDecorators" 错误。

很多人都会搜索到要在 tsconfig.json 上添加如下描述：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

但是发现每个项目都加了都没用，但是各种开发者都无法复现。

那是因为这个东西需要添加在 vscode 打开的目录的最外层才有作用。

例如你打开的 workspace ，里面有很多项目。请现在 workspace 上添加 tsconfig.json，输入以上语句。问题解决。

eslintignore 不生效

因为我们用了 ts 所以希望 eslint 不要再审查我们的 js。但是在 vscode 上添加 eslintignore 被忽略了。

和 tsconfig.json 一样也要在最外层目录添加一个 .eslintignore

typescirpt narrow down 的方法

https://medium.com/@OlegVaraksin/narrow-interfaces-in-typescript-5dadbce7b463

将一个 union type 的数据变化为单个

创造一个 string 不能赋值的 string

export type graphNodeId = string & { isGraphNodeId: boolean };

这样子帮助我们可以勒令其他开发者必须进行一次转型。

我们创造出的这个 graphNodeId, 他本质还是 string，但是如果有地方要求 graphNodeId，你不能普通的使用 string 插入。