Typescript
基础类型
// 布尔 boolean
let flag:boolean = true;
// 数字类型 number
let num:number = 100;
// 字符串类型 string
let str:string = "Hello";
// 数组类型 array
let arr:number[] = [1,2,3,4,5];
let arr:Array<number> = [1,2,3,4,5];
// 元组类型 tuple(数组的增强可指定多种类型)
let arr:[string,number] = [1,"a"];
// 枚举类型 enum(用于标识状态和固定值)
enum Flag{
success=1,
error=-1
};
let f:Flag = Flag.success;
enum Color {red=2,blue,orange}; // 如果不定义值，则是其索引值
let c:Color = Color.blue; // 3，上一个值有定义则在此基础上+1
// 任意类型 any(跟js原本的变量无区别)
let str:any = "Hello";
let num:any = 123;
// null 和 undefined
let num:number | undefined;
num = 123;
// void 类型（无任何值类型，常用于方法无返回值）
function fun():void{
}
// never 从来不会出现的类型（通常不建议使用）
let num:never;
num = (()=>{
throw new Error("错误");
})();
联合类型
即允许多个类型同时存在
let val:number|string;
val = 123;
val = "Hello";
交叉类型
使用 & 符号将多个类型叠加到一起成为的一种新的类型，基包含了多个类型的所有特性。
interface Student {
id: string;
age: number;
}
interface Worker {
companyId: string;
}
type A = Student & Worker; // A 此时包含了 Student 和 Worker 特性
let x: A;
x.age = 5; // 合法
x.companyId = 'CID5241'; // 合法
x.id = 'ID3241'; // 合法
// 合并对象演示
function extend<T, U>(first: T, second: U): T & U {
let result = {} as T & U // result 是要返回结果，类型断言为 T&U
for(let id in first){ // 不能将类型 T 分配给类型 T&U，故需使用断言
result[id] = first[id] as any
}
for(let id in second){
result[id] = second[id] as any
}
return result; // 返回结果，类型是 T & U
}
class A{
constructor(public name: string){}
}
class B{
constructor(public id:number,public age:number){}
}
let c = extend(new A('Hello'), new B(100,12));
c.name; // 'Hello'
c.id; // 100
c.age; // 12
断言
断言不是类型转换，通过断言告诉编译器『我完全知道自己在干什么』
// 尖括号语法
let val: any = "this is a string";
let len: number = (<string>val).length;
// as语法
let val: any = "this is a string";
let len: number = (val as string).length;
显示赋值断言
显式赋值断言是 TS2.7 引入的一个新语法。明确告诉编译器：该属性或变量已经赋过值了。
// 用在类属性上
class C {
foo!: number;
constructor() {
this.initialize();
}
initialize() {
this.foo = 0;
}
}
// 用在变量上
let x!: number[];
initialize();
x.push(4);
function initialize() {
x = [0, 1, 2, 3];
}
函数
// 参数和返回值类型都要指定
function run(a:number, b:number):string{
return a+b.toString();
}
// 可选参数
function run(a:number, b?:number):string{
let val = b ? b : a;
return val.toString();
}
// 默认参数
function run(a:number=100):string{
return a.toString();
}
// 剩余参数（扩展运算符来接收参数）
function run(...arg:number[]):number{
let result = 0;
for(let i:number=0; i<arg.length; i++){
result += arg[i];
};
return result;
}
// 函数重载（即多个同名函数，但参数不一样。即会出现函数重载）
function run(a:string):string;
function run(a:number):string;
function run(a:string|number){
return typeof a === 'string' ? "字符" : "数字";
};
run("Hello"); // 字符
run(100); // 数字
类
/*
类的三个修饰符
---
public 公有 在类、子类、类外都可访问(默认)
protected 保护 在类、子类可访问
priveate 私有 在类可访问，子类、类外都不可访问
*/
// 类的基本结构
class Person{
name:string; // 属性，前面省略了 public 关键词
constructor(a:string){ // 构造函数
}
run():void{ // 类的方法，前面省略了 public 关键词
console.log(this.name);
}
static run():void{ // 静态方法，通过 Person.run 调用
}
}
// 类的继承
class Person1 extends Person {
constructor(a:string){
super(a); // 调用父类的构造函数
}
work():void{ // 子类自己的方法
}
}
// 多态，即父类定义一个方法不去实现，让继承它的子类去实现，每个子类有不同的表现
class Animal{
name:string;
constructor(a:string){
}
eat():void{ // 定义一个方法让子类去实现
}
}
class Dog extends Animal{
constructor(a:string){
super(a); // 调用父类的构造函数
}
eat():void{ // 子类自己实现的方法
console.log("吃骨头");
}
}
// 抽象类，即只供其它类继承使用基类，本身不能被实例化。使用 abstract 关键字定义抽象类和抽象方法
abstract class Animal{
name:string;
constructor(a:string){
this.name = a;
}
abstract eat():void; // 定义一个方法让子类去实现，abstract 方法只可在 abstract 类中
}
class Dog extends Animal{
constructor(a:string){
super(a); // 调用父类的构造函数
}
eat():void{ // 子类中必须实现父类中定义的抽象方法
console.log("吃骨头");
}
}
存取器
class A {
constructor(){}
private _name:string | undefined;
set name(str:string) {
this._name = str;
}
get name():string{
return `My name is ${this._name}`;
}
}
let a = new A();
a.name = "Andy";
a.name; // "My name is Andy"
三斜线指令
仅能放在文件的最顶端才可生效。
/// <reference path="..." />
// 常用于引入 `.d.ts`文件。用于告诉编译器在编译时要引入的额外文件
/// <reference types="node" />
// 引入到声明文件，表明这个文件使用了 @types/node/index.d.ts 里面声明的名字
/// <amd-module name="moduleName" />
// 用于指定 AMD 模块的名称（否则默认为匿名）
/// <reference no-default-lib="true"/>
// 标记为默认库，lib.d.ts 文件就有此项
/// <reference lib="es2017.string" />
// 等效于使用 -lib es2017.string 进行编译
接口
规范的定义，用于起到限制的作用。接口不关心内部状态数据，也不关心实现细节。只是限制必须提供某些方法。类于 java，同时增加了接口类型、函数、可索引、类等。
// 属性接口
interface FullName {
firstName:string;
secondName?:string; // 可选属性，该参数可传可不传
}
function fun(name:FullName):void{
console.log(name.firstName);
}
let obj = { // 传入的参数必须包含 firstName、secondName是可选的
firstName:"张",
secondName:"三"
};
fun(obj);
// 函数类型接口（对方法传入的参数以及返回值进行约束）
interface encrypt {
(key:string, value:string):string;
}
let md5:encrypt = function(key:string, value:string):string{
return key+value;
}
md5("a","b");
// 可索引接口（约束数组、对象）
interface UserArr{ // 约束数组
[index:number]:string;
}
let arr:UserArr=['a','b'];
interface UserObj{ // 约束对象
[index:string]:string
}
let obj:UserObj={name:'a'}
// 类的类型接口（对类的约束，和抽象类相似）
interface Animal{ // 约束类
name:string;
eat(str:string):void;
}
class Dog implements Animal { // 实现接口
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string):void{
}
}
// 接口扩展（接口继承接口）
interface Animal{
eat():void;
}
interface Person extends Animal { // 继承接口
work():void;
}
class Web implements Person{ // 实现接口
name:string;
constructor(name:string){
this.name = name;
}
eat():void{
}
work():void{
}
}
泛型
解决类、接口方法的复制用，并对不特定数据类型支持。
// T即是泛型，具体什么类型是调用这个方法的时候决定的
function fun<T>(value:T):T{ // 定义了传入与返回的类型一至
return value;
}
fun<number>(123); // 传入的是数字，返回也必须是数字
// 泛型类
class Min<T>{
list:T[]=[];
add(value:T):void{
this.list.push(value);
}
min():T{
let minVal = this.list[0];
for(let i:number=0; i<this.list.length; i++){
if(minVal > this.list[i]){
minVal=this.list[i];
};
};
return minVal;
}
}
let m1 = new Min<number>(); // 实例化时才决定了 T 的类型为数字
m1.add(1);
m1.add(2);
m1.min(); // 1
let m2 = new Min<string>(); // 实例化时才决定了 T 的类型为字符
m2.add("a");
m2.add("b");
m2.min(); // "a"
// 泛型接口（方式一）
interface Config{ // 定义的泛型接口
<T>(value:T):T;
}
let fun:Config = function<T>(value:T):T { // 方法实现跟接口一致
return value;
}
fun<string>("a"); // "a"，使用时才决定了其类型
fun<number>(1); // 1，使用时才决定了其类型
// 泛型接口（方式二）
interface Config<T>{ // 定义泛型接口
(value:T):T;
}
function fun<T>(value:T):T{ // 方法实现跟接口一致
return value;
}
let f:Config<string>=fun; // 决定了其类型
fun("a"); // "a"
混入 Mixins
类继承之外的一种通过可重用组件创建类的方式。通过把类当成接口，又不实现其定义的方法并具有混入类的属性及方法。
class Mixin1{ // 混入类1
constructor(public name:string){}
log1():void{
console.log("方法一",this.name);
}
}
class Mixin2{ // 混入类2
constructor(public age:number){}
log2():void{
console.log("方法二",this.age);
}
}
class A implements Mixin1,Mixin2 { // 把 Mixin1、Mixin2 当成接口
name!:string; // 定义占位，因为要实现接口中的属性
age!:number; // 定义占位，因为要实现接口中的属性
log1!:()=>void; // 定义占位，因为要实现接口中的方法
log2!:()=>void; // 定义占位，因为要实现接口中的方法
constructor(name:string, age:number){
this.name = name;
this.age = age;
}
log():void{
console.log("自身的方法");
}
}
// 混入方法，遍历 Mixins 的所有方法、属性，并复制到定义的占位目标上去
function applyMixins(base:any, mixins:any[]){
mixins.forEach(mixin => {
Object.getOwnPropertyNames(mixin.prototype).forEach(name => {
base.prototype[name] = mixin.prototype[name];
});
});
}
// 应用混入
applyMixins(A,[Mixin1,Mixin2]);
let a = new A("Andy",12);
a.log();
a.log1();
a.log2();
文件模块
// export 可多次调用
// module.ts
export function module1():any[]{
return ["a"]
};
export function module2():string{
return "a";
};
// 或
function module1():any[]{
return ["a"]
};
function module2():string{
return "a";
};
export {module1, module2}; // 统一暴露
// main.ts
import {module1, module2 as m2} form "./module";
module1(); // ["a"]
m2(); // "a"
// export.default 每个文件内只能用一次
// module.ts
export.default function():void{
}
// main.ts
import module form "./module";
module();
命名空间
与 Java、c# 基本一致
// 命名空间下的接口、类默认均为私有
namespace A{
interface Animal {
name:string;
eat():void;
}
// 使用 export 暴露出去才可在外部调用
export class Dog implements Animal{
name:string;
constructor(name:string){
this.name = name;
}
eat(){
}
}
}
let d = new A.Dog("2ha");
d.eat();
// 命名空间也可以使用 export 暴露出去被外部调用
export namespace A{
interface Animal {
name:string;
eat():void;
}
export class Dog implements Animal{
name:string;
constructor(name:string){
this.name = name;
}
eat(){
}
}
}
装饰器
ES7的标准，装饰器本身就是一个方法。装饰器只能用于类、类的方法之上（可多个）。普通函数不能使用，因为普通函数存在变量提升。
// 类的装饰器方法
function logClass(str:string){
return function(target:Function){
target.prototype.url = str;
}
}
@logClass("http://a")
class HttpClient{
url?:string;
constructor(){
}
getData():void{
}
}
let http:HttpClient = new HttpClient();
http.url; // "http://a"
// 属性装饰器
function logProperty(str:string){
return function(target:any, name:string){
target[name] = str; // target 为类的原型对象
}
}
class HttpClient{
@logProperty("a")
url:string|undefined;
constructor(){
}
getData():void{
}
}
let http:HttpClient = new HttpClient();
console.log(http.url) // "a"
// 方法装饰器（用得较多）
function logFun(str:string){
return function(target:any,name:string,des:PropertyDescriptor):PropertyDescriptor{
let oldValue:Function = target[name];
// 修改方法。注意：ES5 、ES6的描述内容有差别
des.value = function(){
console.log("调用了装饰器");
return oldValue.call(this,str);
}
return des;
}
}
class HttpClient{
constructor(){
}
@logFun("a")
getData(str:string):string{
return str;
}
}
let http:HttpClient = new HttpClient();
console.log(http.getData("b")) // "a"
// 方法参数装饰器（常用来扩展类，使用场景较少）
function logParams(str:string){
return function(target:any,name:string,index:Number):void{
console.log(target); // target 类的原型链
console.log(name); // name 方法名称
console.log(index); // index 参数的索引
}
}
class HttpClient{
constructor(){
}
getData(@logParams("uuid") uid:string){
}
}
执行顺序：属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器，同一类型装饰器有多个则是从后往前执行。
Javascript类型检查
TS在2.3之后版本可以使用 --checkJs 对 .js 文件进行类型检查和错误提示。
可以通过添加注释来控制检查规则，部分规则如下：
// @ts-nocheck 忽略类型检查
// @ts-check 则检查某些.js文件
// @ts-ignore 忽略本行错误
https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html
