TypeScript的基础认识

原始数据类型

booleannumberstringnullundefinedSymbol

//空值的概念 void
function alertName(): void {
   alert('My name is Tom');
}//表示没有任何的返回值
let unusable: void = undefined;//当数据类型是void时,其值只能为undefined/null
TypeScriipt存在类型推论

1.在赋值的时候要添加类型

let num: string = 'seven';     正确写法
或者
let num: string | number;     正确写法

2.在赋值的时候不添加类型,但赋初值

let num = 'seven';   会提示错误,但会推论为string类型

3.在赋值的时候不添加类型,也不赋初值

//任意值 Any
let num;   会提示错误,类型推论为任意值 Any,可以正常给运行
num = 'seven';
num = 7;

接口 interface(对象的类型)

1、常规接口

//定义对象的类型
interface num{
   name: string;     //确定属性
   age: number;     //确定属性
}
//给who一个num的接口,并赋值(必须要和完全一致不能多也不能少)
let who: num= {
   name: 'bom',
   age: 17
};

2、可选属性和任意属性

//可选属性
interface num{
   name: string;     //确定属性
   age: number;     //确定属性
   sex?: string;     //可选属性
}
//给who一个num的接口,并赋值(必须要和完全一致不能多也不能少),可选属性可有可无
let who: num= {
   name: 'bom',
   age: 17
};

//任意属性
interface num{
   name: string;
   age: number;
   [propName: string]: any;     //任意属性
}
//给who一个num的接口,基本属性完全制止,此外可以添加任何属性
let who: num= {
   name: 'bom',
   age: 17,
   sex: 'boy'
};
  • !!!要注意的是一旦设置任意属性确定属性可选属性必须是任意属性的子属性,例如
//任意属性
interface num{
   name: string;
   age: number;
   [propName: string]: string;     //任意属性的类型为string,而age为number,编译的时候就会报错
}
let who: num= {
   name: 'bom',
   age: 17,
   sex: 'boy'
};

3、只读属性 readonly

//只读属性
interface num{
   readonly id: number;   //在第一次给num对象赋值后,不能被更改的属性
   name: string;
   age: number;
}
let who: num= {
   id: 777,
   name: 'bom',
   age: 17,
};
who.name = "mom"   //不会报错
who.id = 666;    //这里就会报错

数组的类型

let num: number[] = [1, 2, 2, 3, 5];    统一类型的数组
let num: Array<number> = [1, 2, 2, 3, 5];    统一类型的数组,泛型
let num: any[] = ['Mo chen', 23, { web: 'https://?????.com' }];   可以出现任意类型的数组

 用接口的形式表示数组
interface NumberArray {
   [index: number]: number;
}
let num: NumberArray = [1, 2, 2, 3, 5];

函数的类型

1.函数的输入和输出要做类型约束

function num(a: number, b: number): number {
   return a+ b;
};   

2.使用接口做为函数的约束

interface num {
   (a: string, b: string): boolean;
}
let myNum: num;
myNum= function(a: string, b: string) {
   return a+b === -1;
}
  • 函数的类型a: number是必须要写的; c?: number为可选; 可选参数必须接在必需参数后面!!!!
function num(a: number, b: number,c?: number): number {
   return a + b + c;
};   

3.参数默认值

function num(a: number=2, b: number): number {
   return a+ b;
};   
console.log(num(undefined,2))   //4 ,也可以给a值,就会覆盖默认值

4.剩余参数(rest 参数)

function push(array, ...items) {
   items.forEach(function(item) {
       array.push(item);
   });
}

let a = [];
push(a, 1, 2, 3);   这里调用push的时候,第一个参数就代表array,其余后面的参数就是items命名的数组

5.重载
.....

类型断言

function num(a: string | number): number {
   if ((<string>a).length) {
       return (<string>a).length;
   } else {
       return a.toString().length;
   }
}

简而言之 就是在需要断言的变量前面加<type>

声明文件(当使用第三方库的时候)

//JavaScript使用方法
$("#key1")
//或者
jquery("#key2")

//TypeScript使用方法
declare var jQuery: (selector: string) => any;//在 TypeScript 中不知道 $ 或 jQuery 是什么,需要使用 >declare 关键字来定义它的类型
jQuery('#foo');
//或者
declare var $: (selector: string) => any;
$('#foo');

可以使用 @types 来管理声明,例如Jquery

