TS面试题目

keyof和typeof关键字作用?

keyof 索引类型查询操作符, 获取索引类型属性名, 构成联合类型

typeof 获取一个变量或者对象的类型 let str:string = ‘hello’ // typeof str =>:string

keyof typeof 获取 联合类型的key

enum A{
    A, B, C
}

type unionType = keyof typeof A; // 'A'|'B'|'C'

TypeScript 中 any, nerver, unknown, null & undefined 和 void 有什么区别?

• any: 动态类型变量 失去了类型检查作用

• never: 永远不存在值的类型

  • 抛出异常, 根本没有返回值的函数表达式 或者箭头函数表达式返回值类型

• unknown 任何类型的值都可以赋值给unknown unknown只能赋值给unknown, any

• null & undefined 默认是所有类型的子类型
  –strictNullChecks 标记null 或者undefined 只能赋值给void 或者他们自己

• void 函数没有返回值, 可以定义为void类型, 没有任何类型

TS中使用Union Types时注意事项?

属性和方法的访问?
只能访问共有属性或方法

function getLength(something: string | number):number{
    return something.length // wrong, 因为number 类型时候没有 .length
}


function getString(something: string | number):string{
    return something.toString() // right
}

// 公共方法和属性可访问

TS中的tsconfig.json中那些配置项信息

{
    "files": [],
    "include": [],
    "exclude": [],
    "compileOnSave": false,
    "extends": "",
    "compilerOptions": {}
}

• files 指定文件的相对或者绝对路径,对指定路径文件进行编译
• include & exclude 指定编译某些文件, 排除某些文件编译
• compileOnSave: true 保存 重新生成文件
• extends 继承 通用逻辑抽取后,继承这个公共文件
• compilerOptions 编辑配置项 如何对具体的ts 文件进行编译

TS中如何设计Class声明

class Greeter{
    greeting: string;
    constructor(message:string){
        this.greeting = message
    }

    getGreeting():string{
        return this.greeting
    }

    sayGreeting():string{
        return `Say ${this.greeting}`
    }
}
const greeter = new Greeter('Hello')

TS中的如何使用联合枚举类型的Key

enum str {
    A, B, C, D
}

// 获取联合类型key
type strUnion = keyof typeof str;// 'A'|'B'|'C'|'D'

TS中对象展开有什么副作用

• 1. 展开对象后面的属性会覆盖前面的属性
• 2. 仅包含可枚举的属性 不可枚举的属性丢失

TS中模块加载机制

import { a } from 'moduleA'

// 1. 模块文件
// 2. 外部模块声明 .d.ts
// 3. 抛出错误 cannot find module 'moduleA'

TS中类型的全局声明与局部声明

// 不包含import export 会变为全局声明
// 包含 局部声明 不会影响到全局声明

如何使TS项目引入并识别编译为Javascript 的npm 库包?

1. 选择啊安装ts版本, npm install @types/xxx --save

2. 没有类型的js 需要自己编写同名的.d.ts

什么是TS?

TS是js超集

支持ES6语法

支持面向对象编程概念, 类, 接口 ,继承, 泛型

TS不支持在浏览器中运行, 编译为纯js来运行

数组定义的两种方式

type Foo = Array<string>

interface Bar{
    baz: Array<{name: string, age: number}>
}

type Foo = string[]


interface Bar{
    baz: {name: string, age: number}[];
}

TS中可以使用String,Number,Boolean,Symbol,Object 等类型做声明吗.md

let name:string = 'foo'

let age: number = 6

let isDone: boolean = false

let sym: Symbol = Symbol()

interface Person {
    name: string;
    age: number;
}

为什么要使用TS?TS相对于JS优势是什么?

增加了静态类型 代码质量更好, 更健壮

优势

• 杜绝手误导致变量名写错
• 杜绝一定程度充当文档
• IDE 自定义填充, 字段联想

TS中 interface 可以给Function / Array / Class(Indexable)做声明吗?

// 函数声明
interface Say{
    (name:string): void;
}

let say:Say = (name:string):void => {}

// Array
interface NumberArray{
    [index: number]: number;
}

let list: NumberArray = [1, 2, 3, 5]

// Class声明
interface Person{
   name:string;
   sayHi(name:string): string;
}



/**
 * ts中将引用类型分为两个大类.
 * 复合引用类型: 数组,元组,函数,对象,类的实例等
 * 内置引用类型: Date(日期)对象, RegExp(正则), Math(数学)对象等
 * 
 * 复合引用类型需要用户自行定义该类型的组成形式. 
 * 如: 数组和元组, 需自行定义组成类型与长度
 * 对函数: 定义其参数, 行为, 返回值
 * 对对象与类实例: 定义其成员, 结构与行为
 * 
 */

// 示例如下:

// 声明常量变量
let number:number = 1
const str: string = 'string'

// 声明数组
let animals: string[] = ['cat','dog', 'bird']

// 声明元组(固定长度数组)
let sex:[string, string] = ['male', 'female']

// 声明函数
function printArrayContent(arr: string[]):void {
    console.log(`共有${arr.length}个元素`);
}

// 输出: 共有2个元素
printArrayContent(animals)

// 声明对象
let person:{name: string, age: number, selfIntroduction:()=>void} = {
    name: "Hello world",
    age: 111,
    selfIntroduction: function (): void {
        console.log(`My name is ${this.name}, ${this.age} old`);
    }
}

// 输出 My name is Hello world, 111 old
person.selfIntroduction()

// 枚举
enum Gender {
    Male = 0,
    Female = 1
}

let i: {name: string, gender: Gender};
i = {
    name: '孙悟空',
    gender: Gender.Male
}

console.log(i.gender === Gender.Male);

// 类型别名
type myType = 1 | 2 | 3 | 4;
let k: myType;
let l: myType;
let m: myType;

k = 2; 

// 声明类
class Phone{
    system: string;
    ram: number;
    rom:number;
    constructor(theSystem:string, theRam:number, theRom:number) {
        this.system = theSystem;
        this.ram = theRam
        this.rom = theRom
    }
    bootPrompt(distanceInMeters:number = 0){
        console.log(`System: ${this.system}, RAM: ${this.ram}GB, ROM: ${this.rom}GB`);
    }
}

let androidPhone:Phone = new Phone('Android', 8, 256);

// 输出: System: Android, RAM: 8GB, ROM: 256GB
androidPhone.bootPrompt()

// 对于内置引用类型, 通常已经由变成语言定义好该类型的结构, 成员, 行为. 直接使用即可

// 如下示例代码:

let currentDate = new Date(2022, 5, 1)

// 注意,TS中的月份是从0开始, 0代表1月

// 输出: 当前时间为Wed Jun 01 2022 00:00:00 GMT+0800 (中国标准时间)
console.log(`当前时间为${currentDate}`);

let patt1 = new RegExp("e")


// 输出: true
console.log(patt1.test("free"));