TypeScript学习笔记

1. 数据类型

1.1 声明

let num [:number] = 10; // 以冒号加类型的方式，声明变量

1.2 JS原始数据类型

1.2.1 基本类型

1 number 2 string 3 boolean 4 null 5 undifined

1 数值 number let num :number = 10; 

二进制 = 0b1010; 八进制 = 0o18; 十六进制 = 0xabc;

2 字符串 string 例 let str:string = 'abc';

3 布尔 boolean // let flag:boolean = true;

4 空 null // let nul:null = null; //几乎不会这么用

5 未声明 undefined // let un:undefined=undefined // 几乎不会这么用

1.2.2 引用类型

1 array 2 object

1 数组 array // let arr:number[] = [1,2,3]  // let strs:string[]=['a','b','c']

2 对象 object // let obj:object = { name:string, age:number }

   对象可选属性{ name:string, age?:number}

1.3 TS数据类型

1 any 任意类型 // let a:any=123; a='123' 可付多种类型，相当于关闭ts类型检查。

2 unknown 未知 // unknown不可直接赋值，通过判断 if(typeof str ==="string") 之后赋值

3 void 无返回值 // 默认返回 undefined, function xx() : void { ... }

4 never 没有返回值 // 以 throw new Error("..")结束等函数

5 tuple 元祖 // 定长数组  let p : [string, string] 

6 enum 枚举 // enum Enu1{ A=1, B=2}; obj={type1: Enu1}

7 字面量 // let a:"ab" 该值只能是“ab”

1.4 类型推断

let num  =1 ; // ts类型推断默认 num是number类型

let a; // 未赋值ts默认any类型

1.5 联合类型

let b:boolean | number =1; // 后续b可赋值为true

let o:{name:string} & {age:number} // o的名称赋值string, age赋值number,其他任意

1.6 类型别名

type RString = string; // 后续可使用RString类型， let st:RString = 'ab1';

type RObj = { name:string, ...} // 后续可使用RObj类型, let obj1:RObj = { name:'张三' ,...}

1.7 约束取值（字面量）

type TypeString = "值1" | "内容1" | "字1";

let a: TypeString = "值1"; // 只能是3个值中的一个

1.8 函数类型

1 函数参数 // function 函数名(参数: 类型) {...}  // function xx( str: string ) { ... }

2 可选参数 // function xx(a?:string) {... }  // 使用 xx(),  xx('sss'); // 可选参数之后不能有参数

3 默认参数 // function xx(a:string="aa"){...}  // 不传参数 a默认为“aa”

4 剩余参数 // funcion xx(...a:string){...} // 可传多个或不传，xx(); xx('a', 'b');

5 返回值 // function xx() : boolean {... }  // function xx() : string{... }

1.9 类型断言

1 变量 as 类型

