返回

TypeScript语法总结+项目(Vue.js+TS)实战

前端

<h2></h2>

<p></p>

<h2>概览</h2>

<p>TypeScript是一种流行的JavaScript超集语言，它扩展了JavaScript的类型系统，使其能够在编码过程中捕获类型错误，并提供更好的代码组织和可维护性。同时，TypeScript还可以编译成纯JavaScript，以便在任何支持JavaScript的平台上运行。</p>

<h2>TypeScript语法总结</h2>

<h3>数字枚举</h3>

<p>数字枚举是一种特殊的枚举类型，其中每个成员都具有一个唯一的数字值。默认情况下，第一个成员的值为0，后面的成员值依次递增1。您还可以通过显式指定成员值来创建数字枚举。</p>

<pre>
enum Colors {
  Red,
  Green,
  Blue
}

console.log(Colors.Red); // 输出：0
console.log(Colors.Green); // 输出：1
console.log(Colors.Blue); // 输出：2
</pre>

<h3>as语法（值 as 类型）</h3>

<p>as语法可以将一个值显式转换为指定类型。这在需要将一个值临时转换为另一种类型时非常有用，例如需要将一个字符串转换为数字。</p>

<pre>
const value = "10";

const numberValue = value as number;

console.log(numberValue); // 输出：10
</pre>

<h3>尖括号语法（&lt;类型&gt;值）</h3>

<p>尖括号语法也可以将一个值显式转换为指定类型。与as语法不同的是，尖括号语法只能用于类型注解，而不能用于实际的类型转换。</p>

<pre>
const value: number = &lt;number&gt;"10";

console.log(value); // 输出：10
</pre>

<h3>类型守卫</h3>

<p>类型守卫是一种检查值是否属于特定类型的机制。TypeScript提供了多种类型守卫，包括类型断言、in运算符和instanceof运算符。</p>

<p>类型断言是最简单的一种类型守卫，它允许您显式地断言一个值属于某种类型。</p>

<pre>
const value = "10";

const numberValue = value as number;

if (typeof numberValue === "number") {
  console.log(numberValue); // 输出：10
}
</pre>

<p>in运算符可以检查一个值是否属于一个枚举类型。</p>

<pre>
enum Colors {
  Red,
  Green,
  Blue
}

const value = "Red";

if (value in Colors) {
  console.log(value); // 输出：Red
}
</pre>

<p>instanceof运算符可以检查一个值是否属于一个类类型。</p>

<pre>
class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("John");

if (person instanceof Person) {
  console.log(person.name); // 输出：John
}
</pre>

<h3>自定义类型守卫</h3>

<p>您还可以创建自己的自定义类型守卫。这可以通过定义一个函数来实现，该函数接受一个值作为参数并返回一个布尔值，表示该值是否属于特定类型。</p>

<pre>
function isNumber(value: any): value is number {
  return typeof value === "number";
}

const value = "10";

if (isNumber(value)) {
  console.log(value); // 输出：10
}
</pre>

<h3>联合类型</h3>

<p>联合类型是一种可以同时存储多种不同类型的值的类型。联合类型可以使用管道符号（|）来定义。</p>

<pre>
type PersonInfo = string | number;

const value: PersonInfo = "John Doe";

console.log(value); // 输出：John Doe
</pre>

<h3>类型别名</h3>

<p>类型别名允许您为现有类型创建一个新的名称。这在需要在代码中多次引用同一类型时非常有用。</p>

<pre>
type PersonInfo = {
  name: string;
  age: number;
};

const person: PersonInfo = {
  name: "John Doe",
  age: 30
};

console.log(person); // 输出：{ name: "John Doe", age: 30 }
</pre>

<h2>Vue.js+TS实战项目</h2>

<p>现在，让我们通过一个Vue.js+TS实战项目来巩固TypeScript的知识。</p>

<p>这个项目将是一个简单的待办事项列表。我们将使用Vue.js来构建用户界面，并使用TypeScript来编写业务逻辑。</p>

<p>首先，我们需要创建一个新的Vue.js项目。</p>

<pre>
vue create todo-app
</pre>

<p>然后，我们需要安装TypeScript。</p>

<pre>
npm install -D typescript
</pre>

<p>接下来，我们需要创建一个tsconfig.json文件来配置TypeScript。</p>

<pre>
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  }
}
</pre>

<p>现在，我们可以开始编写我们的代码了。</p>

<p>首先，我们需要创建一个新的组件来表示单个待办事项。</p>

<pre>
// TodoItem.vue
&lt;template&gt;
  &lt;li&gt;
    &lt;input type="checkbox" v-model="completed"&gt;
    &lt;label :class="{ completed: completed }"&gt;{{ text }}&lt;/label&gt;
    &lt;button @click="remove"&gt;X&lt;/button&gt;
  &lt;/li&gt;
&lt;/template&gt;

&lt;script&gt;
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    text: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    remove() {
      this.$emit('remove');
    }
  }
});
&lt;/script&gt;
</pre>

<p>接下来，我们需要创建一个新的组件来表示整个待办事项列表。</p>

<pre>
// TodoList.vue
&lt;template&gt;
  &lt;ul&gt;
    &lt;todo-item v-for="todo in todos" :key="todo.id" :text="todo.text" :completed="todo.completed" @remove="removeTodo(todo.id)"/&gt;
  &lt;/ul&gt;
&lt;/template&gt;

&lt;script&gt;
import { defineComponent } from 'vue';
import TodoItem from './TodoItem.vue';

export default defineComponent({
  components: {
    TodoItem
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        text: 'New Todo',
        completed: false
      });
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo =&gt; todo.id !== id);
    }
  }
});
&lt;/script&gt;
</pre>

<p>最后，我们需要创建一个新的App组件来启动我们的应用程序。</p>

<pre>
// App.vue
&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;todo-list/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { createApp } from 'vue';
import TodoList from './TodoList.vue';

const app = createApp