面试题答案
一键面试设计模式
- 类型定义文件(
.d.ts
):- 为JavaScript代码创建
.d.ts
文件,用于描述JavaScript模块的类型。例如,有一个JavaScript模块mathUtils.js
:
可以创建// mathUtils.js function add(a, b) { return a + b; } module.exports = { add };
mathUtils.d.ts
文件来描述其类型:
这样在TypeScript中调用// mathUtils.d.ts declare function add(a: number, b: number): number; declare const mathUtils: { add: typeof add; }; export = mathUtils;
mathUtils.add
时,就能进行类型检查。 - 为JavaScript代码创建
- 接口隔离原则:
- 在TypeScript代码中定义接口,通过接口来约束参数和返回值类型。例如,定义一个接口用于描述用户信息:
在JavaScript中调用时,确保传递的对象符合// user.ts export interface User { name: string; age: number; } export function greetUser(user: User) { return `Hello, ${user.name}! You are ${user.age} years old.`; }
User
接口的结构。const user = { name: 'John', age: 30 }; const { greetUser } = require('./user.js'); const greeting = greetUser(user); console.log(greeting);
工具链配置
- Babel 配置:
- 如果使用Babel,需要配置
@babel/plugin - transform - typescript
插件来处理TypeScript代码。同时,可以使用@babel/preset - env
来处理ES6+语法转换。 - 例如,在
.babelrc
文件中:
{ "presets": [ [ "@babel/preset - env", { "targets": { "node": "current" } } ] ], "plugins": ["@babel/plugin - transform - typescript"] }
- 如果使用Babel,需要配置
- TypeScript 配置(
tsconfig.json
):- 设置
allowSyntheticDefaultImports
为true
,以允许从没有默认导出的模块中进行默认导入,这在JavaScript与TypeScript混合使用时很有用。 - 设置
esModuleInterop
为true
,它会为CommonJS模块创建命名空间包装器,有助于解决CommonJS和ES6模块之间的兼容性问题。
{ "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, "module": "commonjs", "target": "es6", "outDir": "./dist", "rootDir": "./src" } }
- 设置
避免常见类型安全问题
- 明确类型断言:
- 在JavaScript中调用TypeScript函数时,有时需要明确类型断言。例如,有一个TypeScript函数
parseJSON
:
在JavaScript中调用:export function parseJSON<T>(json: string): T { return JSON.parse(json); }
这里通过const { parseJSON } = require('./jsonUtils.js'); const json = '{"name":"Alice","age":25}'; const user = parseJSON(json) as { name: string; age: number }; console.log(user.name);
as
进行类型断言,确保parseJSON
返回值的类型符合预期。 - 在JavaScript中调用TypeScript函数时,有时需要明确类型断言。例如,有一个TypeScript函数
- 使用类型守卫:
- 在TypeScript函数中,可以使用类型守卫来确保返回值类型的正确性。例如:
在JavaScript中调用时,能正确处理可能的export function getValue<T>(obj: { [key: string]: T }, key: string): T | undefined { if (obj.hasOwnProperty(key)) { return obj[key]; } return undefined; }
undefined
返回值:const { getValue } = require('./objectUtils.js'); const obj = { message: 'Hello' }; const value = getValue(obj,'message'); if (value!== undefined) { console.log(value); }