TypeScript 学习笔记(一)---基本类型及变量声明

什么是TypeScript

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。

TypeScript的优缺点

优点

性能有所提升（相对于js多了一个编译阶段，在此期间进行优化）
减少维护成本（因其代码所要求比较规范易懂）

缺点

增加学习成本（中文资料不多；且对于专业不是计算机相关的同学来说【class，interfacce,enums,generics】等需要理解）
增加开发成本（要多写类型定义；集成到项目构建中成本增加）

获取并使用TypeScript

一般来讲可以使用 npm 来获取：

//
npm install -g typescript

创建一个名为 greeter.ts 的文件

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

虽然后缀是 .ts但是其实完全是 js 的语法。
然后在命令行编译这个文件：

tsc greeter.ts

会在当前目录下生成一个名为 greeter.js 的文件。

使用gulp编译 typescript 文件

先在项目中安装所需要的东西：

npm install --save-dev typescript gulp gulp-typescript

然后就在项目中引入相应的模块，选择需要编译的文件，编译后生成文件的地址（跟less差不多）

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('tsc', function () {
    return gulp.src('src/**/*.ts')
        .pipe(ts({
            option1:value1,
            option2:value2
        }))
        .pipe(gulp.dest('dist/js'));
});

TypeScript语法及特性

基本变量类型

Boolean: let isDone: Boolean = false;
Number:

     let decimal: number = 6; // 10进制
     let hex: number = 0xf00d; //16进制
     let binary: number = 0b1010; //2进制
     let octal: number = 0o744; //8进制

string：使用双引号 ( ” ) 或单引号 ( ’ )，但是在使用字符串模板的时候，只用单引号( ’ )

let fullName: string = `Bob Bobbington;
let sentence: string = `Hello, my name is ${ fullName }'.//字符串模板，引用fullname 变量。使用单引号

arrary：数组类型在声明的时候需要写明数组内元素类型：

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

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

当一个数组在声明时设定了其中元素的类型，当超出已知设定的界限时，后面的元素可以是设定类型中的任意一种类型：

x[3] = "world"; // OK, 'string' can be assigned to 'string | number'

console.log(x[5].toString()); // OK, 'string' and 'number' both have 'toString'

x[6] = true; // Error, 'boolean' isn't 'string | number'

enums：

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

上例子中，默认的 color.green的值是0.也可以通过手动赋值的方式修改默认值，需要注意的是若修改其中的一个而后面的没有修改，则是按照 +1的方式递增；

enum Color {Red = 1, Green = 3, Blue}
let c: Color = Color.Green; //3
let d: color = Color.Blue; //4

还可以通过相应的枚举值来获取相应的属性字段名称：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]; //Green

Any：any 类型相当于Javascript中的 var 声明变量。也就是可以被赋值为任意类型的数据，任意修改。

let notSure: any = 4;
notSure.ifItExists(); // ok，在编译时被声明为any的变量不会做类型检查。在运行时这个变量是有可能有ifItExists这个属性的。
notSure.toFixed(); // okay

void：通常用在函数声明时表明函数无返回。在声明变量时也可以使用，但是只能被赋值为null 或 undefined
null undefined：只能被赋值为null或undefined。同时也是任何其他类型的子类型，也就是任何其他类型可以被赋值为null,undefined.
never：这个类型表明一个变量的值永远不会出现（雾）

变量声明

var
let
const

var

跟JavaScript基本相同。

let

算是JavaScript新的特性。
- 一个使用 let 声明的变量在声明前无法访问(调用)
- 可以在块级作用域中访问，只要这个块级作用域时在变量声明后调用的。若这个块级作用域在声明前调用也是不行的。

function foo() {
    // okay to capture 'a'
    return a;
}

// illegal call 'foo' before 'a' is declared
// runtimes should throw an error here
foo();

let a = 4;

foo(); //ok，now it is declared

typescript 中使用 let 声明变量后不可以重复声明，也不可以再使用var 再次声明。

const

const 声明的变量与let 基本相同，唯一区别在于不能修改。

const numLivesForCat = 9;
const kitty = {
    name: "Aurora",
    numLives: numLivesForCat,
}

// Error
kitty = {
    name: "Danielle",
    numLives: numLivesForCat
};

// all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;

在上述例子中把 “kitty” 再次赋值为一个对象时不可以的，而修改 “kitty”的属性的值则是可以的。因为kitty绑定的是一个对象的地址的值，把kitty赋值为另外一个对象相当于把另外这个对象的地址的值给kitty，也就是修改了kitty的值；而修改kitty的属性则是修改了这个地址内的数据，并没有改变kitty的值。

destructuring

具体可以参考阮一峰老师的es6入门：http://es6.ruanyifeng.com/#docs/destructuring

秒客网