一.什么是typescript

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码

它是开源和跨平台的编程语言。

二.typeScript的特点

1.始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中

2. 强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

3. 先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

三.如何安装typeScript

npm install -g typescrip

检查是否成功 tsc-v

四.编写typeScript

Vscode编译

1).生成配置文件tsconfig.json

 tsc --init

2). 修改tsconfig.json配置

 "outDir": "./js",

 "strict": false, 

3). 启动监视任务: 

 终端 -> 运行任务 -> 监视tsconfig.json

五.常用语法

1.布尔

let isDone: boolean = false;

2.数字

let a1: number = 10 十进制

let a2: number = 0b1010 二进制

let a3: number = 0o12 八进制

let a4: number = 0xa 十六进制

3.字符串

let name:string = 'tom'

4.未定义和空型

let u: undefined = undefinedlet n: null = null

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

5.数组两种方式

let list1: number[] = [1, 2, 3]

let list2: Array<number> = [1, 2, 3]

6.元祖tuple  元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let t1: [string, number]

t1 = ['hello', 10]

7.枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。

enum Color {

 Red,

 Green,

 Blue}

// 枚举数值默认从0开始依次递增

// 根据特定的名称得到对应的枚举数值

let myColor: Color = Color.Green // 0

console.log(myColor, Color.Red, Color.Blue)

默认情况下，从 0 开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1 开始编号：

enum Color {Red = 1, Green, Blue}let c: Color = Color.Green

手动

enum Color {Red = 1, Green = 2, Blue = 4}let c: Color = Color.Green

8.any 标记任意类型

let notSure: any = 4

notSure = 'maybe a string'

 notSure = false

9.void  void 类型像是与 any 类型相反   ，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

let unusable: void = undefined

10.object  object 表示非原始类型，也就是除 number，string，boolean之外的类型。

function fn2(obj:object):object {

 console.log('fn2()', obj)  

return {}

}

11.联合类型

定义一个一个函数得到一个数字或字符串值的字符串形式值

function toString2(x: number | string) : string {

 return x.toString()}

12.类型断言   其一是“尖括号”语法, 另一个为 as 语法

方式一: <类型>值

方式二: 值 as 类型 tsx中只能用这种方式

定义一个函数得到一个字符串或者数值数据的长度 */function getLength(x: number | string) {

 if ((<string>x).length) {

 return (x as string).length  

} else {

  return x.toString().length  

}}

console.log(getLength('abcd'), getLength(1234))

13.类型推断

1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型

/* 定义变量时赋值了, 推断为对应的类型 */let b9 = 123 // number// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */let b10 // any类型

b10 = 123

b10 = 'abc'

14.接口  接口是对象的状态和行为，也就是属性和方法

接口类型的对象

 可选属性: ?

 只读属性: readonly

可选属性interface IPerson {  id: number  name: string  age: number  sex?: string }

只读属性

interface IPerson {  readonly id: number  name: string  age: number  sex?: string }

一旦赋值后再也不能被改变了

15.类实现接口

1. 一个类可以实现多个接口

2. 一个接口可以继承多个接口

16.类

class Greeter {

 // 声明属性  

message: string  

//构造方法 constructor (message: string) {

 this.message = message  }

17.类的继承

class Animal {

 run (distance: number) {

 console.log(`Animal run ${distance}m`)  

}} class Dog extends Animal {

 cry () 

{  console.log('wang! wang!')  

}}

const dog = new Dog()

 dog.cry() 

 dog.run(100) // 可以调用从父中继承得到的方法

这个例子展示了最基本的继承：类从基类中继承了属性和方法。 这里，Dog 是一个 派生类，它派生自 Animal 基类，通过 extends 关键字。 派生类通常被称作子类，基类通常被称作超类。

因为 Dog 继承了 Animal 的功能，因此我们可以创建一个 Dog 的实例，它能够 cry() 和 run()。

18.公共私有受保护的修饰符

默认public

当成员被标记成 private 时，它就不能在声明它的类的外部访问。

protected 修饰符与 private 修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。

 public: 默认值, 公开的外部也可以访问

 private: 只能类内部可以访问

 protected: 类内部和子类可以访问

vue3面试题

一.vue2和vue3的区别

1.响应式系统的重新配置，使用代理替换对象.define属性，使用代理优势：

可直接监控阵列类型的数据变化

2.监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

3.可拦截应用、拥有密钥、有等13种方法，以及Object.define属性没有办法

直接添加对象属性/删除

4.新增组合API，更好的逻辑重用和代码组织

5.重构虚拟 DOM

6.模板编译时间优化，将一些静态节点编译成常量

7.slot优化，采取槽编译成懒人功能，拿槽渲染的决定留给子组件

8.在模板中提取和重用内联事件（最初，每次渲染时都会重新生成内联函数）

9.代码结构调整，更方便树摇动，使其更小

10.使用打字脚本替换流

二.vue3带来了哪些改变

1.性能提升

2.源码升级

3.可以使用ts

4.setup配置

5.新的声明周期

三.vue2和vue3声明周期对比

beforeCreate===>setup()

created=======>setup()

beforeMount ===>onBeforeMount

mounted=======>onMounted

beforeUpdate===>onBeforeUpdate

updated =======>onUpdated

beforeUnmount ==>onBeforeUnmount

unmounted =====>onUnmounted

四.vue3的响应式原理

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

通过Reflect（反射）: 对源对象的属性进行操作。

new Proxy(data, {

    // 拦截读取属性值

    get (target, prop) {

        return Reflect.get(target, prop)

    },

    // 拦截设置属性值或添加新属性

    set (target, prop, value) {

        return Reflect.set(target, prop, value)

    },

    // 拦截删除属性

    deleteProperty (target, prop) {

        return Reflect.deleteProperty(target, prop)

    }

})

六. 如何看待 Composition API 和 Options API

composition API 优点：

更好的代码组织

更好的逻辑复用

更好的类型推导

不建议共用，会引起混乱

小型项目，业务逻辑简单，用 Options API

中大型项目，逻辑复杂，用 Composition API

七.如何理解 ref、toRef 和 toRefs

Ref  生成值类型的响应式数据

可用于模板和 reactive

通过 .value 修改值

ToRef

针对一个响应式对象（reactive 封装）的 prop

创建一个 ref，具有响应式

两者保持引用关系

Torefs

将响应式对象（reactive 封装）转换为普通对象

对象的每个 prop 都是对应的 ref

两者保持引用关系

八. watch 和 watchEffect 的区别

两者都可监听 data 属性变化

watch 需要明确监听哪个属性

默认是惰性执行，监听源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref

watchEffect 会根据其中的属性，自动监听其变化

九.setup如何获取组件实例

在 setup 和其他 Composition API 中没有 this

可通过 getCurrentInstance 获取当前实例

若用 Options API 可照常使用 this

十.vite是什么  为何启动快

一个前端打包工具，Vue 作者发起的项目

借助 Vue 的影响力，发展较快，和 webpack 竞争

优势：开发环境下无需打包，启动快

启动快的原因

开发环境使用 ES6 Module，无需打包——非常快

生成环境使用 rollup，并不会快很多

十一. Composition API 和 React Hooks 对比

Composition API setup 只会被调用一次，React Hooks 函数（组件）会被多次调用

Composition API 无需 useMemo、useCallback，因为 setup 只调用一次

Composition API 无需顾虑调用顺序，React Hooks 需要保证 hooks 的顺序一致（不能放到循环里、判断里，必须放在最外层的顺序代码里）

Composition API reactive + ref 比 React Hooks 的 useState 要难理解