关于前端:历史性的时刻华为云跨端跨框架开源组件库项目-OpenTiny-正式升级-TypeScript10-万行代码重获新生

依据《2022 前端开发市场状态调查报告》数据显示，应用 TypeScript 的人数曾经达到 84%，和 2021 年相比减少了 7 个百分点。

TypeScript 堪称逐年炽热，使用者出现逐年回升的趋势，再不学起来就说不过去。

近期 OpenTiny 做了一次大的降级，将原来运行了 9 年 的 JavaScript 代码降级到了 TypeScript，并通过 Monorepo 进行子包的治理，还在用 JavaScript 的敌人能够放松降级了，这边特意筹备了一份《JS 我的项目革新 TS 指南》文档供大家参考，顺便介绍了一些 TS 基础知识和 TS 在 Vue 中的一些实际。

通过本文你将播种：

通过理解 TS 的四大益处，压服本人下定决心学习 TS
5 分钟学习 TS 最根底和罕用的知识点，疾速入门，包教包会
理解如何在 Vue 中应用 TypeScript，给 Vue2 开发者切换到 Vue3 + TypeScript 提供最根本的参考
如何将现有的 JS 我的项目革新成 TS 我的项目

如果你没学过 TS
你的前端敌人：都 2023 年了，你还不会 TS？给你一个眼色你本人感悟吧

如果你学过 TS
你的前端敌人：哇，你们的我的项目曾经用上 Vue3 + TS 啦，看起来真棒！教教我吧

如果说下面那个益处太虚了，那上面的 3 条益处可都是实实在在能让本人受害的。

当循环一个对象数组时，对象的属性列表能够间接显示进去，不必到对象的定义中去查问该对象有哪些属性。

通过调用后盾接口获取的异步数据也能够通过 TS 类型进行智能提醒，这样相当于集成了接口文档，后续后盾批改字段，咱们很容易就能发现。

Vue 组件的属性和事件都能够智能提醒。

下图是 OpenTiny 跨端跨框架前端组件库中的 Alert 组件，当在组件标签中输出 des 时，会主动提醒 description 属性；当输出 @c 时，会主动提醒 @close 事件。

在 JS 我的项目应用不存在的对象属性，在编码阶段不容易看进去，到运行时才会报错。

在 TS 我的项目应用不存在的对象属性，在 IDE 中会有红色波浪线标记，鼠标移上去能看到具体的错误信息。

在 JS 我的项目，调用办法时拼错单词不容易被发现，要在运行时才会将谬误裸露进去。

在 TS 我的项目会有红色波浪线提醒，一眼就看出拼错单词。

你写了一个工具函数 getType 给他人用，限定参数只能是指定的字符串，这时如果应用这个函数的人传入其余字符串，就会有红色波浪线提醒。

Vue 组件也是一样的，能够限定组件 props 的类型，组件的使用者如果传入不正确的类型，将会有谬误提醒，比方：OpenTiny 的 Alert 组件，closable 只能传入 Boolean 值，如果传入一个字符串就会有谬误提醒。

以下内容尽管不多，但蕴含了理论我的项目开发中最实用的局部，对于 TS 入门者来说也是能很快学会的，基本上是有手就会写。

用得较多的类型就上面 5 个，更多类型请参考：TS 官网文档

布尔 boolean
数值 number
字符串 string
空值 void：示意没有任何返回值的函数
任意 any：示意不被类型查看

用法也很简略：

let isDone: boolean = false;

let myFavoriteNumber: number = 6;

let myName: string = 'Kagol';

function alertName(name: string): void {console.log(`My name is ${name}`);  
}

默认状况下，name 会主动类型推导成 string 类型，此时如果给它赋值为一个 number 类型的值，会呈现谬误提醒。

let name = 'Kagol'  
name = 6

如果给 name 设置 any 类型，示意不做类型查看，这时谬误提醒隐没。

let name: any = 'Kagol'  
name = 6

次要定义函数参数和返回值类型。

看一下例子：

const sum = (x: number, y: number): number => {return x + y}

以上代码蕴含以下 TS 校验规定：

调用 sum 函数时，必须传入两个参数，多一个或者少一个都不行
并且这两个参数的类型要为 number 类型
且函数的返回值为 number 类型

少参数：

多参数：

参数类型谬误：

返回值：

用问号 ? 能够示意该参数是可选的。

const sum = (x: number, y?: number): number => {return x + (y || 0);  
}  

sum(1)

