TypeScript 简介

用户153873426680
101 阅读3分钟

TypeScript 简介

TypeScript 文件以 .ts 作为后缀名。在使用 TypeScript 前，需先安装 typescript 和 ts-node：

npm i -g typescript ts-node

测试 TypeScript 文件

运行以下命令即可测试 TypeScript 文件：

ts-node fileName.ts

或使用 nodemon，方便自动监测文件变更并重新运行：

nodemon fileName.ts

TypeScript 示例

TypeScript 是一种带有类型的 JavaScript，以下是简单示例：

JavaScript 类型声明：

let str = 'hello world';
let num = 0;
let bool = true;

由于 JavaScript 是弱类型语言，变量的类型会自动推断或转换，因此同一变量可以被赋值为不同的类型：

let str = 'hello world';
str = 0; // 合法，但易导致错误

TypeScript 类型声明：

在 TypeScript 中，可以通过 : 运算符明确声明变量类型：

let str: string = 'hello world';
let num: number = 0;
let bool: boolean = true;

一旦类型确定，不允许赋值为其他类型：

let str: string = 'hello world';
str = 0; // 报错

TypeScript 也支持类型推断，无需显式声明：

let str = 'hello world'; // 等价于 let str: string = 'hello world';

原始类型

TypeScript 支持 JavaScript 的原始类型：number、string、boolean、null、undefined 和 symbol：

let age: number = 18;
let uname: string = 'John';
let isLoading: boolean = true;
let a: null = null;
let b: undefined = undefined;
let s: symbol = Symbol();

symbol 是独一无二的值，适用于避免命名冲突：

let s1 = Symbol('foo');
let s2 = Symbol('foo');
console.log(s1 === s2); // false

其他类型

Any 类型
any 可以接受任何类型，但实际开发中应尽量避免使用：

let value: any = 42;
value = 'hello'; // 合法但不安全

数组类型
定义数组时，类型后加 []：

let nums: number[] = [1, 2, 3];

或用泛型语法（不推荐）：

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

联合类型
使用 | 描述多个类型：

let data: number | string = 42;
data = 'hello';

自定义类型
用 type 定义复合类型：

type NumOrString = number | string;
let value: NumOrString = 42;
value = 'hello';

接口
interface 用于定义对象的结构：

interface Person {
  name: string;
  age: number;
}
const user: Person = { name: 'Alice', age: 30 };

属性可设为可选：

interface Person {
  name: string;
  age: number;
  weight?: number;
}

函数类型
指定函数的参数及返回值类型：

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

箭头函数写法：

const sum = (a: number, b: number): number => a + b;

Vue 简介

Vue 是一款易上手的前端框架，以下介绍如何使用 Vue。

初始化项目

使用 yarn 和 vite 快速创建 Vue 项目：

yarn create vite

完成后运行 yarn 安装依赖。

目录说明

  • public: 存放公共资源（如图片），可通过 /资源路径 直接引用。

  • src: 项目主目录。

    • components: 存放 UI 组件，通常为无逻辑的展示组件。
    • assets: 存放静态资源，如样式表。
    • views: 功能组件，通常包含业务逻辑（如 API 请求）。
    • router: 路由配置文件夹。
    • store: 状态管理文件夹。

Vue 基础语法

模板渲染

Vue 使用双花括号 {{}} 进行变量插值：

<template>
  <p>{{ message }}</p>
</template>

<script setup>
let message = 'Hello, Vue!';
</script>

指令

  • 条件渲染
    使用 v-if 系列指令：
<template>
  <p v-if="score > 90">优秀</p>
  <p v-else-if="score > 60">良好</p>
  <p v-else>及格</p>
</template>

<script setup>
let score = 85;
</script>
  • 绑定指令
    v-bind 用于动态绑定元素属性，简写为 :：
<template>
  <p :id="dynamicId">{{ text }}</p>
</template>

<script setup>
let dynamicId = 'uniqueId';
let text = 'Hello!';
</script>

v-on 绑定事件，简写为 @：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
function handleClick() {
  console.log('Button clicked');
}
</script>

响应式数据

Vue 提供 ref 定义响应式数据：

<template>
  <p>{{ count }}</p>
  <button @click="increment">+1</button>
</template>

<script setup>
import { ref } from 'vue';
let count = ref(0);
function increment() {
  count.value++;
}
</script>

父子组件通信

父组件通过 props 向子组件传递数据：

<!-- Parent.vue -->
<template>
  <ChildComponent :msg="message" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
let message = 'Hello from Parent!';
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ msg }}</p>
</template>

<script setup>
defineProps({ msg: String });
</script>

总结

TypeScript 和 Vue 是现代前端开发的重要工具。TypeScript 提供了强类型支持，减少运行时错误；Vue 则以简洁、高效的方式构建用户界面。通过二者结合，可以开发出安全且功能丰富的应用。

avatar
文章
阅读
粉丝