npm install @types/jquery --save-dev

在xxx.ts的文件头部将Jquery引入

import $ = require("jquery");

内置对象

1.ECMAScript 的内置对象: Boolean、Error、Date、RegExp 等

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

2.DOM 和 BOM 的内置对象: Document、HTMLElement、Event、NodeList 等

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
 // Do something
});

3.TypeScript 核心库的定义文件
....

TypeScript实用方法

类型别名(使用 type 创建类型别名)
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
   if (typeof n === 'string') {
       return n;
   } else {
       return n();
   }
}
字符串字面量类型(使用 type 创建类型别名)
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
   // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错,event 不能为 'dbclick'
元组

....

枚举

使用enum定义;如:enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

  • 普通枚举(常数项 和 计算所得项)enum
  • 常数枚举 const enum
  • 外部枚举 declare enum

类(万分重要的东西!!!)

  1. 类(Class) :定义了一件事物抽象的特点,包含了属性和方法
  2. 对象(Object):类的实例,通过 new 生成
  3. 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  1. 存取器(getter & setter):用以改变属性的读取和赋值行为
  2. 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
  3. 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  4. 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口
class Num {
   constructor(data) {       constructor定义构造函数
       this.data = data;
   }
   myData() {
       return `My data is ${this.data}`;
   }
}
let b = new Num('number');
console.log(a.myData());       // My data is number
类的继承

extends继承,super调用父类的方法和属性

class NumChild extends Num {
   constructor(data) {
       super(data);   // 调用父类的 constructor(data)
       console.log(this.data);
   }
   myData() {
       return 'Ho!, ' + super.myData(); // 调用父类的 myData()
   }
}

let c = new NumChild('number2'); // number2
console.log(c.myData()); // Ho!, My data is number2
存储器

使用getset改变属性的赋值和读取行为

class Num {
   constructor(data) {
       this.data = data;
   }
   get data() {
       return 'number';
   }
   set data(value) {
       console.log('data: ' + value);
   }
}

let a = new Num('One'); // data: One
a.data = 'Tow'; // data: Tow
console.log(a.data); // number
静态方法

使用static修饰符修饰方法要直接在类上使用,实例化后不能被使用

class Num {
   static isNum(a) {
       return a instanceof num;
   }
}
Num.isNum(a); // true
let a = new Num('mom');
a.isAnimal(a); // TypeError: a.isAnimal is not a function
ES7

可以在类里面直接定义属性

class Animal {
   name = 'Jack';

   constructor() {
       // ...
   }
}

let a = new Animal();
console.log(a.name); // Jack

可以静态属性

class Animal {
   static num = 42;

   constructor() {
       // ...
   }
}

console.log(Animal.num); // 42
public private 和 protected
  • 三种访问修饰符public(公有)、private(私有) 和 protected(受保护,与private类似只是它的子类是可以访问的)
抽象类

abstract定义抽象类和其中的抽象方法(抽象类不允许被实例化)

abstract class Animal {      这就是被abstract定义的抽象类,当它被实例化的时候会报错
   public name;
   public constructor(name) {
       this.name = name;
   }
   public abstract sayHi();     其次就是被抽象类定义的抽象方法,必须在子类中实现,不然也会报错
}
类的类型

和接口的类型定义比较类似

class Animal {
   name: string;
   constructor(name: string) {
       this.name = name;
   }
   sayHi(): string {
     return `My name is ${this.name}`;
   }
}

类实现接口

implements来实现接口对接
为什么要有接口?就是多个类共有的特性提取成特性方便使用

interface Alarm {      第一个接口
   alert();
}

interface Light {        第二个接口
   lightOn();
   lightOff();
}

class Door {            类
}

class SecurityDoor extends Door implements Alarm,Light {       类继承类对接接口
   alert() {
       console.log('SecurityDoor alert');
   }
   lightOn() {
       console.log('Car light on');
   }
   lightOff() {
       console.log('Car light off');
   }
}

class Car implements Alarm {                     类对接口
   alert() {
       console.log('Car alert');
   }
}

接口与接口之间有继承关系(extends)

interface Alarm {
   alert();
}

interface LightableAlarm extends Alarm {
   lightOn();
   lightOff();
}

接口继承类....
混合类型....

声明合并

*以上是个人总结,希望能对大家有所帮助。更详细更具体的可以参考TypeScript 入门教程

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容