「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。

一、安装typescript

全局安装typescript：

npm i -g typescript

添加typescript配置文件

tsc --init

创建文件并编译创建./src/index.ts文件：

let hello: string = 'hello world';

执行编译：

tsc ./src/index.ts

编译后生成index.js文件：

var hello = 'hello world';

配置webpack环境安装依赖：

 npm i webpack webpack-cli webpack-dev-server -D

安装ts-loader和typescript依赖：

npm i ts-loader typescript -D

安装html-webpack-plugin ：

npm i html-webpack-plugin -D

安装clean-webpack-plugin：

npm i clean-webpack-plugin

安装webpack-merge:

npm i webpack-merge -D

二、ts类型

三、基础类型

基础类型: boolean、number、string、undefined、null、object、symbol、array、tuple、enum、any、void、never、联系断言。

1. boolean、number、string、undefined、null、object、symbol类型

基本写法：变量:类型

let bool: boolean = false;
let num: number = 2;
let str: string = "sss";
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let sym: symbol = Symbol("a");

2. null和undefined类型

null和undefined默认情况下是所有类型的子类型,可赋值给其他类型的变量。

let num: number = 1;
let n = null;
num = n;

如果在tsconfig.json指定了"strictNullChecks":true ，null 和 undefined 只能赋值给 void 和它们各自的类型。

3. Array类型

Array类型中所有元素类型都要与预定义的类型一致。

写法一：类型[]

let arr:number[] = [1,2,3];

写法二：数组泛型 Array<类型>

let arr:Array<number> = [1,2,3];

联合类型的数组：(类型1 | 类型2)[]

let arr2:(number | string)[];
arr2 = ['ss', 2];

4. tuple

(1) tuple类型表示一个已知元素数量和类型的数组，各元素的类型不必相同。

写法：[类型1，类型2，...]

let arr3:[string,number] = ['ss',11];

(2) 注意：元组中元素数量是固定的，以下写法会报错：

let arr4:[string,number] = ['ss',11，1];

但元组用push方法来添加元素时不会报错：

let arr3:[string,number] = ['ss',11];
arr3.push(2);
console.log(arr3); // ['ss',11,2]

(3)可选参数元组可选参数写法：参数后加问号

let arr4:[string,number?] = ['ss'];

(4) 剩余参数剩余元素代表元组类型是开放的，可以有零个或多个额外的元素。

剩余元素只能放在参数最后。

写法：...数组

let arr5:[string,...number[]] = ['ss', 1,2];

(5)只读元组

只读元组只能读，不能写。

只读元组写法：变量：readonly[类型1，类型2，...]

let arr6:readonly[string,...number[]] = ['ss', 1,2];

arr6[0] = 'qq';//报错，只读元组不能修改

typescript入门（一）