TS 进阶 & 面试题

TS 面试题及实战

1. 类型推论 & 可赋值性 1.1 什么是类型推论？

没有给出具体类型时，系统根据上下文环境或者定义方式进行类型推倒 1.2 以下代码ts推论出的类型是什么？

let a = 1024; // number
let b = '1024'; // string
const c = 'apple'; // apple 
let d = [true, false, true]; // boolean[]
let e = { name: 'apple'}; // Object
let f = null; // any

ts 中用const 声明会将常量收缩为一个字面量类型，将值作为类型处理，保正const 声明的东西不会被修改

ts 推倒类型的时候会类型拓宽，如果不做固定类型声明，则会适当拓宽，包容该变量

TS 类型集合：

1.3 可赋值性: 数组，布尔，数字，对象，函数，类、字符串，字面量类型，满足以下任一条件时，A类型可以赋值给B类型:
(1)A是B的子类型
(2)A是any类型 规则2是规则1的例外

// 1
let aa = 1024;
let aa1:number = 1024;
aa = aa1;   // ok
aa1 = aa;   // ok
// 2
let bb:string = 'bb';
let bb1:string | number = 'bb1';
bb = bb1;  // ok
bb1 = bb;  // ok
bb1 = 2;  // ok
bb = bb1;   // no
// 3
let i: 3 = 3;
i = 4;   // no 字面量，类型就是3
// 4
let j = [1,2,3];
j.push(4); // ok number[]
j.push('5'); // no string

2. 类型断言: 使用者告诉编译器为什么类型 （使用 as 关键字 或者 <> ） 缺点：执行时可能暴露问题

3. type 和 interface 的异同

1. interface 侧重于描述数据结构（结构中该有哪些类型的变量），type（类型别名）侧重于描述类型
2. 定义方式不同 type 有等号，interface 类似于对象

type age = number; // age 作为 number 的别名
type dataType = number | string ; // dataType 作为二者类型的别名
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface User1 extends User {
    age: number;
}
const user1:User1 = {
    name: 'John',
age: 12 }

3. 都可以进行拓展，只不过语法不同，interface 使用 extends 关键字，type 使用 & 符号

// interface extends interface
interface Name {
    name: string;
}
interface User extends Name {
    age: number;
}
// type extends type
type Name = {
    name: string;
}
type User = Name & { age: number }
// interface extends type
type Name = {
    name: string;
}
interface User extends Name {
    age: number;
}
// type extends interface
interface Name {
    name: string;
}
type User = Name & {
    age: number;
}

4. type 可以用于其他类型，interface 不行

type Name = Number;

5. interface 可以合并

interface Point {
  x: number;
}
interface Point {
y: number; }
const point: Point = { x: 1, y: 2 };

interface User {
    name: string;
    age: number;
}
interface User {
    sex: string;
} //User {
    name: string;
    age: number;
    sex: string;
}

以下哪些会报错？为什么？

// 1
type Options= {
    baseURL: string
    cacheSize?: number
    env?: 'prod' | 'dev'
}
// 2
class API {
    constructor(options: Options){}
}
// 3
new API({
    baseURL: 'http://myapi.site.com',
    env: 'prod'
}) // ok
// 4
new API({
    baseURL: 'http://myapi.site.com',
    badEnv: 'prod'
}) // no, option定义中没有 badEnv
// 5
new API({
    baseURL: 'http://myapi.site.com',
    badEnv: 'prod'
} as Options) // ok, 因为这里使用断言，as Options
// 6
let badOptions ={
    baseURL: 'http://myapi.site.com',
    badEnv: 'prod'
}
new API(badOptions) // ok
// 7
let options: Options = {
    baseURL: 'http://myapi.site.com',
    badEnv: 'prod'
}
new API(badOptions) // 还是不符合Options

4. 装饰器 类前加上一个@

   有哪些装饰器？作用？执行顺序？

   包含：类装饰器、方法装饰器、方法参数装饰器、属性装饰器
   执行顺序:

   1. 有多个参数装饰器时，从最后一个参数依次向前执行
   2. 方法和方法参数中参数装饰器先执行。
   3. 类装饰器总是最后执行。
   4. 方法和属性装饰器，谁在前面谁先执行。因为参数属于方法一部分，所以参数会一直紧紧挨着方法执行。

5. 接口类型：属性类接口 函数类接口 可索引接口 类类型接口 扩展接口