function xx(a:string | number) { if((a as string).length) // 如果a是字符串判断长度

2 <类型> 变量

function xx(a:string | number) { if(( a).length) // 如果a是字符串判断长度

3 返回值

function fun() { return any; };  let f = fun() as number; // 指定返回值类型

2. 面向对象

2.1 类

类的属性之间用分号分割

2.1.1 类的属性

class 类名{ 

  属性名 [:类型] = 默认值； // 普通属性，new实例之后，属性可用

  static 属性名 [:类型] = 默认值； //静态属性，直接类名.属性调用

  readonly 属性名 [:类型] = 默认值； //只读属性，不可更改

  函数名() {... }

}

2.1.2 类的构造器

class 类名{

  name:string;

  constructor(name:string) {

    this.name = name;

  }

}

构造函数简写, 可不定义全局属性，不写赋值语句。

class 类名 {

  constructor(public name: string){ 

  }

}

2.1.3 类的继承

class 父类{ ... }

class 子类 extends 父类{

    方法1() { 父类没有的方法，相当于子类自己追加}

    方法2() { 父类同名方法，相当于覆盖 }

}

2.1.4 super关键字

可以在子类覆盖的方法中使用，super.父方法。

父构造器必须初始化参数时，字构造器必须super.父构造器传参。

2.2 抽象类

abstract class 类{

  // 与正常类一样，不能通过new 来创建实例

  方法1() : void { ... } // 通常方法，子类可直接继承使用

  abstract 方法2() : void ; // 定义抽象方法，子类必须继承重写。

}

2.3 接口

1. 对象接口

定义：interface Person { name:string, age:number }

实现：let p: Person = { name: '张' , age: 18 }

可选属性：interface Person { name:string, age?:number }

实现可选：let p: Person = { name: '张' } // 可选属性可有可无

任意属性：interface Persion { [propName:string] : number } 

实现任意：let p: Person = { aa:1 };  let p: Person={ bb:2 } // 任意属性名随意指定

注释：不可以添加接口没有的属性

2. 类接口

定义：interface 接口 { name:string;  age:number; fun() }

3. 数组接口

定义：interface Array{ [index:number] : string } // 数值的键，字符串的值

实现：let arr:Array = [ 'a', 'b', 'c' ];

4. 函数接口

定义：interface Fun{ (a:string) : boolean } // 参数为字符串a, 返回值是boolean的函数

实现：const fun1:Fun = function(a:string):boolean { ... };

同名接口可以定义多个，实现类需要满足所有接口的属性和方法。

接口与type的区别是，接口方法属性都是抽象的。

2.4 属性访问权限

class xx{

  public 属性名:类型； // 公开的，外部可更改值，public可省略。

  private  属性名:类型； // 私有的，只有内部可改值，不能被继承。

  proteced  属性名:类型； // 保护的，只有当前类和子类内部可使用。

  getName();

  setName(str:string);

}

getName(){return xxx}; // new对象后 对象.getName()调用

get name(){return xxx}; // new对象后 对象.name 获取值，不用加括号。

setName(str:string){ ... } // new对象后 对象.setName(参数)使用

set name(str:string){ ... } // new对象后 （对象.name = 值） 赋值

2.5 泛型

1. 函数泛型定义

function fn(a:T):T{...} // 定义泛型 可以是参数类型 a:T也可以是返回值类型 ():T

function fn(a:T, b:K) {...} // 可定义多个泛型

function fn<T extends 接口或类> (a:T) {...} // 可指定泛型为那些类的子类

泛型名称：任意，定义后参数和返回值才能使用

2. 调用泛型函数

fn(10); 直接使用，参数可自动推断类型。

fn("10"); 指定泛型类型，调用函数

fn("10", 1); 多泛型函数调用

3. 类的泛型

class 类名 {

  name:T;

  constructor(name:T) { this.name = name }

}

调用 const a = new 类(参数);

3. 开发环境

ts底层运行的还是js，避免js的类型错误。

ts不能直接运行，需要编译成js代码，才能执行。

3.1 搭建开发环境

1 安装node.js

2 命令安装 npm install -g -typescript

3 创建 .ts 文件

4 使用 tsc编译ts文件，在ts文件目录执行 tsc xxx.ts进行手动编译。

3.2 编译选项

tsc xxx.ts  // 手动编译，每次修改ts文件需要重新编译

tsc xxx.ts w // 监视ts文件，修改文件自动编译，每个文件一个窗口，关闭窗口监视取消。

tsconfig.json文件 //配置ts项目文件夹下的tsconfig.json文件 {} 空内容，输入tsc，全部ts编译。

tsc --init  // 可生成tsconfig.json文件

3.3 tsconfig.json配置

include: ["./xxx", "./xxx" ]  // 指定多个编译路径

exclude:["./xxx, "./xxx" ] // 指定不编译路径

3.3.1 compilerOptions编译器选项

target // 指定es版本，默认es3，影响编译成的js

lib // 一般不该，浏览器运行不设置，node环境运行需设置

module // 指定模块化对象 可import 对象

outDir // js生成目录 ./文件夹

outFile // js编译后合成一个文件 ./文件夹/文件.js。合并有冲突 指定moudile为system

allowJs // 是否编译js文件，默认false

checkJs // 是否检查js 代码规范，默认false

removeComments // 是否移出注释，默认false

noEmit // 是否不生成编译后文件，默认false

noEmitOnError // 有错误不生成js文件，防止ts错误继续生成可执行js

alwaysStrict // 编译后js是严格模式，默认false

noImplicitAny // 不允许隐式any类型

strictNullChecks // 严格检查空值

strict // 上记所有检查总开关，true所有打开

4. webpackage打包

1. npm管理配置文件, npm init -y 在项目下生成 package.json

2. npm i -D(save dev) webpack webpackcli typescript ts-loader // package.json生成配置

3. 作成 webpack.config.js // 可指定入口文件，打包文件所在目录，指定打包规则

scripts：{ build : "webpack" } // 通过build命令执行程序，npm run build