TypeScript 泛型: 获取 key 对应的类型

作者: Shine
时间: 2022-02-07
分类: TypeScript
2 条评论

TypeScript 高级用法 -- Record

作者: Shine
时间: 2022-02-07
分类: TypeScript
评论

这里仅作为个人记录?  不做详细解析

我对 TS 不是特别了解，所以无法表达出，但是这种情况很多人应该会遇到过

相关资料参考：
- https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype
- https://juejin.cn/post/6844904066489778183
- https://www.jianshu.com/p/ff5ee22b2053

### 会报出警告的代码:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Student'.   No index signature with a parameter of type 'string' was found on type 'Student'.

> TS7053：元素隐式具有“any”类型，因为“字符串”类型的表达式不能用于索引“Student”类型。 在Student学生”类型上找不到具有“string”类型参数的索引签名。

```ts
export interface IStudentClass {
  student?: Student

updatedStudentInfo(key: string, val: string): void
}

export type Student = {
  name: string
  age: number
  birth: {
    year: number
    month: number
  }
}

class StudentClass implements IStudentClass {
  student?: Student

updatedStudentInfo(key: string, val: string) {
    this.student && this.student[key] && (this.student[key] = val)
  }
}
```

![TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Student'.   No index signature with a parameter of type 'string' was found on type 'Student'.](https://cdn.nowtime.cc/2022/02/07/1024976837.png)

---

### 使用 `Record` :

一切正常

```ts
export type Student = {
  name: string
  age: number
  birth: {
    year: number
    month: number
  }
}

export interface IStudentClass {
 student?: Record<keyof Student, any>

/**
 * 更新学生信息
 * @param key
 * @param val
 */
 updatedStudentInfo<K extends keyof Student>(key: K, val: Student[K]): void
}

class StudentClass implements IStudentClass {
 student?: Record<keyof Student, any>

updatedStudentInfo<K extends keyof Student>(key: K, val: Student[K]): void {
 this.student && this.student.hasOwnProperty(key) && (this.student[key] = val)
 }
}
```

![](https://cdn.nowtime.cc/2022/02/07/1776462821.png)

robots.txt 的完整语法

作者: Shine
时间: 2019-04-19
分类: WEB开发
评论

> 您可[在此处找到 robots.txt 的完整语法][1]。robots.txt 语法的某些部分比较棘手，需要重点学习，因此请一定仔细阅读整个文档。

# 实用的 robots.txt 规则
> 下面是一些常见的实用 robots.txt 规则：

<table class="nice-table">
 <tbody>
 <tr>
 <th class="wide">规则</th>
 <th class="wide" style="width:50%">示例</th>
 </tr>
 <tr>
 <td class="tab0">禁止抓取整个网站。 请注意，在某些情况下，Google 即使未抓取网站的网址，仍可能会将其编入索引。注意：这不适用于各种 AdsBot 抓取工具，此类抓取工具必须明确指定。</td>
 <td class="tab0">
 <pre>User-agent: *
Disallow: /
</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">禁止抓取某一目录及其内容（在目录名后面添加一道正斜线）。请注意，若想禁止访问私密内容，则不应使用 robots.txt，而应改用适当的身份验证机制。对于 robots.txt 文件所禁止抓取的网址，Google 仍可能会在不进行抓取的情况下将其编入索引；另外，由于 robots.txt 文件可供任何人随意查看，因此可能会泄露您的私密内容的位置。</td>
 <td class="tab0">
 <pre>User-agent: *
Disallow: /calendar/
Disallow: /junk/
</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">仅允许使用某一抓取工具</td>
 <td class="tab0">
 <pre>User-agent: Googlebot-news
Allow: /

User-agent: *
Disallow: /
</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">允许使用除某一抓取工具以外的其他所有抓取工具</td>
 <td class="tab0">
 <pre>User-agent: Unnecessarybot
Disallow: /

User-agent: *
Allow: /

</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">
 禁止抓取某一网页（在正斜线后面列出网页）：
 </td>
 <td class="tab0">
 <pre>Disallow: /private_file.html</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">
 禁止 Google 图片访问某一特定图片：
 </td>
 <td class="tab0">
 <pre>User-agent: Googlebot-Image
Disallow: /images/dogs.jpg</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">
 禁止 Google 图片访问您网站上的所有图片：
 </td>
 <td class="tab0">
 <pre>User-agent: Googlebot-Image
Disallow: /</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">
 禁止抓取某一特定类型的文件（例如 <code>.gif</code>）：
 </td>
 <td class="tab0">
 <pre>User-agent: Googlebot
Disallow: /*.gif$</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">
 禁止抓取整个网站，但允许在这些网页上显示 AdSense 广告（禁止使用除 Mediapartners-Google 以外的所有网页抓取工具）。这种方法会阻止您的网页显示在搜索结果中，但 Mediapartners-Google 网页抓取工具仍能分析这些网页，以确定要向您网站上的访问者显示哪些广告。
 </td>
 <td class="tab0">
 <pre>User-agent: *
Disallow: /

User-agent: Mediapartners-Google
Allow: /</pre>
 </td>
 </tr>
 <tr>
 <td class="tab0">匹配以某一特定字符串结尾的网址 - 需使用美元符号 (<code>$</code>)。例如，示例代码会禁止访问以 <code>.xls</code> 结尾的所有网址：</td>
 <td class="tab0">
 <pre>User-agent: Googlebot
Disallow: /*.xls$
</pre>
 </td>
 </tr>
 </tbody>
</table>

> 转载自：https://support.google.com/webmasters/answer/6062596?hl=zh-Hans&ref_topic=6061961

[1]: https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt

色值的透明度与十六进制(HEX)代码转换

作者: Shine
时间: 2018-04-28
分类: WEB开发
评论

解析：`#ff6699ff`（`#FF6699FF`也是一样的，不区分大小写）

#ff6699ff 由 # 加八位数字或字母组成，前两个 ff 为透明度（十六进制），后面六位 ffffff 为颜色代码，采用 RGB 配色（十六进制）

HTML 在线取色器： HTML 拾色器

此网站用的源代码来自 GitHub：evol.colorpicker

源代码下载：evol.colorpicker

透明度参照表

- 阅读剩余部分 -

Chrome,开发者工具的小技巧

作者: Shine
时间: 2017-06-09
分类: WEB开发,编程工具
评论

简介：

Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

代码格式化：

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 `{ }` 标签，chrome会帮你给格式化掉。

- 阅读剩余部分 -

分类 WEB开发下的文章

TypeScript 泛型: 获取 key 对应的类型

TypeScript 高级用法 -- Record

robots.txt 的完整语法

色值的透明度与十六进制(HEX)代码转换

解析：`#ff6699ff`（`#FF6699FF`也是一样的，不区分大小写）

`#ff6699ff` 由 `#` 加八位数字或字母组成，前两个 `ff` 为透明度（十六进制），后面六位 `ffffff` 为颜色代码，采用 RGB 配色（十六进制）

HTML 在线取色器： HTML 拾色器

此网站用的源代码来自 GitHub：evol.colorpicker

源代码下载：evol.colorpicker

透明度参照表

Chrome,开发者工具的小技巧

简介：

Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

代码格式化：

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 `{ }` 标签，chrome会帮你给格式化掉。

最新文章

最近回复

分类

归档

其它

分类 WEB开发 下的文章

TypeScript 泛型: 获取 key 对应的 类型

TypeScript 高级用法 -- Record

robots.txt 的完整语法

色值的透明度与十六进制(HEX)代码转换

解析：#ff6699ff（#FF6699FF也是一样的，不区分大小写）

#ff6699ff 由 # 加八位数字或字母组成，前两个 ff 为透明度（十六进制），后面六位 ffffff 为颜色代码，采用 RGB 配色（十六进制）

HTML 在线取色器： HTML 拾色器

此网站用的源代码来自 GitHub：evol.colorpicker

源代码下载：evol.colorpicker

透明度参照表

Chrome,开发者工具的小技巧

简介：

Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

代码格式化：

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { } 标签，chrome会帮你给格式化掉。

最新文章

最近回复

分类

归档

其它

分类 WEB开发下的文章

TypeScript 泛型: 获取 key 对应的类型

解析：`#ff6699ff`（`#FF6699FF`也是一样的，不区分大小写）

`#ff6699ff` 由 `#` 加八位数字或字母组成，前两个 `ff` 为透明度（十六进制），后面六位 `ffffff` 为颜色代码，采用 RGB 配色（十六进制）

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 `{ }` 标签，chrome会帮你给格式化掉。