TypeScript基础篇 - TS的Helloworld和环境配置

**TypeScript 基础篇**

###1. TypeScript 的 HelloWorld首先，我们需要了解什么是 TypeScript。TypeScript 是 JavaScript 的超集，添加了类型系统和其他功能，以帮助你在大型项目中编写更好的 JavaScript代码。

下面是一个简单的 TypeScript "Hello, World!" 程序：

typescript// hello.tsconsole.log("Hello, World!");

要运行这个程序，我们需要安装 Node.js 和 TypeScript。然后，我们可以使用 `tsc` 命令来编译 TypeScript 文件：

bash# 安装 Node.js 和 TypeScriptnpm install -g typescript# 编译 hello.tstsc hello.ts

这会生成一个名为 `hello.js` 的 JavaScript 文件：

javascript// hello.jsconsole.log("Hello, World!");

我们可以使用 Node.js 来运行这个 JavaScript 文件：

bash# 运行 hello.jsnode hello.js

输出应该是 "Hello, World!"。

###2. TypeScript 环境配置####2.1 安装 TypeScript首先，我们需要安装 TypeScript。我们可以使用 npm 或 yarn 来安装：

bashnpm install -g typescript# 或者yarn global add typescript

####2.2 创建 `tsconfig.json` 文件`tsconfig.json` 是 TypeScript 的配置文件，用于指定编译选项和输出目录。我们可以使用以下命令创建一个基本的 `tsconfig.json` 文件：

bashtsc --init

这会生成一个名为 `tsconfig.json` 的文件：

json{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "outDir": "./build"
 }
}

####2.3 配置 TypeScript 编译选项我们可以在 `tsconfig.json` 文件中配置编译选项。例如，我们可以指定输出目录、目标浏览器版本等：

json{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "outDir": "./build",
 "rootDir": "./src",
 "noImplicitAny": true,
 "strictNullChecks": true,
 "esModuleInterop": true }
}

####2.4 使用 `tsc` 命令编译 TypeScript 文件我们可以使用以下命令来编译 TypeScript 文件：

bash# 编译所有 TypeScript 文件tsc# 或者# 编译指定的 TypeScript 文件tsc src/hello.ts

这会生成一个名为 `hello.js` 的 JavaScript 文件：

javascript// hello.jsconsole.log("Hello, World!");

###3. TypeScript 类型系统####3.1 基本类型TypeScript 支持以下基本类型：

* `number`
* `string`
* `boolean`
* `array` (例如 `number[]`)
* `object` (例如 `{ name: string }`)

####3.2 类型注解我们可以使用类型注解来指定变量或函数的类型：

typescript// 基本类型注解let name: string = 'John';

// 数组类型注解const numbers: number[] = [1,2,3];

// 对象类型注解interface Person {
 name: string;
 age: number;
}

const person: Person = { name: 'Jane', age:30 };

####3.3 类型推断TypeScript 支持类型推断，意味着我们不需要显式指定变量或函数的类型：

typescript// 类型推断let name = 'John';
console.log(name); // string

###4. TypeScript 接口和类####4.1 接口接口是用来定义对象结构的。我们可以使用 `interface` 关键字来定义一个接口：

typescript// 定义一个 Person 接口interface Person {
 name: string;
 age: number;
}

####4.2 类类是用来定义函数行为的。我们可以使用 `class` 关键字来定义一个类：

typescript// 定义一个 Person 类class Person {
 private _name: string;
 private _age: number;

 constructor(name: string, age: number) {
 this._name = name;
 this._age = age;
 }

 public getName(): string {
 return this._name;
 }

 public getAge(): number {
 return this._age;
 }
}

####4.3 继承我们可以使用 `extends` 关键字来继承一个类：

typescript// 定义一个 Student 类，继承自 Person 类class Student extends Person {
 private _grade: string;

 constructor(name: string, age: number, grade: string) {
 super(name, age);
 this._grade = grade;
 }

 public getGrade(): string {
 return this._grade;
 }
}

###5. TypeScript 模块和导入####5.1 模块模块是用来组织代码的。我们可以使用 `module` 关键字来定义一个模块：

typescript// 定义一个 math 模块module Math {
 export function add(a: number, b: number): number {
 return a + b;
 }

 export function subtract(a: number, b: number): number {
 return a - b;
 }
}

####5.2 导入我们可以使用 `import` 关键字来导入一个模块：

typescript// 导入 math 模块import * as Math from './math';

console.log(Math.add(1,2)); // numberconsole.log(Math.subtract(3,4)); // number

###6. TypeScript 异步编程####6.1 PromisePromise 是用来处理异步操作的。我们可以使用 `Promise` 类来定义一个 Promise：

typescript// 定义一个 Promiseconst promise = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello, World!');
 },1000);
});

promise.then((value) => {
 console.log(value); // string});

####6.2 async/awaitasync/await 是用来简化异步编程的。我们可以使用 `async` 和 `await` 关键字来定义一个异步函数：

typescript// 定义一个异步函数async function helloWorld() {
 const value = await new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello, World!');
 },1000);
 });

 console.log(value); // string}

helloWorld();

###7. TypeScript 错误处理####7.1 try-catchtry-catch 是用来捕获错误的。我们可以使用 `try` 和 `catch` 关键字来定义一个 try-catch 块：

typescript// 定义一个 try-catch 块try {
 const value =1 /0;
} catch (error) {
 console.log(error); // Error}

####7.2 finallyfinally 是用来执行一些必要的代码的。我们可以使用 `finally` 关键字来定义一个 finally 块：

typescript// 定义一个 try-catch-finally 块try {
 const value =1 /0;
} catch (error) {
 console.log(error); // Error} finally {
 console.log('Finally executed'); // string}

###8. TypeScript 类型检查####8.1 类型检查器类型检查器是用来检查代码的类型安全性的。我们可以使用 `--strict` 参数来启用类型检查器：

bash# 启用类型检查器tsc --strict hello.ts

####8.2 类型错误类型错误是指代码中存在类型不一致的问题。我们可以使用 `--strict` 参数来启用类型检查器，并且在编译时会报告类型错误：

typescript// 类型错误示例let name: string = 'John';
name =123; // Error: Type 'number' is not assignable to type 'string'.

###9. TypeScript 性能优化####9.1 缓存缓存是用来减少函数调用的次数的。我们可以使用 `cache` 函数来定义一个缓存：

typescript// 定义一个缓存函数function cache(fn: () => T) {
 const cache = new Map();

 return function (...args: any[]) {
 const key = JSON.stringify(args);
 if (cache.has(key)) {
 return cache.get(key);
 }

 const result = fn(...args);
 cache.set(key, result);

 return result;
 };
}

####9.2 memoizationmemoization 是用来减少函数调用的次数的。我们可以使用 `memoize` 函数来定义一个 memoization：

typescript// 定