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

文章目录

编译环境

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

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

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

安装webpack相关的依赖

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

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

在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"
},

添加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

配置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的运行提供执行环境

安装ts-node

npm install ts-node -g

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

npm install tslib @types/node -g

现在，我们可以直接通过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;
}