TypeScript入门基础介绍
TypeScript 是一种由 Microsoft 开发的编程语言,它是 JavaScript 的一个超集。它扩展了 JavaScript 的语法,添加了强类型定义和面向对象编程的特性,并提供了更好的开发环境支持。
环境搭建
在使用 TypeScript 之前,我们需要先搭建环境。以下为搭建环境的步骤:
- 安装 Node.js
TypeScript 是运行在 Node.js 环境中的,所以需要先安装 Node.js。
- 安装 TypeScript
npm install -g typescript
这条命令会全局安装 TypeScript。
- 编辑器设置
推荐使用 Visual Studio Code 编辑器,它对 TypeScript 有很好的支持,我们只需要在项目中配置 tsconfig.json 文件。
TypeScript 语法
TypeScript 是由 JavaScript 扩展而来的编程语言。它拥有所有 JavaScript 的语法,并且拓展了一些新的特性。
变量声明
在 TypeScript 中,我们可以用 var、let 或 const 来声明变量。其中,var 是旧的声明方式,let 和 const 是 ES6 的新声明方式。
var name: string = "TypeScript";
let age: number = 10;
const year: number = 2021;
函数
在 TypeScript 中,我们使用 function 关键字来声明函数,同时可以指定函数参数类型和返回值类型。
function greet(name: string): string {
return `Hello, ${name}`;
}
类
TypeScript 允许我们使用类来实现面向对象编程。以下是一个简单的类的示例:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
接口
在 TypeScript 中,我们使用接口来定义数据类型。以下是一个接口的示例:
interface Person {
name: string;
age: number;
}
类型定义
在 TypeScript 中,我们可以使用类型定义来指定变量、函数或类的数据类型。以下是一个简单的类型定义示例:
function add(a: number, b: number): number {
return a + b;
}
示例1:使用 TypeScript 编写 Vue.js 应用程序
以下是一个使用 TypeScript 编写的 Vue.js 应用程序的示例:
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
如上代码中,我们使用 import 关键字导入 Vue.js 模块,并在应用程序中使用 Vue.js 构造函数来初始化应用程序。
示例2:使用 TypeScript 编写 Express 应用程序
以下是一个使用 TypeScript 编写的 Express 应用程序的示例:
import express from 'express'
const app = express()
app.get('/', (_req, res) => {
res.send('Hello, Express!')
})
app.listen(3000, () => {
console.log('Server is listening on port 3000...')
})
如上代码中,我们使用 import 关键字导入 Express 模块,并在应用程序中使用 express 函数来初始化应用程序。在应用程序中定义了一个路由,它响应根路由的 GET 请求,并返回 "Hello, Express!"。
以上是 TypeScript 入门基础介绍的完整攻略,包括环境搭建、TypeScript 语法、类型定义以及两个示例代码。