typescript | typeScript 笔记 - Powered by Discuz! Archiver

王庆双 發表於 2020-7-2 22:42:00

typescript | typeScript 笔记

typescript学习网址 https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html
------------------------------------------------------------------------------------
1、tsconfig.json 配置文件 
<div>compilerOptions属性具体解释</div>
https://www.tslang.cn/docs/handbook/compiler-options.html
 
2、如何编写 TypeScript 声明文件
文章来自：https://juejin.im/post/6844903693226082318
通过<code>keyof</code>与<code>typeof</code>组合可以得到我们想要的结果：
<div class="cnblogs_code">
<pre>const obj = {
name: 'Niko',
age: 18
}

// 如果是这样的取值，只能写在代码中，不能写在 d.ts 文件中，因为声明文件里边不能存在实际有效的代码
type keys = keyof typeof obj

let a: keys = 'name' // pass
let b: keys = 'age'// pass

let c: keys = 'test' // error</pre>
</div>
而如果我们想要将一个类型不统一的<code>JSON</code>修改为统一类型的<code>JSON</code>也可以使用这种方式：
<div class="cnblogs_code">
<pre>const obj = {
name: 'Niko',
age: 18,
birthday: new Date()
}

const infos: Record<keyof typeof obj, string> = {
name: '',
age: '',
birthday: 123, // 出错，提示类型不匹配
test: '', // 提示不是`info`的已知类型
}</pre>
</div>
<h3 class="heading" data-id="heading-4">获取函数的返回值类型</h3>
又比如说我们有一个函数，函数会返回一个<code>JSON</code>，而我们需要这个<code>JSON</code>来作为类型。
那么可以通过<code>ReturnType<></code>来实现：
<div class="cnblogs_code">
<pre>function func () {
return {
name: 'Niko',
age: 18
}
}

type results = ReturnType<typeof func>

// 或者也可以拼接 keyof 获取所有的 key
type resultKeys = keyof ReturnType<typeof func>

// 亦或者可以放在`Object`中作为动态的`key`存在
type infoJson = Record<keyof ReturnType<typeof func>, string></pre>
</div>
<div>
<div>
<h2 class="heading" data-id="heading-6">函数重载</h2>
这个概念是在一些强类型语言中才有的，依托于<code>TypeScript</code>，这也算是一门强类型语言了，所以就会有需要用到这种声明的地方。
例如我们有一个<code>add</code>函数，它可以接收<code>string</code>类型的参数进行拼接，也可以接收<code>number</code>类型的参数进行相加。
需要注意的是，只有在做第三方插件的函数重载定义时能够放到<code>d.ts</code>文件中，其他环境下建议将函数的定义与实现放在一起（虽说配置<code>paths</code>也能够实现分开处理，但是那样就失去了对函数创建时的约束）
</div>
<div class="cnblogs_code">
<pre>// index.ts

// 上边是声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字

// 下边是实现
function add (arg1: string | number, arg2: string | number) {
// 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
if (typeof arg1 === 'string' && typeof arg2 === 'string') {
return arg1 + arg2
} else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
return arg1 + arg2
}
}</pre>
</div>
<div>
<div>
但是这样的函数重载在声明的顺序上就很有讲究了，一定要将精确性高的放在前边：
<div class="cnblogs_code">
<pre>// 这样是一个错误的示例，因为无论怎样调用，返回值都会是`any`类型
function build(arg: any): any
function build(arg: Object): string
function build(arg: Date): number</pre>
</div>
 
因为<code>TypeScript</code>在查找到一个函数重载的声明以后就会停止不会继续查找，<code>any</code>是一个最模糊的范围，而<code>Object</code>又是包含<code>Date</code>的，所以我们应该按照顺序从小到大进行排列：
<div class="cnblogs_code">
<pre>function build(arg: Date): number
function build(arg: Object): string
function build(arg: any): any

// 这样在使用的时候才能得到正确的类型提示
const res1 = build(new Date()) // number
const res2 = build(() => { })// string
const res3 = build(true) // any</pre>
</div>
<h3 class="heading" data-id="heading-8">一些不需要函数重载的场景</h3>
函数重载的意义在于能够让你知道传入不同的参数得到不同的结果，如果传入的参数不同，但是得到的结果（类型）却相同，那么这里就不要使用函数重载（没有意义）。
如果函数的返回值类型相同，那么就不需要使用函数重载
<div>
<div>
<h2 class="heading" data-id="heading-9">Interface</h2>
<code>interface</code>是在<code>TypeScript</code>中独有的，在<code>JavaScript</code>并没有<code>interface</code>一说。 
因为<code>interface</code>只是用来规定实现它的<code>class</code>对应的行为，没有任何实质的代码，对于脚本语言来说这是一个无效的操作
在语法上与<code>class</code>并没有什么太大的区别，但是在<code>interface</code>中只能够进行成员属性的声明，例如<code>function</code>只能够写具体接收的参数以及返回值的类型，并不能够在<code>interface</code>中编写具体的函数体，同样的，针对成员属性也不能够直接在<code>interface</code>中进行赋值：

</div>

</div>
 
</div>
-------------------------------------------------------------------------</div>
</div>
  
来源：https://www.cnblogs.com/liujinyu/p/13227606.html

頁: [1]

琼殿技术论坛's Archiver

typescript | typeScript 笔记