編譯環(huán)境

TypeScript最終會被編譯成JavaScript來運行，所以我們需要搭建對應的環(huán)境。
首先我們要全局安裝typescript

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

?? 方式一：通過webpack，配置本地的TypeScript編譯環(huán)境和開啟一個本地服務(wù)，可以直接運行在瀏覽器上

1. 安裝webpack相關(guān)的依賴

使用webpack開發(fā)和打開，需要依賴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的其他相關(guān)依賴

依賴一：cross-env

這里我們用到一個插件 “cross-env” ，這個插件的作用是可以在webpack.config.js中通過 process.env.NODE_ENV 來獲取當前是開發(fā)還是生產(chǎn)環(huán)境，我們需要這個插件：

npm install cross-env -D

依賴二：ts-loader

因為我們需要解析.ts文件，所以需要依賴對應的loader：ts-loader

npm install ts-loader -D

依賴三：html-webpack-plugin

編譯后的代碼需要對應的html模塊作為它的運行環(huán)境，所以我們需要使用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中編寫代碼，之后只需要啟動服務(wù)即可：

在終端中啟動服務(wù)：npm run serve

方式一： 參考文章：

TypeScript(二)使用Webpack搭建環(huán)境

?? 方式二：通過ts-node庫，為TypeScript的運行提供執(zhí)行環(huán)境

1. 安裝ts-node

npm install ts-node -g

2. 另外ts-node需要依賴tslib和 @types/node 兩個包：

npm install tslib @types/node -g

3. 現(xiàn)在，我們可以直接通過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類型 永遠不會發(fā)生值的類型
// tuple
const tInfo: [string, number, number] = ["abc", 18, 22];export {};

函數(shù)類型

// 函數(shù)的參數(shù)類型注解
function greet(name: string) {console.log("hello" + name.toUpperCase());
}console.log(greet("world"));// 函數(shù)的返回值類型
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());
});// 函數(shù)接收的參數(shù)是一個對象 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 });// 聯(lián)合類型
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());
}// ??和!!的作用
// 將一個其他類型轉(zhuǎn)換成 boolean類型
// ?? 邏輯操作符 左側(cè)是null或者undefined時， 返回其右側(cè)操作數(shù)

函數(shù)重載

// 函數(shù)重載
// 如果編寫了一個add函數(shù)，希望可以對字符串和數(shù)字類型進行相加
// 應該如何編寫？
// 以下是錯誤方式：
// 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 {};

聯(lián)合類型和函數(shù)重載

// 聯(lián)合類型和重載
// 需求：定義一個函數(shù)，可以傳入字符串或者數(shù)組，獲取它們的長度
// 1. 聯(lián)合類型
function getLength(a: string | any[]) {return a.length;
}
// 2. 函數(shù)重載
function getLength(a: string): number;
function getLength(a: any[]): number;
function getLength(a: any) {return a.length;
}