关于TypeScript

2017-08-11 本文已影响485人 skills

[TOC]

一.关于TypeScript

TypeScript是由微软开发的自由和开源的编程语言，它是JavaScript的超集。它扩展了JavaScript的语法，JavaScript的语法可以不加修饰的情况下，在TypeScript的环境下运行。TypeScript添加了遵循es6的语法，以及基于类的面向对象编程的这种特性。而且谷歌发布的Angular2也是TypeScript开发的.

TypeScript是为开发大型应用而设计的,编译的JavaScript保证兼容性。

微软开发
javascript超集
遵循es6规范
强类型

二.使用它的原因

由于JavaScript是一门弱类型语言,变量的数据具有动态性,无法准确知道它的类型.TypeScript的类型机制可以避免这一类问题，等！

TypeScript具强大的IDE支持，体现在

1.类型检测
2.语法提示
３.重构

重构:
TypeScript中引入了模块的概念，这类似于C++中的名字空间。它可以把声明、数据、函数和类封装在模块中，并采用export关键字导出，供模块外部的代码取用。之所以说它和命名空间比较相似，一是因为同名的模块可以自动合并，甚至可以分别存储在多个文件中；二是因为模块的名字可以分成不同层次，在层次较多时还可以命名简化的别名。但无论模块怎么组织，最终生成的还是标准的、可直接取用的JavaScript代码。正是靠着模块化、可插拔的结构，TypeScript才得以在维护一个较小的语言核心的前提下，对广泛使用的库如jQuery、CommonJS和Node.js等提供了完整的支持。

由于TypeScript并不是采用字符串匹配的粗糙方式来推导变量和函数的名字，对TypeScript代码进行命名的重构就如同微软的其他编程语言一样容易。只需要选中要重新命名的实体，并键入新的名字，而不需要担心名字相同而意义不同的其他实体也被同时重命名了

vscode
　vscode搭建typescript开发环境

相比学习这门语言的付出，TypeScript诸多优点,都是值得的！

三.搭建TypScipt开发环境

因为TypeScript是编译型语言，而且不能在浏览器上直接运行，所以我们要安装TypeScript的编译器，将它编译成Javascript才能在浏览器上运行。

在线编译:

当然你也可以使用在线的编译器 => 点我

使用本地编译器：

使用本地编译你需要安装TS ,

安装:

sudo npm install -g typescript

安装完成后你可以测试是否安装成功，当然一般情况都没有什么问题的

tsc --version
Version 2.3.4

安装文档

编译:

tsc helloworld.ts

四.基础类型

1.Boolean

let isDone: boolean = false;

2.number
typescript 还支持es6里面引入的二进制和八进制的字面量

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

3.string

let name: string = "bob";
name = "smith";

在这里还可以使用模板字符串利用反引号 (`),包围，并且用 ${expr}这种形式嵌入表达式。

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

4.Array
TypeScript定义数组有两种方式:

 1 .在元素类型后面接上 `[]`

let list: number[] = [1, 2, 3];

 2 .使用泛型

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

5.Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string和number类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

6.枚举enum
enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

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

7.Any
any 是默认的类型，其类型的变量允许任何类型的值：

let notSure:any = 10;
let notSure2:any[] = [1,"2",false];

8.void
JavaScript 没有空值 Void 的概念，在 TypeScirpt 中，可以用 void 表示没有任何返回值的函数：

function alertName(): void {
  console.log('My name is muyy')
}

9.Null 和 Undefined
TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。和 void相似，它们的本身的类型用处不是很大：

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

10.Never
never类型表示的是那些永不存在的值的类型

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

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

类型断言

类型断言有两种形式。其一是“尖括号”语法：

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法：

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

函数：

function add(x: string, y: string): string{
    return "Hello TypeScript";
}

let add2 = function(x: string, y: string): string{
    return "Hello TypeScript";
}

类：

概括在TypeScript中class的核心语义：所有的class都是一个立即函数，所有的数据成员都是这个函数实例的属性，所有的方法都是这个函数原型的属性，所有的静态成员都是这个函数的构造函数的属性

class Person{
    name:string; // 这个是对后文this.name类型的定义
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    fo(){
        return this.name + this.age;
    }
}

let person:Person = new Person('text',23)
console.log(person.fo()) // text23

接口:
TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface Shape{
    color: string;
}

interface PenStroke{
    penWidth: number;
}

interface Square extends Shape,PenStroke{
    sideLength: number;
}

let s = <Square>{};
s.color = "blue";
s.penWidth = 100;
s.sideLength = 10;

五.tsconfig.json

作用:

用于标识 TypeScript 项目的根路径
用于配置 TypeScript 编译器
用于指定编译的文件

示例：

{
  "files": ["src/app/app.ts"],
  "compilerOptions": {
    "target": "es5",
    "removeComments": true,
    "alwaysStrict": true, //代码将在严格模式下执行
    "noEmitOnError": true,//表示当发生错误的时候，编译器不要生成 JavaScript 代码
    "noUnusedLocals": true,
    "noUnusedParameters": true//表示编译器将检测没有使用的变量或参数
  }
}

引自文章

六.总结

1.关于typescript简介
2.使用它的理由
3.搭建TypScipt开发环境
4.基本数据类型
5.tsconfig.json