TypeScript类型声明的规则(十)

1.类型的查找

image.png

第一个叫做内置类型声明,在我们安装typescript的时候就会带着一起给他安装下来的,就是内置的我们的声明文件。
还有一种的话叫做外部定义类型声明文件,这个的话一般是一些第三方库。第三方库它会自带一些帮助我们做了一些类型声明的文件,比如说像axios,他就是有带这个东西的,所以,他有我们对应的类型声明,我们是可以直接使用他的。
还有一种是自己来定义的一些类型声明文件,就是我需要自己来编写对应的这些类类型。

2.内置类型声明

内置的类型声明,内置的类型声明就是document.getElementById,哪里来的getElementById呀,点进去之后的话,就会发现它再lib.dom.d.ts中有被声明


image.png

放大


这些东西是我们安装typescript的时候就被安装的。

  1. 内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件;
    • 包括比如Math、Date等内置类型,也包括DOM API,比如Window、Document等;
  2. 内置类型声明通常在我们安装typescript的环境中会带有的;
    phttps://github.com/microsoft/TypeScript/tree/main/lib

3.外部定义类型声明

  1. 外部类型声明通常是我们使用一些库(比如第三方库)时,需要的一些类型声明。
  2. 这些库通常有两种类型声明方式:
    • 方式一:在自己库中进行类型声明(编写.d.ts文件),比如axios
    • 方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件

4.自定义声明

什么情况下需要自己来定义声明文件呢?

  1. 情况一:我们使用的第三方库是一个纯的JavaScript库,没有对应的声明文件;比如lodash
  2. 情况二:我们给自己的代码中声明一些类型,方便在其他地方直接进行使用;

在src下面lodash.d.ts

// 声明模块
declare module 'lodash' {
  export function join(arr: any[]): void
}

main.ts

import lodash from "lodash";
console.log(lodash.join(["abc", "cba"])); //abc,cba

前提是安装npm i lodash

5.声明变量-函数-类

.d.ts不用转成JS代码,然后让它运行,它只是做类型声明的,就是告诉ts的我有这个类型,所以不需要写实现.

我们在html中定义了变量的化,可不可以在main.ts中使用?

image.png

在html中,ts转js被打包好,放在html最底下引用,
在main.ts中打印变量

console.log(whyName)
console.log(whyAge)
console.log(whyHeight)

从js运行的角度来讲,它是可以被打印的,因为他是在定义之后被加载的。就是上面的代码在前,打印的在后。但是实际上,在main.ts中写的这三行代码通不过ts的编译,因为ts根本就不知道whyName,whyAge是个什么东西。如何解决问题,不让它报错呢?这个时候我们需要声明这三个变量,只声明就可以,不用赋值,目的是让他通过编译,变成js。
这个时候,在src底下的.d.ts文件中声明这几个变量,不用实现!!

declare let whyName: string
declare let whyAge: number
declare let whyHeight: number
image.png

main.ts


console.log(whyName)
console.log(whyAge)
console.log(whyHeight)

whyFoo()

const p = new Person("why", 18)
console.log(p)


$.ajax({
  
})


html

  <script>
    let whyName = "coderwhy"
    let whyAge = 18
    let whyHeight = 1.88

    function whyFoo() {
      console.log("whyFoo")
    }

    function Person(name, age) {
      this.name = name
      this.age = age
    }
  </script>

</body>

.d.ts

// 声明模块
declare module 'lodash' {
  export function join(arr: any[]): void
}

// 声明变量/函数/类
declare let whyName: string
declare let whyAge: number
declare let whyHeight: number

declare function whyFoo(): void

declare class Person {
  name: string
  age: number
  constructor(name: string, age: number)
}

// 声明文件
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.png'
declare module '*.svg'
declare module '*.gif'

// 声明命名空间
declare namespace $ {
  export function ajax(settings: any): any
}

6.声明模块

image.png

7.declare文件

image.png

8.declare命名空间

image.png

9.tsconfig.json文件

tsconfig.json是用于配置TypeScript编译时的配置选项: phttps://www.typescriptlang.org/tsconfig
我们这里讲解几个比较常见的:

image.png

image.png

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容