初学TypeScript

TypeScript简单介绍

微软新推TypeScript取代JavaScript

TypeScript是一个应用程序级的JavaScript开发语言。

TypeScript是JavaScript的超集，可以编译成纯JavaScript。

TypeScript跨浏览器、跨操作系统、跨主机，开源。

let关键字和var关键字的区别

var 声明有些奇怪的作用域规则

var IsFlag: boolean = false;
if (IsFlag)
{
    var x = 10;
}
var y = x;//js正常编译

//使用 var 声明时， 它不在乎你声明多少次；你只会得到1个。
function f(x)
{
    var x;
    var x;
    if (true)
    {
        var x;
    }
}

上面的代码我们可以发现，即使是在if代码块外，依然可以取到变量x，这是因为 var 声明可以在包含它的函数， 模块， 命名空间或全局作用域内部任何位置被访问 ， 包含它的代码块对此没有什么影响。 有些人称此为 var 作用域或函数作用域。

let关键字是JavaScript的一个新概念， TypeScript实现了它，它功能上和var大致相同，但是仅限于声明对象所在块级作用域内访问

var IsFlag: boolean = false;
if (IsFlag)
{
    let x = 10;
}
let y = x;//Error 无法找到名称‘x’


let z = 10;
let z = 20; // 错误， 不能在1个作用域里多次声明`z`

基本数据类型

这里只是简单描述了TypeScript里数据类型的使用，详细说明点击了解

//boolean
let IsFlag: boolean = false;
//number
let num: number = 100;
//string
let str: string = "你好";
//数组array
let numlist: number[] = [1, 2, 3];
let numlist1: Array<number> = [1, 2, 3];
//枚举enum
enum color { red, black, blue, green };
let col: color = color.green;
enum color1 { red = 0, black = 1, blue = 2, green = 3 };
let col1: string = color1[0];
//any类型
let notsure: any = "你好";
notsure = 100;
notsure = false;

函数的简单调用

//带参函数：限定参数格式和返回值类型，不写返回值类型的话TypeScript能够根据返回语句自动
//推断出返回值类型， 因此我们通常省略它。
function add(x: number, y: number): number
{
    return x + y;
}
//可选参数：可选参数必须跟在必须参数后面。 如果上例我们想让first name是可选的， 那么就
//必须调整它们的位置， 把first name放在后面。
function buildName(firstName: string, lastName?: string)
{
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

//在TypeScript里， 我们也可以为参数提供一个默认值当用户没有传递这个参数或传
//递的值是 undefined 时。 它们叫做有默认初始化值的参数。 让我们修改上例，
//把last name的默认值设置为 "Smith" 。
function buildName(firstName: string, lastName = "Smith")
{
    return firstName + " " + lastName;
}

接口

//一个简单的接口
interface SearchFunc {
(source: string, subString: string): boolean;
}
//一个接口可以继承多个接口， 创建出多个接口的合成接口。
interface Shape
{
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;