一文带你了解typeScript
typeScript
分章节阅读目录链接：typeScript系列学习文章目录
- typeScript数据类型
- 解释
- typeScript函数
- 函数定义
- 参数
- 函数重载
- Lambda函数
- typeScript类
- 类的定义
- 继承
- 类里面的修饰符
- 静态属性静态方法
- 多态
- 抽象类
- typeScript接口
- 属性接口
- 函数类型接口
- 可索引接口
- 类类型接口
- 接口扩展
- typeScript中的泛型
- 泛型的定义
- 泛型函数
- 泛型类
- 泛型接口
- 模块
- 模块的的概念
- 模块导出的几种方法
- 命名空间
- 装饰器
- 类装饰器
- 属性装饰器
- 方法装饰器
- 参数装饰器
- 声明文件
typeScript数据类型
布尔类型（boolean）
数字类型（number）
字符串类型(string)
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null 和 undefined
void类型
never类型
解释
字符串类型(string)
var str:string = "fur"
str = "furfur"
console.log(str)//furfur
数组类型（array）
//写法一
var arr:number[] = [1,2,3]
console.log(arr)//[ 1, 2, 3 ]
//写法二
var arr:Array<number> = [1,2,3]
console.log(arr)//[ 1, 2, 3 ]
**元组类型（tuple）**属于数组的一种。
var arr:[string,number] = ["fur",1]
console.log(arr)//[ "fur", 1 ]
枚举类型（enum）
枚举方法：事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，用这种方法定义的类型称枚举类型。（就是起一个通俗易懂的别名）
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
} ;
enum Flag{
success = 1,
error = 0,
}
let s:Flag = Flag.success
console.log(s)//1
任意类型（any）：相当于没有类型限制
var num:any=123;
num='str';
num=true;
console.log(num)
null 和 undefined是其他（never类型）数据类型的子类型
var num1:number
var num2:undefined
var num3:null=null
console.log(num1)//编译器报错
console.log(num2)//undefined
console.log(num3)//null
void类型：表示没有任何类型，一般用于定义方法的时候方法没有返回值。
function play():void{
console.log("fur")
}
play()
never类型：表示的是那些永不存在的值的类型。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。通常表现为抛出异常或无法执行到终止点（例如无线循环）。
let x: never;
let y: number;
// 编译错误，数字类型不能转为 never 类型
x = 123;
// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
上述never部分的理解参考自文章：https://segmentfault.com/a/1190000008893626
联合类型
联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
var val:string|number
val = 1
console.log(typeof(val)) //number
val = "fur"
console.log(typeof(val)) //string
typeScript函数
函数的定义
可选参数，默认参数，剩余参数
函数重载
箭头函数 es6
函数定义
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
语法格式如下所示：
function run():void{
// 执行代码
}
var run = function ():void{
// 执行代码
}
参数
方法传参
var run = function (name:string):string{
// 执行代码
return`${name}在跑步`
}
console.log(run("fur"))//fur在跑步
可选参数
es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
注意：可选参数必须配置到参数的最后面
var run = function (name:string,sex?:string):string{
// 执行代码
if(sex){
return`${name}在跑步---${sex}`
}else{
return`${name}在跑步`
}
}
console.log(run("fur"))//fur在跑步
console.log(run("fur","女"))//fur在跑步---女
默认参数
es5里面没法设置默认参数，es6和ts中都可以设置默认参数
var run = function (name:string,sex:string="女"):string{
// 执行代码
if(sex){
return`${name}在跑步---${sex}`
}else{
return`${name}在跑步`
}
}
console.log(run("fur"))//fur在跑步---女
console.log(run("fur","男"))//fur在跑步---男
剩余参数
...三点运算符，接受新参传过来的值
function sum(...arr:number[]):number{
var item = 0;
var sum = 0;
for(item of arr){
sum+=item
}
return sum;
}
console.log(sum(1,2,3,4,5,6))//21
console.log(sum(1,2,3))//6
函数重载
java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
注意：**必须要把精确的定义放在前面，最后函数实现时，需要使用 |操作符或者?操作符，把所有可能的输入类型全部包含进去，以具体实现。**即最下面的方法需要兼容上面的方法
function run(num:number):void;
function run(str:string,flag:boolean):void;
function run(str:string,flag?:boolean):void;
function run(str:number|string,flag?:boolean):void{
if(typeof str === 'string'){
console.log("fur")
}else{
console.log(1)
}
}
run(1)
run("fur")
run("fur",true);
常见报错：This overload signature is not compatible with its implementation signature
意思：此重载签名与其实现签名不兼容，即没有满足最后的函数实现时，把所有可能输入的函数全部包含进去。
Lambda 函数
Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。
( [param1, parma2,…param n] )=>statement;
最简写法
var result = (num:number)=>num+1
console.log(result(2))//3
正常写法
var result = (num:number)=>{
//执行代码
console.log(num+1)
}
result(2)//3
typeScript 类
类描述了所创建的对象共同的属性和方法。
类的定义
继承
类里面的修饰符
静态属性 静态方法
抽象类 继承 多态
类的定义
class person {
name:string; //属性，省略public
constructor(n:string){
this.name = n
}
run():void{
console.log(this.name+"在跑步")
}
}
var p = new person("fur");
console.log(p.name)//fur
p.run()//fur在跑步
继承
关键词：extends super
run方法说明：子类继承父类方法
study方法说明：子类重写父类方法
class person {
name:string; //属性，省略public
constructor(n:string){
this.name = n
}
run():void{
console.log(this.name+"在跑步")
}
study():void{
console.log(this.name+"在学习")
}
}
class man extends person{
constructor(name:string){
super(name) /*初始化父类的构造函数*/
}
study():void{
console.log(this.name+"在学习-子类")
}
}
var p = new person("fur");
console.log(p.name)//fur
p.run()//fur在跑步
var m = new man("furfur");
console.log(m.name)//furfur
m.run()//furfur在跑步(继承父类的run)
m.study()//furfur在学习-子类(重写父类study)
对比es5的继承有很大的改善，es5继承
类里面的修饰符
类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符
-
public : 公有，在当前类里面、 子类 、类外面都可以访问
-
protected：保护类型，在当前类里面、子类里面可以访问 ，在类外部没法访问
-
private ：私有，在当前类里面可以访问，子类、类外部都没法访问
例子：
class person {
private name:string;
constructor(n:string){
this.name = n
}
protected run():void{
console.log(this.name+"在跑步")//正确，private只能在类“person”中访问
}
public study():void{
console.log(this.name+"在学习")
}
}
class man extends person{
constructor(name:string){
super(name) /*初始化父类的构造函数*/
}
protected run():void{
super.run() // 正确，protected只能在类“person”及其子类中访问。
}
}
var p = new person("fur");
// console.log(p.name)//报错：属性“name”为私有属性，只能在类“person”中访问。
// p.run()//报错：属性“run”受保护protected，只能在类“person”及其子类中访问。
p.study()//furfur在学习
var m = new man("furfur");
// console.log(m.name)//报错：属性“name”为私有属性，只能在类“person”中访问。
// m.run()//报错：属性“run”受保护protected，只能在类“man”及其子类中访问。
m.study()//furfur在学习
静态属性 静态方法
关键词：static
class person {
name:string;
static age = 1
constructor(n:string){
this.name = n
}
// static run():void{
// console.log(this.name+"在跑步")//静态方法 里面没法直接调用类里面的非静态属性
// }
static getAge():void{
console.log(this.age)
}
}
person.age=1
person.getAge()
多态
多态:父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现，多态属于继承
例子：person中的paly方法，子类man和woman有各自的具体方法
class person {
name:string;
age = 1
constructor(n:string){
this.name = n
}
play():void{
console.log("玩法")
}
}
class man extends person{
constructor(name:string){
super(name)
}
play():void{
console.log(`${this.name} lol`)
}
}
class woman extends person{
constructor(name:string){
super(name)
}
play():void{
console.log(`${this.name} shopping`)
}
}
var m = new man("boy")
m.play()//boy lol
var w = new woman("girl")
w.play()//girlshopping
抽象类
typescript中的抽象类：抽象类和抽象方法用来定义标准 。它是提供其他类继承的基类，不能直接被实例化。
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。abstract抽象方法只能放在抽象类里面。
抽象类的子类必须实现抽象类里面的抽象方法，否则仍然要作为一个抽象类。
abstract class person {
name:string;
age = 1
constructor(n:string){
this.name = n
}
abstract play():void;
}
class man extends person{
constructor(name:string){
super(name)
}
play():void{
console.log(`${this.name} lol`)
}
}
class woman extends person{
constructor(name:string){
super(name)
}
play():void{
console.log(`${this.name} shopping`)
}
}
var m = new man("boy")
m.play()//boy lol
var w = new woman("girl")
w.play()//girlshopping
typeScript接口
属性类接口
函数类型接口
可索引接口
类类型接口
接口扩展
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。
接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。
typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
接口：行为和动作的规范，对批量方法进行约束
属性接口
对json的约束
interface Person {
name:string;
age:number;
sex?:string//可选属性
}
function printPerson (p:Person){
if(p.sex){
console.log(`${p.name}年龄${p.age} 性别${p.sex}`)
}else{
console.log(`${p.name}年龄${p.age}`)
}
}
//写法一
printPerson({name:"fur",age:1})//fur年龄1
printPerson({name:"fur",age:1,sex:"girl"})//fur年龄1 性别girl
//写法二
var obj:Person = {
name:"furfur",
age:2,
sex:"girl"
}
printPerson(obj)//furfur年龄2 性别girlrfur年龄2 性别girl
函数类型接口
对方法传入的参数 以及返回值进行约束，批量约束
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
//模拟操作
return key+value;
}
console.log(md5('name','fur'));//namefur
可索引接口
数组、对象的约束
//对数组的约束
interface Arr {
[index:number]:string;
}
var arr1:Arr = ["1","2","3"]
//对对象的约束
interface Obj {
[index:string]:string
}
var arr2:Obj = {name:"fur",age:"1"}
类类型接口
对类的约束和抽象类抽象有点相似
class person {
name:string;
constructor(n:string){
this.name = n
}
play():void{
}
}
class man implements person{
name: string;
constructor(name:string){
this.name = name;
}
play():void{
console.log(`${this.name} lol`)
}
}
class woman implements person{
name: string;
constructor(name:string){
this.name = name;
}
play():void{
console.log(`${this.name} shopping`)
}
}
var m = new man("boy")
m.play()//boy lol
var w = new woman("girl")
w.play()//girlshopping
接口扩展
接口可以继承接口
例子：接口person继承接口Animal，man实现接口person同时也要实现Animal
class Animal{
eat():void{
}
}
class person extends Animal{
play():void{
}
}
class man implements person{
eat():void {
console.log('吃粮食')
}
play():void{
console.log('玩游戏')
}
}
typeScript中的泛型
泛型的定义
泛型函数
泛型类
泛型接口
泛型：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
通俗理解：泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)
泛型的定义
泛型：可以支持不特定的数据类型， 要求：传入的参数和返回的参数一致
可以用T表示泛型，具体什么类型是调用这个方法的时候决定的
泛型函数
function getData<T>(val:T):T{
return val
}
console.log(getData<number>(1))//1
console.log(getData<string>("fur"))//fur
console.log(getData<boolean>(true))//true
泛型类
class MinClass<T>{
public list:T[] = []
add(val:T):void{
this.list.push(val)
}
min():T{
var minNum = this.list[0]
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum=this.list[i];
}
}
return minNum;
}
}
var mNum = new MinClass<number>();
mNum.add(8);
mNum.add(6);
mNum.add(11);
console.log(mNum.min())//6
var mStr = new MinClass<string>();
mStr.add("fur")
mStr.add("kfc")
mStr.add("mdl")
console.log(mStr.min())//fur
泛型接口
interface config<T> {
(value:T):T
}
function getData<T>(val:T):T{
return val;
}
var myData:config<string> = getData;
console.log(myData("fur"))//fur
模块
模块的的概念
“外部模块”现在则简称为“模块” 模块在其自身的作用域里执行，而不是在全局作用域里；
“内部模块”现在称做“命名空间”。
这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。
相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用 import形式之一。
模块导出的几种方法
由于浏览器端无法解析export，可以使用node运行或者用webpack打包工具打包。
导入导出方法一
export导出：
var url='xxx';
function getData():void{
console.log('fur');
}
export {url,getData};
import导入：
import {url,getData as get } from './modules/db'
//as可以更换名字，地址是export的文件的地址
console.log(url)//xxx
get()//fur
导入导出方法二
导出方法：export default 默认导出
每个模块都可以有一个default导出。 默认导出使用 default关键字标记；并且一个模块只能够有一个default导出。 需要使用一种特殊的导入形式来导入 default导出。
export导出：
function getData():void{
console.log('fur');
}
export default getData;
import导入：
import getData from './modules/db';
getData();//fur
命名空间
在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内，typeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。
命名空间内的对象通过export关键字对外暴露。
命名空间和模块的区别：
-
命名空间：内部模块，主要用于组织代码，避免命名冲突。
-
模 块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。
命名空间使用 namespace 来定义:
空间A和B内代码一模一样，可以共存，调用时还需要命名空间的名字调用
namespace A{
interface Person {
name:string;
paly():void;
}
export class man implements Person {
name: string;
constructor(n: string) {
this.name = n;
}
paly():void{
console.log("玩游戏")
}
}
}
namespace B{
interface Person {
name:string;
paly():void;
}
export class man implements Person {
name: string;
constructor(n: string) {
this.name = n;
}
paly():void{
console.log("跑步")
}
}
}
var p1 = new A.man("fur")
p1.paly()//玩游戏
var p2 = new B.man("fur")
p2.paly()//跑步
装饰器
装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。
通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）
注意：使用装饰器会报以下错误,点击快速修复或者手动在json文件里增加以下代码
"experimentalDecorators": true,
对修饰器的实验支持是一项将在将来版本中更改的功能。设置 "experimentalDecorators" 选项以删除此警告。
运行顺序：属性>方法>方法参数>类 如果有多个同样的装饰器，它会先执行后面的
类装饰器
类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
类装饰器:普通装饰器（无法传参）
function logClass(params:any){
console.log(params)
// 动态扩展属性eg
params.prototype.name = "fur"
//动态扩展方法
params.prototype.run =function(){
console.log("run")
}
}
@logClass
class Person {
study(){
console.log("study")
}
}
var p:any = new Person()
p.study()//study
console.log(p.name)//fur
p.run()//run
类装饰器:装饰器工厂（可传参）
function logClass(params:any){
return function(target:any){
target.prototype.name=params;
}
}
@logClass('furfur')
class Person {
study(){
console.log("study")
}
}
var p:any = new Person()
p.study()//study
console.log(p.name)//furfur
属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
function logProperty(params:any){
return function(target:any,attr:any){
target[attr]=params;
console.log(attr)
console.log(target)
}
}
class Person {
@logProperty("fur")
name:string|undefined;
constructor(){
}
study(){
console.log("study")
}
}
var p:any = new Person()
p.study()//study
console.log(p.name)//fur
方法装饰器
它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性描述符
function get(params:any){
return function(target:any,methodName:any,desc:any){
console.log(methodName);//getData
target.apiUrl='fur';
target.run=function(){
console.log('run');
}
}
}
class HttpClient{
public url:any |undefined;
constructor(){
}
@get('http://www.fur.com')
getData(){
console.log(this.url);
}
}
var http:any=new HttpClient();
console.log(http.apiUrl);//fur
http.run();//run
方法参数装饰器
方法参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、参数的名字。
3、参数在函数参数列表中的索引。
function logParams(params:any){
return function(target:any,methodName:any,paramsIndex:any){
console.log(params);//fur
console.log(target);//object
console.log(methodName);//getData
console.log(paramsIndex);//0
target.apiUrl=params;
}
}
class HttpClient{
public url:any |undefined;
constructor(){
}
getData(@logParams('fur') uuid:any){
console.log(uuid);
}
}
var http:any = new HttpClient();
http.getData("furfur");//furfur
console.log( http.apiUrl);//fur
声明文件
在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。
为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。
假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：
$('#foo');
// 或
jQuery('#foo');
但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：
declare var jQuery: (selector: string) => any;
jQuery('#foo');
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
上例的编译结果是：
jQuery('#foo');
声明文件
声明文件以 .d.ts 为后缀；
fur.d.ts
声明文件或模块的语法格式如下：
declare module Module_Name {
}
TypeScript 引入声明文件语法格式：
/// 当然，很多流行的第三方库的声明文件不需要我们定义了，比如 jQuery 已经有人帮我们定义好了：jQuery in DefinitelyTyped。
实例
以下定义一个第三方库来演示：
CalcThirdPartyJsLib.js 文件代码：
var Runoob;
(function(Runoob) {
var Calc = (function () {
function Calc() {
}
})
Calc.prototype.doSum = function (limit) {
var sum = 0;
for (var i = 0; i <= limit; i++) {
sum = sum + i;
}
return sum;
}
Runoob.Calc = Calc;
return Calc;
})(Runoob || (Runoob = {}));
var test = new Runoob.Calc();
如果我们想在 TypeScript 中引用上面的代码，则需要设置声明文件 Calc.d.ts，代码如下：
Calc.d.ts 文件代码：
declare module Runoob {
export class Calc {
doSum(limit:number) : number;
}
}
声明文件不包含实现，它只是类型声明，把声明文件加入到 TypeScript 中：
CalcTest.ts 文件代码：
/// 生成的 JavaScript 代码如下：
CalcTest.js 文件代码：
/// 最后我们编写一个 runoob.html 文件，引入 CalcTest.js 文件及第三方库 CalcThirdPartyJsLib.js：
浏览器打开该文件输出结果如下：
声明文件这一篇来自菜鸟教程
