Summary: # Introduction to TypeScript## Official Statement > **JavaScript that scales. **TypeScript is a typed superset of JavaScript that compiles to plain JavaScript ## Features - by **Anders Hejlsberg** (C#, Delphi author) - Compatible with ES

Introduction to TypeScript

official statement

JavaScript that scales。TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

Features

static analysis

input error

interface ISort {
  name: string,
  age: number
}

function sortByName(a: ISort[]) {
  var result = a.slice(0);
  result.sort((x, y) => {
    return x.name.localCompare(y.name);
  });
  return result;
}

Execute the tsccompilation:

error TS2339: Property 'localCompare' does not exist on type 'string'.

Input errors such as localCompare are more common in the absence of intelligent prompts. If this function is native JS, it will not report an error until runtime. If you use an IDE that supports TS, it will be marked in red directly after entering localCompare, so as to avoid this piece of code being executed during runtime and then reporting an error and then debugging.

non-empty judgment

function countLines(text?: string[]): number {
  let count = 0;
  for (const line of text) {
    if (line && line.length !== 0) {
      count = count + 1;
    }
  }
  return count;
}

Execute the tsccompilation:

error TS2532: Object is possibly 'undefined'.

It can be seen for (const line of text) {that the text variable in this line may be undefined ( ?:it is TS syntax, indicating that it may exist or not). This kind of JS runtime error that lacks non-null judgment time is also prone to occur at work.

access permission

class Person {
  protected name: string;
  public age: number;
  constructor(name: string) { this.name = name; }
}

class Employee extends Person {
  static someAttr = 1;
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.name);

Execute the tsccompilation:

error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

The name attribute in Person is a protected type and can only be used in its own class or subclass, which is the same as Java.

interface Machine {
  move(): void
}

interface Human {
  run(): void
}

class Robot implements Machine, Human {
  run() {
    console.log('run');
  }
}

Execute the tsccompilation:

error TS2420: Class 'Robot' incorrectly implements interface 'Machine'.
  Property 'move' is missing in type 'Robot'.

When a Robot class implements multiple interfaces, it must implement all abstract methods of each interface, which is also a way to implement multiple inheritance.

Extensibility

TS适合大规模JS应用，正如他的官方宣传语JavaScript that scales。

超集

由于兼容ES规范，所以可以比较方便的升级现有的JS代码，逐渐的加类型注解。渐进式（容我盗个词）增强代码健壮性。不过这个也是理论上的，我目前维护的一个项目有比较重的历史包袱，模块管理是CommonJS/ES6 Modules混杂的，我尝试将编译系统从Babel完全迁移到TS，折腾后并没有成功（Babel还是很强大的= =）。

对于历史包袱比较多的老项目，不建议完全替换Babel，但是可以曲线引入TS，用TS编译到ES6，再用Babel来编译到ES5。

代码运行时质量

大型前端应用如何兼顾开发迭代&持续交付的速度和线上运行时的的质量，近期思考后认为很重要的一点就是增强应用数据结构或者说是结构化数据（配置、前后端后接口等JSON格式数据）的稳定性、健壮性。引入强类型系统，增加编译期检查，减少运行时错误，可以显著的改善这个点。很多问题可以在编码时发现，而不是出现运行时错误时再Debug。

和Babel、Flow的对比

Development efficiency

IDE intelligent prompts/error corrections are helpful for iteration, refactoring, reducing bugs and improving code quality, as well as improving development efficiency.

hint:

Original link

Introduction to TypeScript

Guess you like