TypeScript学习笔记（一）编译环境、数据类型、函数类型、联合类型

编译环境

TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境。
首先我们要全局安装typescript

# 安装命令
npm install typescript -g
# 查看版本
tsc --version

⭐️ 方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上

1. 安装webpack相关的依赖

使用webpack开发和打开，需要依赖webpack、webpack-cli、webpack-dev-server

npm install webpack webpack-cli webpack-dev-server -D

2. 在package.json中添加启动命令

为了方便启动webpack，我们在package.json中添加如下启动命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
},

3. 添加webpack的其他相关依赖

依赖一：cross-env

这里我们用到一个插件 “cross-env” ，这个插件的作用是可以在webpack.config.js中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境，我们需要这个插件：

npm install cross-env -D

依赖二：ts-loader

因为我们需要解析.ts文件，所以需要依赖对应的loader：ts-loader

npm install ts-loader -D

依赖三：html-webpack-plugin

编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中：

npm install html-webpack-plugin -D

4. 配置webpack.config.js文件

const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.ts",output: {filename: "build.js",},resolve: {extensions: [".tsx", ".ts", ".js"],},module: {rules: [{test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/,},],},devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",devServer: {static: "./dist",// stats: "errors-only",compress: false,host: "localhost",port: 8080,},plugins: [new HtmlWebpackPlugin({template: "./index.html",}),],
};

下面我们就可以愉快的在main.ts中编写代码，之后只需要启动服务即可：

在终端中启动服务：npm run serve

方式一： 参考文章：

TypeScript(二)使用Webpack搭建环境

⭐️ 方式二：通过ts-node库，为TypeScript的运行提供执行环境

1. 安装ts-node

npm install ts-node -g

2. 另外ts-node需要依赖tslib和 @types/node 两个包：

npm install tslib @types/node -g

3. 现在，我们可以直接通过ts-node来运行TypeScript的代码

ts-node math.ts

基本类型

// number类型
let num: number = 100;
// string类型
let msg: string = "abc"; // 一般这种可以不写类型注解
// boolean类型
let flag: boolean = true;
// null undefined
let n: null = null;
let u: undefined = undefined;// Array类型
let arr1: string[] = ["abc", "123"];
let arr2: Array<string> = ["aaaa", "ccc"];// Object类型
let obj: {name: string;age: number;
} = {name: "zhangsan",age: 18,
};
console.log(obj.age);// Symbol类型
const s1: symbol = Symbol("title");
const s2: symbol = Symbol("title");const person = {[s1]: "程序员",[s2]: "老师",
};

// any
let a: any = "why";
a = 123;let flag = true;
function foo(): string {return "foo";
}
function bar(): number {return 123;
}
// unknow
let result: unknown;
if (flag) {result = foo();
} else {result = bar();
}// void
function sum(num1: number, num2: number): void {console.log(num1 + num2);
}
// never类型 永远不会发生值的类型
// tuple
const tInfo: [string, number, number] = ["abc", 18, 22];export {};

函数类型

// 函数的参数类型注解
function greet(name: string) {console.log("hello" + name.toUpperCase());
}console.log(greet("world"));// 函数的返回值类型
function sum(num1: number, num2: number): number {return num1 + num2;
}const names = ["abc", "cba", "nba"];
// 并未指定item的类型 但是item是string类型
names.forEach((item) => {console.log(item.toUpperCase());
});// 函数接收的参数是一个对象 z?可选类型
function printCoordinate(point: { x: number; y: number; z?: number }) {console.log("x坐标", point.x);console.log("y坐标", point.y);
}
printCoordinate({ x: 10, y: 30 });// 联合类型
type ID = number | string;
// function printId(id: number | string) {
function printId(id: ID) {console.log("你的id是：", id);
}
printId(10);
printId("abc");// 类型断言
const myEl = document.getElementById("my-img") as HTMLElement;
// const myEl = document.getElementById("my-img") as HTMLImageElement;// 非空类型断言! 确定某个标识符是有值的
function printMsg(message?: string) {console.log(message!.toUpperCase());
}// ??和!!的作用
// 将一个其他类型转换成 boolean类型
// ?? 逻辑操作符 左侧是null或者undefined时， 返回其右侧操作数

函数重载

// 函数重载
// 如果编写了一个add函数，希望可以对字符串和数字类型进行相加
// 应该如何编写？
// 以下是错误方式：
// function sum(a1: number | string, a2: number | string): number | string {
//   return a1 + a2;
// }// 正确方式：
function sum(a1: number, a2: number): number;
function sum(a1: string, a2: string): string;
function sum(a1: any, a2: any): any {return a1 + a2;
}
console.log(sum(10, 20));
console.log(sum("aa", "bb"));export {};

联合类型和函数重载

// 联合类型和重载
// 需求：定义一个函数，可以传入字符串或者数组，获取它们的长度
// 1. 联合类型
function getLength(a: string | any[]) {return a.length;
}
// 2. 函数重载
function getLength(a: string): number;
function getLength(a: any[]): number;
function getLength(a: any) {return a.length;
}