[TS] Use of TypeScript declaration files (.d.ts)

foreword

When we need to introduce an external library in the TS file, the type of the incoming parameter cannot be judged at compile time, so we need to add a declaration file before the import to help TS judge the type.
Of course, most libraries now have their own declaration files, usually in the @types directory.

scenes to be used

Do type judgment on the referenced external library in the ts file;
when making an npm package, write your own declaration file, you need to register the path of the declaration file in the field; package.jsonwhen not using ts, you can also add the declaration file and (your own) The modules are stored in the same directory. Simply make a data structure, which is also useful for IDE parameter declarations.typing/types

Several methods of citing declaration files

Put it in the same directory as the called ts file; add the path of the declaration file under the field of
the declaration file ; configuretsconfig.jsoninclude/files

.eslintrc.js

module.exports = {
    
    
	root: true,
	env: {
    
    
		browser: true,
		es2021: true,
		node: true,
	},
	parser: 'vue-eslint-parser',
	parserOptions: {
    
    
		ecmaVersion: 12,
		parser: '@typescript-eslint/parser',
		sourceType: 'module',
	},
	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
	plugins: ['vue', '@typescript-eslint'],
	// --------此处配置,可让vscode不报红------
	overrides: [
		{
    
    
			files: ['*.ts', '*.tsx', '*.vue'],
			rules: {
    
    
				'no-undef': 'off',
			},
		},
	],
	rules: {
    
    
		// http://eslint.cn/docs/rules/
		// https://eslint.vuejs.org/rules/
		'@typescript-eslint/ban-ts-ignore': 'off',
		'@typescript-eslint/explicit-function-return-type': 'off',
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/no-var-requires': 'off',
		'@typescript-eslint/no-empty-function': 'off',
		'@typescript-eslint/no-use-before-define': 'off',
		'@typescript-eslint/ban-ts-comment': 'off',
		'@typescript-eslint/ban-types': 'off',
		'@typescript-eslint/no-non-null-assertion': 'off',
		'@typescript-eslint/explicit-module-boundary-types': 'off',
		'vue/custom-event-name-casing': 'off',
		'vue/attributes-order': 'off',
		'vue/one-component-per-file': 'off',
		'vue/html-closing-bracket-newline': 'off',
		'vue/max-attributes-per-line': 'off',
		'vue/multiline-html-element-content-newline': 'off',
		'vue/singleline-html-element-content-newline': 'off',
		'vue/attribute-hyphenation': 'off',
		'vue/html-self-closing': 'off',
		'vue/no-multiple-template-root': 'off',
		'vue/require-default-prop': 'off',
		'vue/no-v-model-argument': 'off',
		'vue/no-arrow-functions-in-watch': 'off',
		'vue/no-template-key': 'off',
		'vue/no-v-html': 'off',
		'vue/comment-directive': 'off',
		'vue/no-parsing-error': 'off',
		'vue/no-deprecated-v-on-native-modifier': 'off',
		'vue/multi-word-component-names': 'off',
		'no-useless-escape': 'off',
		'no-sparse-arrays': 'off',
		'no-prototype-builtins': 'off',
		'no-constant-condition': 'off',
		'no-use-before-define': 'off',
		'no-restricted-globals': 'off',
		'no-restricted-syntax': 'off',
		'generator-star-spacing': 'off',
		'no-unreachable': 'off',
		'no-multiple-template-root': 'off',
		'no-unused-vars': 'error',
		'no-v-model-argument': 'off',
		'no-case-declarations': 'off',
		'no-console': 'off',
		'no-debugger': 'off',
	},
};

example

Take the external library fs as an example (assuming fs does not have its own declaration file)

• fs.d.ts

declare module 'fs' {
    
    
    function readFileSync(path: string | number, options?: {
    
     encoding?: string; flag?: string; } | null): string;
}

• MyTest.ts

import * as fs from 'fs'

const body = fs.readFileSync('../@types/fs.d.ts', {
    
    encoding: 'utf8'});
console.log(body);

Summarize

Declaration files generally can only declare externally imported npm packages;
declaration files must declare module 'fs'explicitly declare their own external library names;