1.初步认识 TypeScript

Posted 2023-04-02 upward_tomato

初步认识 TypeScript

1.什么是 TypeScript？

• TypeScript 是具有类型语法的 javascript。
• TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为您提供任何规模的更好工具。

微软出品（大厂有保障）

2.为什么要学习 TypeScript？

• 很多比较流行的框架库中使用的就是 ts；
• 工作项目中使用到了 ts；（找工作要求会 ts）

我们可以把它看做一个需要掌握的基础技能。

3.TypeScript 主要的作用

规范我们 js 中的类型

• 变量的类型；
• 函数的形参和返回值的类型；

4. 学习 TypeScript 的目标是什么？

• 基础的使用；
• 在项目能够熟练使用；
• 能够阅读使用 ts 编写的库的源码；
• 深入学习（进阶）

typescript使用 TypeScript 开发 Vue 组件

使用 TypeScript 开发 Vue 应用程序时，定义组件有两种方式:

• Options Api
• class Api

基本用法 （Options Api）

要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件：

import Vue from \'vue\'
const Component = Vue.extend({
  // 类型推断已启用
})

const Component = {
  // 这里不会有类型推断，
  // 因为 TypeScript 不能确认这是 Vue 组件的选项
}

在单文件组件中:

1. script要加上lang=\'ts\'
2. import Vue from \'vue\'
3. 导出组件时要使用Vue.extend定义

// 1. 要加上`lang=\'ts\'`
<script lang=\'ts\'>
// 2. 导入vue模块
import Vue from \'vue\'

// 3. 定义并导出一个组件 vue.extend({})
export default Vue.extend({   
    // 中间内容与之前写法一样，之前放什么，extend对象中放什么
})
</script>

基于类的 Vue 组件（class Api）

如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器：

import Vue from \'vue\'
import Component from \'vue-class-component\'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: \'<button @click="onClick">Click!</button>\'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的 property
  message: string = \'Hello!\'

  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

参考

• https://cn.vuejs.org/v2/guide...