第一章:TypeScript 入门
1.1 TypeScript 简介
TypeScript 是 JavaScript 的一个超集,添加了类型系统。它可以让 JavaScript 代码更加健壮和易于维护。TypeScript 的设计目标是提供一个结构化编程语言,它能够编译成普通的 JavaScript,从而兼容所有现代浏览器和旧版浏览器。
1.2 TypeScript 环境搭建
首先,您需要安装 Node.js 和 npm(Node.js 包管理器)。然后,通过 npm 安装 TypeScript:
npm install -g typescript
创建一个 TypeScript 文件(例如 hello.ts),并编写以下代码:
function greet(name: string) {
return `Hello, ${name}!`;
}
console.log(greet("TypeScript"));
运行 TypeScript 编译器:
tsc hello.ts
编译成功后,您会得到一个 hello.js 文件,它可以像普通的 JavaScript 代码一样运行。
1.3 TypeScript 基础类型
TypeScript 支持多种基础类型,包括:
- 布尔类型(boolean)
- 数字类型(number)
- 字符串类型(string)
- 数组类型(array)
- 元组类型(tuple)
- 枚举类型(enum)
- 任何类型(any)
1.4 接口与类型别名
接口(interface)和类型别名(type alias)都可以用来描述对象的类型。
接口
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 30,
};
类型别名
type Person = {
name: string;
age: number;
};
const person: Person = {
name: "Alice",
age: 30,
};
第二章:Vue.js 快速入门
2.1 Vue.js 简介
Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面和单页面应用。它易于上手,同时具有高效和灵活的特点。
2.2 Vue.js 项目搭建
使用 Vue CLI 创建一个新项目:
npm install -g @vue/cli
vue create my-vue-app
2.3 Vue.js 基本语法
Vue.js 使用双大括号 {{ }} 来插入数据,使用 v-bind 或简写为 : 来绑定属性,使用 v-on 或简写为 @ 来绑定事件。
<div id="app">
<h1>{{ message }}</h1>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
第三章:React 快速入门
3.1 React 简介
React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库。它采用虚拟 DOM(Virtual DOM)技术,以提高应用的性能。
3.2 React 项目搭建
使用 Create React App 创建一个新项目:
npx create-react-app my-react-app
3.3 React 基本语法
React 使用 JSX(JavaScript XML)语法来编写 UI。组件是 React 应用的最小可复用单元。
function App() {
return (
<div>
<h1>Hello, React!</h1>
<button onClick={() => alert('Hello, world!')}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
第四章:Angular 快速入门
4.1 Angular 简介
Angular 是一个由 Google 支持的开源前端框架。它是一个完整的 MVC(Model-View-Controller)框架,可以帮助开发者快速构建复杂的应用。
4.2 Angular 项目搭建
使用 Angular CLI 创建一个新项目:
npm install -g @angular/cli
ng new my-angular-app
4.3 Angular 基本语法
Angular 使用 TypeScript 编写代码,组件是 Angular 应用的核心。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello, Angular!</h1>`
})
export class AppComponent {}
第五章:Svelte 快速入门
5.1 Svelte 简介
Svelte 是一个较新的前端框架,它通过将 JavaScript 组件转换为优化过的、可预生成的 HTML 和 CSS,从而减少应用运行时的开销。
5.2 Svelte 项目搭建
使用 Svelte CLI 创建一个新项目:
npm install -g @sveltejs/cli
svelte init my-svelte-app
5.3 Svelte 基本语法
Svelte 使用 HTML 风格的语法来编写组件。
<script>
let message = 'Hello, Svelte!';
function reverseMessage() {
message = message.split('').reverse().join('');
}
</script>
<main>
<h1>{message}</h1>
<button on:click={reverseMessage}>Reverse Message</button>
</main>
第六章:Next.js 快速入门
6.1 Next.js 简介
Next.js 是一个 React 框架,用于构建服务器端渲染(SSR)和静态站点生成(SSG)的应用。
6.2 Next.js 项目搭建
使用 Create React App 创建一个新项目:
npx create-next-app my-next-app
6.3 Next.js 基本语法
Next.js 使用 React 和 JSX 编写组件。
import React from 'react';
const Home: React.FC = () => {
return (
<div>
<h1>Hello, Next.js!</h1>
<p>This is the home page of Next.js.</p>
</div>
);
};
export default Home;
通过以上内容,您应该已经对 TypeScript 和五大前端框架有了基本的了解。祝您学习顺利!
