详解Vue3.0 前的 TypeScript 最佳入门实践

详解Vue3.0 前的 TypeScript 最佳入门实践

介绍 TypeScript

TypeScript 是 JavaScript 的超集，是一种强类型的开发语言，它可以让我们在开发大型 Web 应用时提供更好的代码可读性和可维护性。TypeScript 最初由微软开发，现已经成为了开源项目，并得到了越来越多的开发者的支持。

安装 TypeScript

我们需要安装 TypeScript 的编译器，这样才能把 TypeScript 编译成浏览器中可以运行的 JavaScript 代码。
通过 npm 安装 TypeScript：

npm install -g typescript

配置 TypeScript

在配置 TypeScript 的时候，我们需要新建一个 tsconfig.json 文件，并在其中进行配置。以下是一个简单的示例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

在这个配置文件中，我们定义了编译器的一些选项。例如，target 选项指定了编译器的目标浏览器环境，module 选项指定了模块的类型，strict 选项开启严格模式，esModuleInterop 选项允许使用 CommonJS 和 ES6 的模块导入方式，sourceMap 选项开启源代码映射。include 和 exclude 选项分别指定了需要编译的和不需要编译的文件或目录。

使用 TypeScript 改写 Vue 组件

在 Vue.js 3.0 之前，我们可以使用 TypeScript 来改写 Vue 组件的代码。下面是一个简单的示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{text}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue';

export default defineComponent({
  name: 'MyComponent',
  components: {
    HelloWorld
  },
  data() {
    return {
      title: 'Hello, TypeScript!',
      text: 'This is my first TypeScript component.'
    };
  }
});
</script>

这个示例中，我们使用 import 导入了 Vue.js 的 defineComponent 函数，并使用它来定义了一个新的组件。在 components 选项中，我们注册了一个名为 HelloWorld 的子组件，然后在 data 中定义了两个属性 title 和 text，并在模板中使用了它们。

类型声明

在 TypeScript 中，我们需要给每个变量或函数定义类型。以下是一些常用的类型声明：

• 数字类型：number
• 布尔类型：boolean
• 字符串类型：string
• 数组类型：Array<T>（或 T[]），其中 T 代表数组元素的类型
• 对象类型：Object
• 元组类型：[T1, T2, ...]，其中 T1、T2 等代表不同元素的类型
• 函数类型：(arg1: T1, arg2: T2, ...) => ReturnType，其中 arg1、arg2 等代表函数的参数类型，ReturnType 代表函数的返回值类型

以下是一个示例：

let num: number = 123;
let str: string = 'hello';
let arr: Array<number> = [1, 2, 3];
let tuple: [string, number] = ['hello', 123];

function add(a: number, b: number): number {
  return a + b;
}

示例一：使用 TypeScript 改写 TodoList 组件

以下是一个使用 TypeScript 改写的 TodoList 组件的示例：

<template>
  <div>
    <h1>{{title}}</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
    <input v-model="inputValue">
    <button @click="add">添加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TodoList',
  data() {
    return {
      title: 'Todo List',
      list: ['learn TypeScript'],
      inputValue: ''
    };
  },
  methods: {
    add() {
      if (this.inputValue) {
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    },
    remove(index: number) {
      this.list.splice(index, 1);
    }
  }
});
</script>

这个示例中，我们使用了 TypeScript 来定义了 inputValue 属性的类型为 string，并将 remove 方法的参数类型为 number。
另外，需要注意的是，在 v-for 中，item 和 index 的类型也自动推导为了 string 和 number。

示例二：使用 TypeScript 编写 Node.js HTTP 服务器

以下是一个使用 TypeScript 编写的 Node.js HTTP 服务器的示例：

import * as http from 'http';

const server: http.Server = http.createServer((request: http.IncomingMessage, response: http.ServerResponse) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello, TypeScript!');
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

这个示例中，我们使用了 TypeScript 来明确了 request 和 response 参数的类型为 http.IncomingMessage 和 http.ServerResponse，并将 server 变量的类型定义为 http.Server。这样可以让代码更加清晰明了，同时也可以在开发过程中避免一些常见的错误。