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((<string> 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<number> = [ '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<T>(a:T):T{...} // 定义泛型<T> 可以是参数类型 a:T也可以是返回值类型 ():T
function fn<T,K>(a:T, b:K) {...} // 可定义多个泛型
function fn<T extends 接口或类> (a:T) {...} // 可指定泛型为那些类的子类
泛型名称：任意，定义后参数和返回值才能使用
2. 调用泛型函数
fn(10); 直接使用，参数可自动推断类型。
fn<string>("10"); 指定泛型类型，调用函数
fn<string, number>("10", 1); 多泛型函数调用
3. 类的泛型
class 类名 <T> {
name:T;
constructor(name:T) { this.name = name }
}
调用 const a = new 类<T>(参数);
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 // 可指定入口文件，打包文件所在目录，指定打包规则文章来源：https://www.toymoban.com/news/detail-523187.html
scripts：{ build : "webpack" } // 通过build命令执行程序，npm run build 文章来源地址https://www.toymoban.com/news/detail-523187.html
到了这里，关于TypeScript学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
