TypeScript入门与Tomcat的使用TypeScript是一种静态类型，是需要先编译再进行执行。静态类型可读

TypeScript是一种静态类型，是需要先编译再进行执行。

静态类型

可读性增强：基于语法解析WSDoc，ide增强
可维护性增强：在编译阶段可以暴露大部分错误

=>多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集

包含于兼容所有Js特性，支持共存
支持渐进式引入与升级

基础语法

基础数据类型

语法格式 ： const 变量名: 数据类型 = 值;
字符串 cosnt q: string = 'string';
数字	   const w: number = 1;
布尔值 const e: boolean = true;
null     const r: null  = null;
undefined const t: undefined = undefined;

对象数据类型

对于对象类型的命名习惯性是在开头加上一个大写的英文 I （IBytedancer）

interface IBytedancer{
  /* 只读属性:约束属性不可再对象初始化外赋值*/
  readonly jobId: number;
  
  name: string;
  sex: 'man' | 'woman' | 'other';
  age: number;
  
  /* 可选属性：定义该属性可以不存在  ?: */
  hobby?: string;
  
  /* 任意属性：约束所有对象属性都必须是该属性的子类型*/
  [key: string]: any;
}

const bytedancer: IBytedancer = {
  jobId: 1,
  name:'Lin',
  sex:'man',
  age: 28,
  hobby:'swimming',
}

/* 报错：无法分配到 "jobId" ，因为它是只读属性*/
bytedancer.jobId = 2;
/* 成功：任意属性标注下可以添加任意属性*/
bytedancer.plateform = 'data';
/* 报错：缺少属性 "name", hobby可缺省*/
const bytedancer2: IBytedancer = {
  jobId:1,
  sex:'woman',
  age:18,
}

函数类型

/* 无指定类型 */
function add(x,y){
  return x + y;
}
const mult = (x, y) => x * y;

/* 指定类型 */
function add(x: number, y: number):number{
  return x + y;
}
const mult:(x: number, y: number) => number = (x, y) => x * y;

interface IMult{
  (x: number, y: number): number;
}
const mult: IMult = (x, y) => x * y;

数组类型

/* 类型 + [] */
type IArr1 = number[];
const arr1: IArr1 = [1, 2, 3, 4];
/* 泛型表示 */
type IArr2 = Array<string | number | Record<string, number>>;
const arr2: IArr2 = ['1', 2, {a, 1}]; // 类型位置可以任意
/* 元祖表示 */
type IArr3 = [number, number, string, string];
const arr3: IArr3 = [1, 2, '3', '4'];
/* 接口表示 */
interface IArr4{
  [key: number]: any;
}										//表示number的子集什么都可以
const arr4: Iarr4 = ['string', () => null, {}, []];

TypeScript在JavaScript上的补充类型

/* 空类型，表示无赋值*/
type IEmptyFunction = () => void;
/* 任意类型，是所有类型的子类型*/
type IAnyType = any;
/* 枚举类型，支持枚举值到枚举名的正、反向映射*/
enum EnumExample{
  add = '+',
  mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';
enum EnumExample{Mon, Tue, Wed, Thu, Fri};
EnumExample['Mon'] === '1';
EnumExample['1'] === 'Mon';
/* 泛型 */
type INumArr = Array<number>;

TypeScript泛型

/* 不预先指定具体的类型，而在使用的时候在指定类型的一种特性 */
type IGetArr = <T>(Arr: T) => T[];
/* 泛型接口 & 多泛型 */
interface IX<T, U>{
  key: T;
  val: U;
}
/* 泛型类 */
class IMan<T>{
  instance: T;
}
/* 泛型别名 */ 
type ITyprArr<T> = Array<T>;

//泛型约束！！！
/* 约束泛型符合字符串(string或者stirng的子类型) */
//函数的命名格式
type IGetstringArr = <T extends string>(Arr: T) => T[];
/* 泛型默认的类型 */
//类型别名的命名格式
type IGetnumberArr<T = number> = (Arr: T) => T[];

字符串/数字字面量

/* 允许指定字符串/数字的固定值 */
type IDomTag = 'html' | 'body' | 'div' | 'span';
type IOddNumber = 1 | 3 | 5 | 7 | 9;

app 本应用根目录

static 非必要目录，约定俗成的名字，一般在此处放静态资源( css js img)；

WEB-INF必要目录，必须叫WEB-INF。受保护的资源目录，浏览器通过url不可以直接访问的目录；

classes 必要目录， src下源代码、配置文件，编译后会在该目录下。 web项目中如果没有Java源码，则该目录不会出现。

lib 必要目录，项目依赖的jar编译后会出现在该目录下，web项目要是没有依赖任何jar，则该目录不会出现。

web.xml 必要文件， web项目的基本配置文件. ，较新的版本中可以没有该文件，但是学习过程中还是需要该文件。

index.html 非必要文件， index.html/index.htm/index.jsp为默认的欢迎页；

IDEA关联本地Tomcat

IDEA中构建配置app的流程图

IDEA关联Tomcat

添加Tomcat 服务并注意：选择文件位置为 bin文件的上一层

用IDEA开发JavaWeb服务

1.对于项目添加Tomcat依赖

添加完Tomcat后

在自己所要进行的项目中双击 shift 查找 add，并选择添加框架支持

将Web应用服务添加Web应用程序款框架

删除.jsp文件(不再使用)

java代码放在src文件中。 html、css、js 放在web文件中。

注意3点

1.配置文件的文件夹 resoures 需要如图操作

2.导入的jar包必须要在WEB-INF下导入，并且文件夹必须为lib，

并对lib文件夹添加为库，选择添加为模块库（如果添加为项目库会范围过大）

用IDEA构建WEB项目

将可部署的APP部署到Tomcat中

先进行编辑配置添加Tomcat 本地服务

进行部署文件

IDEA运行项目后

TypeScript入门与Tomcat的使用