声明文件

在项目中会使用第三方的库， ts是在编译阶段进行语法检查，导入第三方库的函数或对象，本身不是js的变量，ts不认识他们，于是需要声明告诉ts编译器导入的是第三法的库。

类型声明

使用type关键字可以进行自定义类型的声明

我们可以使用 type 关键字，自己定义一些类型

示例1

//1. 自定义类型
interface Person{
  name: string,
  age: number
}

type Persons = Person[];

//2. 获取某个变量的类型
let me: string = '尚硅谷';
type SchoolType = typeof me;

//3. 获取接口键名的联合类型
function getInfo(obj: Person, key: keyof Person): void{
  obj[key]
}

//4. 获取函数的返回值类型
type retType = ReturnType<typeof getInfo>;
                          
//5. 获取函数参数类型. 返回类型为『元组』类型
type paramsType = Parameters<typeof getInfo>
                          
//6. 获取接口属性的类型
let me:Person['name']; //这里等效于 string

✨ 示例2:(掌握)

/**
 * 我们可以使用 type 关键字，自己定义一些类型
 * 
 */

type ns = number | string;
let a: ns = 123;
a = 'abc';

interface IUserItem {
    login: string;
    id: number;
    avatar_url: string;
    html_url: string;
}
type IUserList = IUserItem[]

interface IResponse {
    total_count:number;
    incomplete_results:boolean;
    items:IUserList
}


export { }

声明文件

声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了。

// 自定义声明文件 在根目录新建一个文件 以 文件名.d.ts 结尾

declare var $:(selector: string) => any;
// 使用
$('body').css('background','#aef');

也可以创建一个声明文件名字为 xxx.d.ts (xxx为自定义), TS 编译器会扫描并加载项目中所有的 TS 声明文件

declare var $:(selector: string) => any;

包类型设置

在项目中会使用第三方的库， ts是在编译阶段进行语法检查，导入第三方库的函数或对象，本身不是js的变量，ts不认识他们，会报错，于是需要类型声明文件，在ts中，很多的第三方库都定义了对应的声明文件库, 库文件名一般为 @types/xxx

例如 jquery 类型包(类型声明文件)为 @types/jquery

npm install jquery // ts项目在安装jquery的时候，默认同时也会将该包的声明文件安装
import $ from 'jquery';
$('body').css('background','#aef');

但是有时候会没有安装成功：原因有两种

# 当前 npm 的镜像源没有该声明文件
# 网速不好下载不下来：手动重新安装，或者删除node_modules目录，重新执行 npm i

使用案例

/**
 * 在项目中会使用第三方的库， ts是在编译阶段进行语法检查，导入第三方库的函数或对象，本身不是js的变量，ts不认识他们，会报错
 * 
 * 在ts项目中，使用 npm i 包 
 * 同时也会将该包的声明文件安装成功,如果没有安装成功声明文件，
 * 1. 需要单独安装 npm i @types/包名
 *      npm i @reduxjs/toolkit  (安装类型声明文件,包名带 '/' 需要转为 '__') 
 		npm i @types/@reduxjs__toolkit
 *  
 * 2. 自定义声明文件， 该文件是在根目下，以 xxxx.d.ts结尾的文件
 * 
 * 导致安装包，不能自动安装声明文件导致报错的原因及解决方案：
 * 1. 当前 npm 的镜像源没有该声明文件
 *    重新设置其他的源，设置官方源
 * 
 * 2. 网速不好下载不下来：手动重新安装，或者删除node_modules目录，重新执行 npm i 
 */

内置类型

JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域（Global）上存在的对象。

这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

ECMAScript 的内置对象

1. Boolean
2. Number
3. String
4. Date
5. RegExp
6. Error

包装对象

let num:number = 123
console.log(num.toString) // num是基本数据类型123，但是可以使用toString，
// 当使用123.这种对象的使用方式时，JS内部 相当于做了 const num = new Number(123) 这个操作
// 这样才能使用 .tpString() 语法,这个过程就叫做包装对象,这个包装对象Number就是TS中的内置对象(构造函数)。

let b: Boolean = new Boolean(1)    // Boolean  boolean
let n: Number = new Number(true)
let s: String = new String('abc')
let d: Date = new Date()
let r: RegExp = /^1/
let e: Error = new Error('error message')
b = true
// let bb: boolean = new Boolean(2)  // error
// boolean 是 内置类 Boolean 子类型
let b1: Boolean = true;
console.log(b1);

let b2:Boolean = new Boolean(2); // boolean 和 Boolean不是一个类型,一个是实例，一个是构造函数

BOM 和 DOM 的内置对象

• Window
• Document
• HTMLElement
• DocumentFragment
• Event
• NodeList(使用querySelectAll()获取到的所有元素对象)

// 类型断言：
const div: HTMLElement = document.getElementById('test') as HTMLElement
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
  console.dir(event.target)
})

const root = reactDOM.createRoot(document.getElementById('root') as HTMLElement)

使用案例

// boolean 是 内置类 Boolean 子类型
let b1: Boolean = true;
console.log(b1);

// let b2:boolean = new Boolean(2); // boolean 和 Boolean不是一个类型

// 包装对象

let num: number = 123;
console.log(num.toString());  // let t = new Number(123)  t.toString()


// Bom Dom 内置对象
const div: HTMLElement = document.getElementById('test') as HTMLElement
const divs: NodeList = document.querySelectorAll('div')
document.addEventListener('click', (event: MouseEvent) => {
    console.dir(event.target)
})

// const root = reactDOM.createRoot(document.getElementById('root') as HTMLElement)

export { }