如果将 y 定义为可选参数，则调用 sum 函数时能够只传入一个参数。

须要留神的是，可选参数必须接在必须参数前面。换句话说，可选参数前面不容许再呈现必须参数了。

给 y 减少默认值 0 之后，y 会主动类型推导成 number 类型，不须要加 number 类型，并且因为有默认值，也不须要加可选参数。

const sum = (x: number, y = 0): number => {return x + y}

sum(1)  
sum(1, 2)

数组类型有两种示意形式：

类型 + 方括号 表示法
泛型 表示法

// ` 类型 + 方括号 ` 表示法
let fibonacci: number[] = [1, 1, 2, 3, 5]

// 泛型表示法
let fibonacci: Array<number> = [1, 1, 2, 3, 5]

这两种都能够示意数组类型，看本人爱好进行抉择即可。

如果是类数组，则不能够用数组的形式定义类型，因为它不是真的数组，须要用 interface 进行定义


interface IArguments {[index: number]: any;
  length: number;
  callee: Function;
}

function sum() {let args: IArguments = arguments}

IArguments 类型已在 TypeScript 中内置，相似的还有很多：

let body: HTMLElement = document.body;

let allDiv: NodeList = document.querySelectorAll('div');

document.addEventListener('click', function(e: MouseEvent) {// Do something});

如果数组里的元素类型并不都是雷同的怎么办呢？

这时 any 类型就发挥作用啦啦

let list: any[] = ['OpenTiny', 112, { website: 'https://opentiny.design/'}];

接口简略了解就是一个对象的“轮廓”

interface IResourceItem {
  name: string;
  value?: string | number;
  total?: number;
  checked?: boolean;
}

接口是能够继承接口的

interface IClosableResourceItem extends IResourceItem {closable?: boolean;}

这样 IClosableResourceItem 就蕴含了 IResourceItem 属性和本人的 closable 可选属性。

接口也是能够被类实现的

interface Alarm {alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {alert() {console.log('SecurityDoor alert')
  }
}

如果类实现了一个接口，却不写具体的实现代码，则会有谬误提醒

联结类型是指取值能够为多种类型中的一种，而类型别名罕用于联结类型。

看以下例子：

// 联结类型
let myFavoriteNumber: string | number
myFavoriteNumber = 'six'
myFavoriteNumber = 6

// 类型别名
type FavoriteNumber = string | number
let myFavoriteNumber: FavoriteNumber

当 TypeScript 不确定一个联结类型的变量到底是哪个类型的时候，咱们只能拜访此联结类型的所有类型里共有的属性或办法：

function getLength(something: string | number): number {return something.length}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中，length 不是 string 和 number 的共有属性，所以会报错。

拜访 string 和 number 的共有属性是没问题的：

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

类型断言（Type Assertion）能够用来手动指定一个值的类型。

语法：值 as 类型，比方：(animal as Fish).swim()

类型断言次要有以下用处：

将一个联结类型断言为其中一个类型
将一个父类断言为更加具体的子类
将任何一个类型断言为 any
将 any 断言为一个具体的类型

咱们一个个来看。

用处 1：将一个联结类型断言为其中一个类型

interface Cat {
  name: string;
  run(): void;}

interface Fish {
  name: string;
  swim(): void;}

const animal: Cat | Fish = new Animal()
animal.swim()

animal 是一个联结类型，可能是猫 Cat，也可能是鱼 Fish，如果间接调用 swim 办法是要呈现谬误提醒的，因为猫不会游泳。

这时类型断言就派上用场啦啦，因为调用的是 swim 办法，那必定是鱼，所以间接断言为 Fish 就不会呈现谬误提醒。

const animal: Cat | Fish = new Animal()
(animal as Fish).swim()

用处 2：将一个父类断言为更加具体的子类


class ApiError extends Error {code: number = 0;}

class HttpError extends Error {statusCode: number = 200;}

function isApiError(error: Error) {if (typeof (error as ApiError).code === 'number') {return true;}
  return false;
}

ApiError 和 HttpError 都继承自 Error 父类，error 变量的类型是 Error，去取 code 变量必定是不行，因为取的是 code 变量，咱们能够间接断言为 ApiError 类型。

用处 3：将任何一个类型断言为 any

这个十分有用，看一下例子：

function getCacheData(key: string): any {return (window as any).cache[key];
}

interface Cat {
  name: string;
  run(): void;}

const tom = getCacheData('tom') as Cat;

getCacheData 是一个历史遗留函数，不是你写的，因为他返回 any 类型，就等于放弃了 TS 的类型测验，如果 tom 是一只猫，外面有 name 属性和 run() 办法，但因为返回 any 类型，tom. 是没有任何提醒的。

如果将其断言为 Cat 类型，就能够 点 出 name 属性和 run() 办法。

用处 4：将 any 断言为一个具体的类型

这个比拟常见的场景是给 window 挂在一个本人的变量和办法。

window.foo = 1;

// index.ts:1:8 - error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

(window as any).foo = 1;

因为 window 下没有 foo 变量，间接赋值会有谬误提醒，将 window 断言为 any 就没问题啦啦。

数组合并了雷同类型的对象，而元组（Tuple）合并了不同类型的对象。

let tom: [string, number] = ['Tom', 25];

给元组类型赋值时，数组每一项的类型须要和元组定义的类型对应上。

当赋值或拜访一个已知索引的元素时，会失去正确的类型：

let tom: [string, number];

tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

也能够只赋值其中一项：

let tom: [string, number];
tom[0] = 'Tom';

然而当间接对元组类型的变量进行初始化或者赋值的时候，须要提供所有元组类型中指定的项。

let tom: [string, number];
tom = ['Tom'];
// Property '1' is missing in type '[string]' but required in type '[string, number]'.

当增加越界的元素时，它的类型会被限度为元组中每个类型的联结类型：

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');

tom.push(true);
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

push 字符串和数字都能够，布尔就不行。

枚举（Enum）类型用于取值被限定在肯定范畴内的场景，比方一周只能有七天，色彩限定为红绿蓝等。

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

console.log(Days.Sun === 0) // true
console.log(Days[0] === 'Sun') // true
console.log('Days', Days)

手动赋值：未手动赋值的枚举项会接着上一个枚举项递增。

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat}

给类加上 TypeScript 的类型很简略，与接口相似：

class Animal {
  name: string
  constructor(name: string) {this.name = name}
  sayHi(welcome: string): string {return `${welcome} My name is ${this.name}`
  }
}

类的语法波及到较多概念，请参考：

https://es6.ruanyifeng.com/#docs/class
https://ts.xcatliu.com/advanced/class.html

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在应用的时候再指定类型的一种个性。

能够简略了解为定义函数时的形参。

构想以下场景，咱们有一个 print 函数，输出什么，原样打印，函数的入参和返回值类型是统一的。

一开始只须要打印字符串：

function print(arg: string): string {return arg}

前面需要变了，除了能打印字符串，还要能打印数字：

function print(arg: string | number): string | number {return arg}

如果需要又变了，要打印布尔值、对象、数组，甚至自定义的类型，怎么办，写一串联结类型？显然是不可取的，用 any？那就失去了 TS 类型校验能力，沦为 JS。

function print(arg: any): any {return arg}

解决这个问题的完满办法就是泛型！

print 前面加上一对尖括号，外面写一个 T，这个 T 就相似是一个类型的形参。

这个类型形参能够在函数入参里用，也能够在函数返回值应用，甚至也能够在函数体外面的变量、函数外面用。

function print<T>(arg: T): T {return arg}

那么实参哪里来？用的时候传进来！

const res = print<number>(123)

咱们还能够应用泛型来束缚后端接口参数类型。

import axios from 'axios'

interface API {
  '/book/detail': {id: number,},
  '/book/comment': {
      id: number
      comment: string
  }
  ...
}

function request<T extends keyof API>(url: T, obj: API[T]) {return axios.post(url, obj)
}

request('/book/comment', {
  id: 1,
  comment: '十分棒！'
})

以上代码对接口进行了束缚：

url 只能是 API 中定义过的，其余 url 都会提醒谬误

接口参数 obj 必须和 url 能对应上，不能少属性，属性类型也不能错

而且调用 request 办法时，也会提醒 url 能够抉择哪些

如果后盾改了接口参数名，咱们一眼就看进去了，都不必去找接口文档，是不是很厉害！

泛型的例子参考了前端阿林的文章：

轻松拿下 TS 泛型

不应用 setup 语法糖

export default defineComponent({
  props: {
    items: {type: Object as PropType<IResourceItem[]>,
      default() {return []
      }
    },
    span: {
      type: Number,
      default: 4
    },
    gap: {type: [String, Number] as PropType<string | number>,
      default: '12px'
    },
    block: {
      type: Object as PropType<Component>,
      default: TvpBlock
    },
    beforeClose: Function as PropType<() => boolean>}
})

应用 setup 语法糖 – runtime 申明

import {PropType, Component} from 'vue'

const props = defineProps({
  items: {type: Object as PropType<IResourceItem[]>,
    default() {return []
    }
  },
  span: {
    type: Number,
    default: 4
  },
  gap: {type: [String, Number] as PropType<string | number>,
    default: '12px'
  },
  block: {
    type: Object as PropType<Component>,
    default: TvpBlock
  },
  beforeClose: Function as PropType<() => boolean>})

应用 setup 语法糖 – type-based 申明

import {Component, withDefaults} from 'vue'

interface Props {items: IResourceItem[]
  span: number
  gap: string | number
  block: Component
  beforeClose: () => void}

const props = withDefaults(defineProps<Props>(), {items: () => [],
  span: 4,
  gap: '12px',
  block: TvpBlock
})

IResourceItem：

interface IResourceItem {
  name: string;
  value?: string | number;
  total?: number;
  checked?: boolean;
  closable?: boolean;
}

不应用 setup 语法糖

export default defineComponent({emits: ['change', 'update'],
  setup(props, { emit}) {emit('change')
  }
})

应用 setup 语法糖

<script setup lang="ts">
// runtime
const emit = defineEmits(['change', 'update'])

// type-based
const emit = defineEmits<{(e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

默认会主动进行类型推导

import {ref} from 'vue'

// inferred type: Ref<number>
const year = ref(2020)

// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'

两种申明 ref 类型的办法

import {ref} from 'vue'
import type {Ref} from 'vue'

// 形式一
const year: Ref<string | number> = ref('2020')
year.value = 2020 // ok!

// 形式二
// resulting type: Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // ok!

默认会主动进行类型推导

import {reactive} from 'vue'

// inferred type: {title: string}
const book = reactive({title: 'Vue 3 Guide'})

应用接口定义明确的类型

import {reactive} from 'vue'

interface Book {
  title: string
  year?: number
}

const book: Book = reactive({title: 'Vue 3 Guide'})

默认会主动进行类型推导

import {ref, computed} from 'vue'

const count = ref(0)

// inferred type: ComputedRef<number>
const double = computed(() => count.value * 2)

// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

两种申明 computed 类型的办法

import {ComputedRef, computed} from 'vue'


const double: ComputedRef<number> = computed(() => {// type error if this doesn't return a number})

const double = computed<number>(() => {// type error if this doesn't return a number})

provide

import {provide, inject} from 'vue'
import type {InjectionKey} from 'vue'

// 申明 provide 的值为 string 类型
const key = Symbol() as InjectionKey<string>

provide(key, 'foo') // providing non-string value will result in error

inject

// 主动推导为 string 类型
const foo = inject(key) // type of foo: string | undefined
// 明确指定为 string 类型
const foo = inject<string>('foo') // type: string | undefined
// 减少默认值
const foo = inject<string>('foo', 'bar') // type: string
// 类型断言为 string
const foo = inject('foo') as string

<script setup lang="ts">
import {ref, onMounted} from 'vue'
const el = ref<HTMLInputElement | null>(null)
onMounted(() => {el.value?.focus()
})
</script>
<template>
  <input ref="el" />
</template>

定义一个 MyModal 组件

<!-- MyModal.vue -->
<script setup lang="ts">
import {ref} from 'vue'

const isContentShown = ref(false)
const open = () => (isContentShown.value = true)
defineExpose({open})
</script>

在 App.vue 中援用 MyModal 组件

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'

const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {modal.value?.open()
}
</script>

参考 Vue 官网文档：

TypeScript with Composition API

还是应用 JS 的同学有福啦！为了让大家疾速用上 TS，享受 TS 的丝滑体验，这里整顿了一份 《JS 我的项目革新成 TS 我的项目指南》。有了这份步骤指南，JS 我的项目转 TS 不再是难事！

新开源的 TinyVue 组件库，就应用这份 《JS 我的项目革新成 TS 我的项目指南》，胜利地由 JS 我的项目革新成了 TS 我的项目，悄悄地通知大家：

TinyVue 是一套跨端、跨框架的企业级 UI 组件库，反对 Vue 2 和 Vue 3，反对 PC 端和挪动端。
在外部通过 9 年继续打磨，服务于华为内外部上千个我的项目。
目前代码量超过 10 万行 。

这么宏大的代码量都能从 JS 转 TS，其余小规模的我的项目更是不在话下。

为了验证猜测，这边又在 GitHub 找到了一个 6 年前的 Vue2 + JS 我的项目，目前早已不再保护，打算尝试将其革新成 TS 我的项目，后果依照这份指南，也只用不超过 1 个小时就齐全搞定。

https://github.com/liangxiaojuan/vue-todos

这个我的项目的效果图长这样：

这边曾经提了 issue，看下原作者是否批准革新成 TS，批准的话，立马就是一个 PR 过来！

话不多说，大家有须要的，可间接拿走！

JS 我的项目革新成 TS 步骤：

装置 TS：npm i typescript ts-loader -D
减少 TS 配置文件：tsconfig.json
批改文件后缀名：x.js -> x.ts
x.vue 文件减少 lang：<script lang="ts">
vite.config.js 配置后缀名
降级依赖，批改本地启动和构建脚本
增加 loader / plugin 等
逐渐补充类型申明

tsconfig.ts

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

配置文件后缀名，减少 .ts 和 .tsx

extensions: ['.js', '.vue', '.json', '.ts', 'tsx'],

入口文件要由 main.js 改成 main.ts

entry: {app: './src/main.ts'},

须要配置下 loader

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {appendTsSuffixTo: [/\.vue$/]
  },
  include: [resolve('src')]
}

以及 plugin

const {VueLoaderPlugin} = require('vue-loader')

plugins: [new VueLoaderPlugin()
],

实现之后，先测试下我的项目是否能失常启动和构建：npm run dev / npm run build

都没问题之后，本次 TS 我的项目革新就实现大部分啦啦！

后续就是逐渐补充代码波及到的变量和函数的类型申明即可。

革新过程中遇到问题欢送留言探讨，心愿你也能尽快享受 TS 的丝滑开发者体验！

如果你对跨端跨框架组件库 TinyVue 感兴趣，欢送参加到 OpenTiny 的开源社区中来，一起将它建设得更好！

参加 TinyVue 组件库建设，你将播种：

间接的价值：

通过打造一个跨端、跨框架的组件库我的项目，学习最新的 Monorepo + Vite + Vue3 + TypeScript 技术
学习从 0 到 1 搭建一个本人的组件库的整套流程和方法论，包含组件库工程化、组件的设计和开发等
为本人的简历和职业生涯添彩，参加过优良的开源我的项目，这自身就是受面试官青眼的亮点
结识一群优良的、酷爱学习、酷爱开源的小伙伴，大家一起打造一个平凡的产品

久远的价值：

打造集体品牌，晋升集体影响力
造就良好的编码习惯
取得华为云 OpenTiny 开源社区的荣誉 & 认可和定制小礼物
成为 PMC & Committer 之后还能参加 OpenTiny 整个开源生态的决策和长远规划，造就本人的治理和布局能力将来有更多机会和可能

往期流动礼品及贡献者的反馈：

如果你对咱们 OpenTiny 的开源我的项目感兴趣，欢送增加小助手微信：opentiny-official，拉你进群，一起交换前端技术，一起玩开源。

OpenTiny 官网：https://opentiny.design/
OpenTiny 仓库：https://github.com/opentiny/
TinyVue 组件库：https://github.com/opentiny/tiny-vue（欢送 Star 🌟）
TinyNG 组件库：https://github.com/opentiny/ng（欢送 Star 🌟）

关于前端:历史性的时刻华为云跨端跨框架开源组件库项目-OpenTiny-正式升级-TypeScript10-万行代码重获新生

1 学习 TS 的益处

1.1 益处一：紧跟潮流：让本人看起来很酷

1.2 益处二：智能提醒：晋升开发者体验和效率

1.3 益处三：谬误标记：代码哪里有问题一眼就晓得

1.4 益处四：类型束缚：用我的代码就得听我的

2 极简 TS 根底，5 分钟学会

2.1 根本类型

2.2 函数

2.3 数组

2.4 接口

2.5 联结类型 & 类型别名

2.6 类型断言

2.7 元组

2.8 枚举

2.9 类

2.10 泛型

3 TS 在 Vue 中的实际

3.1 定义组件 props 的类型

3.2 定义 emits 类型

3.3 定义 ref 类型

3.4 定义 reactive 类型

3.5 定义 computed 类型

3.6 定义 provide/inject 类型

3.7 定义模板援用的类型

3.8 定义组件模板援用的类型

4 JS 我的项目转 TS

《JS 我的项目革新成 TS 我的项目指南》

TinyVue 招募贡献者啦

分割咱们