三斜線指令很簡單友鼻，推薦大家去看官網(wǎng) triple-slash-directives舱污。
我在這主要講下三斜線指令的實踐應用话浇。
重點：我們知道在 TS 項目中抄沮，文件之間相互引用是通過 import 來實現(xiàn)的跋核，那么聲明文件之間的引用呢？沒錯通過三斜線指令叛买。
三斜線指令常用的就兩個功能：
- 倒入聲明文件
- 倒入第三方包
如果對比 import 的功能砂代，我們可以寫出如下的等式：
-
/// <reference path="..." />==import filename.xxx -
/// <reference types="..." />==import lodash from "lodash"
demo 就不寫了，直接分析下 Create-React-App 關(guān)于三斜線指令的用法率挣，熟練掌握這個刻伊，基本就算精通了。
Create-React-App 創(chuàng)建的 TS 項目椒功，src 目錄下會有一個文件 react-app-env.d.ts 捶箱，打開它，很簡單就一行代碼动漾。
/// <reference types="react-scripts" />
聲明文件丁屎，引用了一個第三方的聲明文件包 react-scripts。問題來了旱眯， 我們?nèi)ツ恼宜爻看ǎ繘]錯也在 node_modules 里面找，reference types 的索引規(guī)則删豺，完全不知道在哪去找共虑， 經(jīng)過的我實驗，知道了它的索引規(guī)則為：
node_modules/@types/react-scripts/index.d.ts-
node_modules/@types/react-scripts/package.json的 types 字段 node_modules/react-scripts/index.d.ts-
node_modules/react-scripts/package.json的 types 字段 - 接下里就是 NodeJs 查找模塊的套路了
Create-React-App 的 react-scripts 包呀页，就在 node_modules/react-scripts 里面妈拌，打開 react-scripts/package.json 的 types 字段指定的聲明文件 index.d.ts 內(nèi)容如下。
這個文件很簡單蓬蝶，頭部繼續(xù)索引了三個聲明文件供炎，剩下的代碼大部分都是對非靜態(tài)文件的聲明晶姊。
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test';
readonly PUBLIC_URL: string;
}
}
declare module '*.avif' {
const src: string;
export default src;
}
declare module '*.bmp' {
const src: string;
export default src;
}
declare module '*.gif' {
const src: string;
export default src;
}
declare module '*.jpg' {
const src: string;
export default src;
}
declare module '*.jpeg' {
const src: string;
export default src;
}
declare module '*.png' {
const src: string;
export default src;
}
declare module '*.webp' {
const src: string;
export default src;
}
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}
上面是三斜線引用第三方聲明文件的寫法，我們見識到了 types 的用法坦康，接下來我們見識下引用自己寫聲明文件的用法——path揖赴。
仔細觀察 react-scripts 的聲明文件，都是關(guān)于圖片的聲明竭钝，沒有關(guān)于視頻文件 video 的聲明梨撞，在項目中如果通過 Video 標簽引入視頻，過不了 TS 的檢查香罐，會直接報錯卧波，所以我們來寫下視頻文件的聲明，順道看下 path 的作用庇茫。
我們現(xiàn)在 react-app-env.d.ts 聲明文件所在目錄港粱，新建文件聲明文件 video.d.ts，其內(nèi)容很簡單旦签，如下：
declare module "*.mp4";
我們在 react-app-env.d.ts 聲明文件中通過三斜線指令引入：
/// <reference types="react-scripts" />
/// <reference path="./video" />
此時在項目中插入一個視頻標簽：
import React from 'react';
import macaque from "./macaque.mp4";
function App() {
return <video controls width={400} autoPlay src={macaque}></video>;
};
export default App;
完美運行查坪，且控制臺沒有報錯：
我們還可以驗證下，注釋掉 video.d.ts 的內(nèi)容宁炫，我們會看到組件報錯如下：
好了偿曙，三斜線指令掌握到此完全闊以了，接下來學二送一羔巢。
三斜線指令的作用是用來引用聲明文件望忆，這時候我們可以想想，項目中還有誰有聲明文件竿秆，沒錯 TS 本身启摄。我們來實驗下，就用 ES2019 的 flat 方法幽钢。
首先確定 tsconfig.json 的 lib 字段不要出現(xiàn) ES2019歉备、ES2020 或 ESNEXT。
{
"compilerOptions": {
"lib": [
"dom",
"dom.iterable"
]
},
"include": [
"src"
]
}
這時候我們在組件中使用下數(shù)組的 flat 方法：
import React from 'react';
function App() {
const arr = [[1, 2], [3, 4], [5, 6]];
console.log(arr.flat());
return <h3>ES2019 的 flat 方法演示</h3>;
}
export default App;
因為沒有引入 ES2019+搅吁，所以會過不了 TS 的檢查威创，錯誤如下：
常用的解決辦法，VSCode 都給我們提示出來了谎懦，在 lib 添加 ES2019+肚豺。我們現(xiàn)在不能這么做因為我們要觀察三斜線指令引入 TS 自帶的聲明文件。
那怎么使用三斜線指定解決這個問題呢界拦？灰常簡單吸申，頭部添加一行注釋即可。
/// <reference lib="es2019.array" />
import React from 'react';
function App() {
const arr = [[1, 2], [3, 4], [5, 6]];
console.log(arr.flat());
return <h3>ES2019 的 flat 方法演示</h3>;
}
export default App;
現(xiàn)在看下 VSCode ，嗯截碴，錯誤消失了梳侨。
這是三斜線指令的另一個用法，引入 lib 內(nèi)置的聲明文件日丹，但是我們不用走哺，因為我們項目都是在 tsconfig.json 里面直接配置好的，好嗎哲虾。
使用注意事項
三斜線使用注意
- 必須放在文件的最頂部
- 三斜線前面只能出現(xiàn)丙躏，單行注釋或多行注釋
完～
當前時間 Friday, April 30, 2021 11:39:03
