Typescript 学习笔记

1. 特点

1.1. 语言特征

  • 强类型
  • 兼容Javascript

1.2. 语言优点

  • 支持类
  • 支持接口
  • 支持继承

1.3. 语言缺点

  • 需要搭建环境
  • 需要编译

2. 语法

2.1. 数据类型

let a: boolean = false; // 布尔
let b: number = 2; // 数字 十进制
let c: number = 0x3; // 数字 十六进制
let d: number = 0b100; // 数字 二进制
let e: number = 0o5; // 数字 八进制
let f: bigint = 6n; // 超长数字
let g: string = ''; // 字符串
let h: string = `1${2}3`  // 字符串 拼接
let i: number[] = [1, 2, 3]; // 数组
let j: [number, string] = [10, '']; // 元组
enum k {a, b = 2}; // 枚举
let l: unknown = null; // 未知
let m: any = null; // 任意
let n: undefined = undefined; // 未声明
let o = (): void => {} // 空返回
let p = (): never => {while(true) {}} // 不返回
declare function q(obj: object | null): void; // 对象
let r: bigint = 1 as unknown as bigint // 类型转换
let s: string = typeof true; // 类型获取
let t: keyof number; // 成员名获取
var u: number; // 全局变量
let v: number; // 局部变量
const w: number = 1; // 常量

type A = number; // 关联类型
type B = true | 2 | '3'; // 文字类型
type C = string | number; // 联合类型
type D = {x: number} & {y: string}; // 交叉类型
let E: Partial<{x: number}> = {}; // 可选映射
let F: Required<{x?: number}> = {x: 1}; // 必选映射
let G: Readonly<{x: number}> = {x: 1}; // 只读映射
let H: Record<string, {x: number}> = {x: {x: 1}}; // 指定名称映射
let I: Pick<{x: number}, 'x'> = {x: 1}; // 选择成员映射
let J: Omit<{x: number}, 'x'> = {}; // 排除成员映射
type K = Exclude<string | number, string>; // 差集映射
type L = Extract<string | number, string>; // 交集映射
type M = NonNullable<string | undefined | null>; // 去空映射
type N = Parameters<(x: number) => void>; // 参数映射
type O = ConstructorParameters<any>; // 构造函数参数映射
type P = ReturnType<any>; // 返回值映射
type Q = InstanceType<any>; // 类型映射
type R = ThisParameterType<number>; // this参数映射
type S = OmitThisParameter<number>; // this返回值映射
type T = string & ThisType<number>; // this限制映射

2.2. 接口

// 对象
interface A {
  a: number; // 必须
  b?: number; // 可选
  readonly c: number; // 只读
  d: (x: number) => boolean; // 函数
}

// 函数
interface B {
  (a: number, b: string): boolean;
}

// 数组
interface C {
  [index: string]: number;
  length: number;
}

// 类
interface D {
  a: number;
  b(c: number): void;
}

// 继承对象
interface E {
  a: string;
}
interface F extends E {
  b: number;
}

// 继承类
class G {
  a: number = 1;
}
interface H extends G {
  b(): void;
}

2.3. 函数

function a() {} // 声明函数
let b = function() {}; // 匿名函数
let c = () => {}; // 指针函数
function d(x: number): string {return `${x}`;} // 参数匹配
let e: (x: number) => number; // 定义类型
function f(x?: number) {} // 可选参数
function g(x: string = '') {} // 默认参数
function h(...x: string[]) {} // 可变参数

function i(this: void) {} // this参数

2.4. 类

// 声明
class A {
  public a: number; // 公共变量
  private b: number = 1; // 私有变量
  protected c: number = 2; // 保护变量
  readonly d: number = 3; // 只读变量
  static e: number = 4; // 静态变量
  constructor(a: number) {this.a = a;} // 构造函数
  set f(b: number) {this.b = b}; // set访问器函数
  get f() {return this.b}; // get访问器函数
}

// 继承
class B extends A {
  constructor(a: number) {
    super(a); // 父类构造函数
  }
}

// 抽象类
abstract class C {
  abstract a(): void; // 抽象方法
}

// 类型判断
let d: boolean = A instanceof B;

2.5. 泛型

let a = <T>(x: T) => {} // 泛型函数
let b: <T>(arg: T) => void = a; // 泛型类型
class C<T> {} // 泛型类
function d<T extends []>(arg: T): void {} // 继承

2.6. 装饰器

 // 类装饰器
function A() {return function (target: any) {}}
// 属性装饰器
function B() {return function (target: any, propertyName: string) {}}
// 函数装饰器
function C() {return function (target: any, methodName: string, descriptor: PropertyDescriptor) {}}
// 函数参数装饰器
function D() {return function (target: any, methodName: string, paramIndex: number) {}}
// 访问器装饰器
function E() {return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {}}

@A()
class Hello {
  @B()
  _x: string = '';

  @C()
  f(@D() p1: string) {}

  @E()
  get x() {return this._x;}
}

2.7. 迭代器

for(let key in [1, 2]) {}
 // 键值
for(let val of [1, 2]) {} // 值

2.8. JSX

declare namespace JSX {
  interface IntrinsicElements {
    [x: string]: any; // 声明所有元素
    a: any; // 声明元素
    b: {x?: number}; // 检查参数
  }
  interface ElementClass { // 组件类
    render: any;
  }
  interface ElementAttributesProperty { // 检查传入参数
    props: {
      c: {x?: number};
    };
  }
  interface ElementChildrenAttribute { // 检查传出参数
    children: {
      d: {x?: number};
    };
  }
}

2.9. 混合

function mixins(child: any, parents: any[]) {
  parents.forEach(parent => {
      Object.getOwnPropertyNames(parent.prototype).forEach(key => {
        child.prototype[key] = parent.prototype[key];
      })
  }); 
}

class A {a() {}}

class B {b() {}}

class C implements A, B {}

mixins(C, [A, B]);

(new C).a();

2.10. 模块

export interface A {} // 导出
export {A as B} // 命名导出
import {C} from "./C"; // 导入
import {D as E} from "./D"; // 命名导入
import type {F} from "./F"; // 导入类型
export default true; // 导出常量
import G from "./G"; // 导入常量
export * as H from "./H"; // 整合导出
import * as I from "./I"; // 整合导入

2.11. 命名空间

namespace A {
  export interface B {}
  export class C implements B {}
}
let c = new A.C;

export {A};
import * as N from "./n";
let n = new N.A.C

2.12. 符号常量

const s: unique symbol = Symbol(''); // 声明

参考

版权协议

知识共享许可协议

本作品采用知识共享署名-非商业性使用-禁止演绎 3.0 版本许可协议进行许可。