简单说说typescript

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、什么是TypeScript

TypeScript(JavaScript that scales.) TypeScript是JavaScript类型的超集（超集就是ts包含js而且有js没有的东西，意味着js语法也能在ts中运行），它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

2、为什么用TypeScript

1、TypeScript 增加了代码的可读性和可维护性

类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了，可以在编译阶段就发现大部分错误。

e.g.定义一个方法

另外还可以

增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义等

2、TypeScript 非常包容

TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可

即使不显式的定义类型，也能够自动做出类型推论

可以定义从简单到复杂的几乎一切类型

即使 TypeScript 编译报错，也可以生成 JavaScript 文件

兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

TypeScript 入门教程

3、快速上手

1、npm install -g typescript

2、建一个xxx.ts文件（直接把js改成ts都行，可能会通过不了各种静态检查）

3、写点东西进去

4、编译ts文件执行 tsc xxx.ts 输出xxx.js文件

5、有兴趣可以加点东西

4、语法简介

1、基础类型

布尔类型boolean

let isDone: boolean = false;

数值number

let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d;  // 十六进制
let binaryLiteral: number = 0b1010;  // 二进制
let octalLiteral: number = 0o744;  // 八进制

字符串值string

let username: string = `Gene`;
// 模版字符串
let sentence: string = `Hello, my name is ${ username }.`;
let otherSentence: string = "Hello, my name is " + name + ".";

数组

let list: number[] = [1, 2, 3];
let otherList: Array<number> = [1, 2, 3];

元组

let x: [string, number];
x = ['hello', 10]; // OK、

枚举enum

enum Color {Red, Green, Blue}
let c: Color = Color.Green;


enum HttpCode {
      /** 成功 */
      '200_OK' = 200,
      /** 已生成了新的资源 */
      '201_Created' = 201,
      /** 请求稍后会被处理 */
      '202_Accepted' = 202,
      /** 资源已经不存在 */
      '204_NoContent' = 204,
      /** 被请求的资源有一系列可供选择的回馈信息 */
      '300_MultipleChoices' = 300,
      /** 永久性转移 */
      '301_MovedPermanently' = 301,
      /** 暂时性转移 */
      '302_MoveTemporarily' = 302,
  }
  
  HttpCode['200_OK']
  HttpCode[200]

Any

let anyType: any = 4;
anyType = "string";
anyType = false;

Void（没有任何类型）

//  当一个函数没有返回值时，你通常会见到其返回值类型是 void
function warnUser(): void {
  console.log("This is my warning message");
}

Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

Never（永不存在的值的类型）

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
  while (true) {
  }
}

Object

object表示非原始类型(除number，string，boolean，symbol，null或undefined之外的类型)

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(42); // Error

类型断言

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let otherStrLength: number = (someValue as string).length;

2、接口

interface test {
  value: string;
  // 可选属性 好处1：不一定要传 好处2:传的时候写错了会报错
  color?: string;
  // 只读属性
  readonly text: number;
  readonly arr: number[];
}


function say(obj: test){
  console.log(obj.value)
  
  // console.log(obj.colour)  // 可选属性 传的时候写错了会报错
  
  // obj.text = 222; // 只读属性 不能被修改
}


let myObj = {
  text:1111, 
  value:"hello",
  arr:[1,2,3],
};
// 类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以
say(myObj);




// 函数类型
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}




// 可索引的类型
interface StringArray {
  [index: number]: string;
}


let myArray: StringArray;
myArray = ["Bob", "Fred"];


let myStr: string = myArray[0];




// 类类型 在接口中定义在类中实现接口
interface ClockInterface {
  currentTime: Date;
  setTime(d: Date);
}


class Clock implements ClockInterface {
  currentTime: Date;
  setTime(d: Date) {
      this.currentTime = d;
  }
  constructor(h: number, m: number) { }
}




// 继承接口
interface Shape {
  color: string;
}


interface Square extends Shape {
  sideLength: number;
}


let square = <Square>{};
square.color = "blue";
square.sid

3、类

class Greet {
  greeting: string;  // 类属性
  constructor(message: string) {  // 构造函数
    this.greeting = message;
  }
  greet() {  // 方法
    return "Hello, " + this.greeting;
  }
}




let greet = new Greet("world");
console.log(greet.greet());




// 继承
class Child extends Greet {
  bark() {
    console.log('hello!');
  }
}




// 公共，私有与受保护的修饰符
// 默认为 public
// private 就不能在声明它的类的外部访问
// protected protected成员在派生类中仍然可以访问




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




class Employee extends Person {
  private department: string;




  constructor(name: string, department: string) {
      super(name)
      this.department = department;
  }




  public getElevatorPitch() {
      return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}




let user = new Employee("xiaohong", "xxx");
console.log(user.getElevatorPitch());
// console.log(user.name); // 错误: 'name' 是私有的.






// 通过getters/setters来截取对对象成员的访问
class User {
  private _fullName: string;




  get fullName(): string {
    return this._fullName;
  }




  set fullName(newName: string) {
    this._fullName = newName;
  }
}




let employee = new User();
employee.fullName = "Bob Smith";
if (employee.fullName) {
  ale

4、函数

// 函数类型包含两部分：参数类型和返回值类型




// 函数的完整类型
let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; };




// 可选参数和默认参数
function buildName(firstName: string, lastName: string) {
  return firstName + " " + lastName;
}




// let result1 = buildName("aaa");                  // error
// let result2 = buildName("aaa", "bbb", "ccc");  // error
let result3 = buildName("aaa", "bbb");         // ok






// JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 
// 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能
function buildName2(firstName: string, lastName?: string) {
  return firstName + " " + lastName;
}




// 默认参数
function buildName3(firstName: string, lastName = "xxx") {
  return firstName + " " + lastName;
}




let result21 = buildName2("aaa");                  // ok
// let result22 = buildName2("aaa", "bbb", "ccc");  // error
let result23 = buildName2("aaa", "bbb");         // ok






// 剩余参数
// JavaScript里，你可以使用 arguments来访问所有传入的参数
// TypeScript里，你可以把所有参数收集到一个变量里
function restFunc(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}




let employeeName = restFunc("Joseph", "Samuel", "Luca

5、泛型

function identity<T>(arg: T): T {
    return arg;
}


// 泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}


let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };


let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };


console.log(stringNumeric.add(stringNumeric.zeroValue, "test"

5、其它

https://www.tslang.cn/docs/index.html