Based by 钰溪

实战

1、类型推论 & 可赋值性

a.什么是类型推论？

b.以下代码ts推论出的类型是什么？

let a = 1024;
let b = '1024';
const c = 'apple';
let d = [true, false, true];
let e = { name: 'apple'}
let f = null;

可赋值性：数组，布尔，数字，对象，函数，类、字符串，字⾯量类型，满⾜以下任⼀条件时，A类型可以

赋值给B类型。

1）A是B的⼦类型

2）A是any类型

规则2是规则1的例外 2、类型断⾔

function formatInput(input: string):string {
return input.slice(0, 10);
}
function getUserInput(): string | number {
return 'test';
}
let input = getUserInput();
formatInput(input as string);
formatInput(<string>input);

3、type 和 interface的异同

interface侧重于描述数据结构，type（类型别名）侧重于描述类型

type age = number;
type dataType = number | string ;
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
type User = {
name: string
age: number
}
interface User1 extends User {
age: number;
}
const user1:User1 = {
name: 'John',
age: 12
}

异同点

两者的异同 1.相同点

a.都可以描述⼀个对象或者函数

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

interface SetUser {
(name: string, age: number): void;
}

// type
type User = {
name: string;
age: number;
}
type SetUser = (name: string, age: number): void;

b、interface和type都可以拓展，interface可以extends type, type也可以extends interface. 效果差不多，语法不同。

// 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;
}

2.不同点

a.类型别名可以⽤于其它类型（联合类型、元组类型、基本类型（原始值）），interface不⽀持

type PartialPointX = { x: number };
type PartialPointY = { y: number };
// union(联合)
type PartialPoint = PartialPointX | PartialPointY;
// tuple(元祖)
type Data = [PartialPointX, PartialPointY];
//primitive(原始值)
type Name = Number;
// typeof的返回值
let div = document.createElement('div');
type B = typeof div;
b.interface 可以多次定义 并被视为合并所有声明成员 type 不⽀持
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;
}

c.type 能使⽤ in 关键字⽣成映射类型，但 interface 不⾏。

type Keys = 'firstname' | 'surname';
type DudeType = {
[key in Keys]: string;
};
const test: DudeType = {
firstname: 'Pawel',
surname: 'Grzybek',
};

提问：

// 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'
})
// 4
new API({
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
})
// 5
new API({
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
} as Options)
// 6
let badOptions ={
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
}
new API({badOptions})
// 7
let options: Options = {
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
}
new API({badOptions})

4、装饰器问题

执⾏顺序

微信图片_20220116220635.png

a、有多个参数装饰器时：从最后⼀个参数依次向前执⾏ b、⽅法和⽅法参数中参数装饰器先执⾏。 c、类装饰器总是最后执⾏。 d、⽅法和属性装饰器，谁在前⾯谁先执⾏。因为参数属于⽅法⼀部分，所以参数会⼀直紧紧挨着⽅法执⾏。 5、接⼝类型属性类接⼝函数类接⼝可索引接⼝类类型接⼝扩展接⼝

实战 1、axios 封装 2、TS 装饰器

面试题

1、类型推论 & 可赋值性

a.什么是类型推论？

b.以下代码ts推论出的类型是什么？

let a = 1024;
let b = '1024';
const c = 'apple';
let d = [true, false, true];
let e = { name: 'apple'}
let f = null;

c. 是否可互相赋值？

// 1
let aa = 1024;
let aa1:number = 1024;
aa = aa1; // ??
aa1 = aa; // ??
// 2
let bb:string = 'bb';
let bb1:string | number = 'bb1';
bb = bb1; // ??
bb1 = bb; // ??
bb1 = 2; // ??
bb = bb1; // ??
// 3
let i: 3 = 3;
i = 4; // ??
// 4
let j = [1,2,3];
j.push(4);
j.push('5');
d.ts的严格模式和⾮严格模式下，以下代码的表现差异？
var aaa = undefined;
var bbb = null;
let ggg: number = 12;
ggg = aaa;

2、什么是类型断⾔？

3、type 和 interface的异同

4、下⾯代码块哪些会报错？为什么？

// 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'
})

// 4
new API({
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
})
// 5
new API({
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
} as Options)
// 6
let badOptions ={
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
}
new API({badOptions})
// 7
let options: Options = {
baseURL: 'http://myapi.site.com',
badEnv: 'prod'
}
new API({badOptions})

5、有哪些类型装饰器？装饰器作⽤？执⾏的顺序是怎样的？

6、接⼝类型有哪些种类

学习笔记:Typescript(下）

实战

面试题