首页 > 技术文章 > 初学TypeScript

scyr 2016-01-06 17:50 原文

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;

 

推荐阅读