初学 typescript (一)

44 阅读5分钟

typescript 基础语法

typescript程序由以下几个部分组成:

  • 模块
  • 函数
  • 变量
  • 语句和表达式
  • 注释

typescript 基础类型

  • 数字类型(number)双精度64位浮点值。它可以用来表示整数和分数
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
  • 字符串类型(string)一个字符系列,使用单引号(')或双引号(")来表示字符串类
let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
  • 布尔类型(boolean)表示逻辑值:true 和 false。
let flag: boolean = true;
  • 数组类型 声明变量为数组
// 在元素类型后面加上[]
let arr: number[] = [1, 3];
// 或者使用数组泛类
let arr: Array<number> = [1, 3];
  • 元组 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
let x: [string, number];
x = ['hello', 1]  // 正确
x = [1, 'hello']  // 报错
console.log(x[0]) // 输出 hello
  • 枚举(enum)枚举类型用于定义数值集合
enum Color {Red, Blue, Green};
let c: Color = Color.Blue;
console.log(c) // 输出1
  • void(void)用于标识方法返回值的类型,表示该方法没有返回值
function hello(): void {
    alert('hello world');
}
  • null(null)表示对象缺失。
  • undefined(undefined)用于初始化变量为一个未定义的值
  • never(never)never是其他类型(包括null和undefined)的子类型,代表从不会出现的值。

注意 Typescript 和 Javascript 没有整数类型。

typescript 变量声明

变量是一种使用方便的占位符,用于引用计算机内存地址。我们可以把变量看着存储数组的容器。

typescript 变量的命名规则:

  • 变量名称可以包含数字和字母;
  • 出来下划线 _ 和美元 $ 符合外,不能包含其他特殊字符,包括空格;
  • 变量名不能以数字开头;

变量名使用前必须先声明,我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量:

声明变量的类型及初始值:

var [变量名]: [类型] = 值;
// 例如:
var name: string = 'Tom';

声明变量的类型,但没有初始值,变量类型会设置为 undefined;

var [变量名]: [类型];
// 例如:
var name: string;

声明变量的初始值,但不设置类型,该变量可以是任意类型;

var [变量名] = 值;
// 例如:
var name = 'hello';

声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined;

var [变量名]
// 例如:
var name;

typescript 函数

函数的定义:

函数就是包裹在花括号中的代码块,前面使用了关键词 function

语法格式如下:

function function_name() {
    // 执行代码
}

函数返回值

有时候,我们希望函数执行的结果返回到调用他的地方,通过 return 语句就可以实现。在使用 return 语句时,函数会停止执行,并返回指定的值,语法格式如下所示:

 function function_name():return_type {
     // 语句
     return value;
 }
  • return_type 是返回值的类型
  • return 是关键词,后面跟着要返回的结果
  • 一般情况下,一个函数只有一个 return 语句
  • 返回值类型需要与函数定义的返回值类型(return_type)一致
function greet():string { // 返回一个字符串
    return 'hello world!'
}

function caller() {
    var msg = greet(); // 调用 greet() 函数
    console.log(msg); 
}

// 调用函数
caller();

带参数函数

在调用函数是,可以向其传递值,这些值被称为参数。 这些参数可以在函数中使用,多个参数使用逗号 ,分割;语法格式如下所示:

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

  • param1, param2为参数名
  • datatype 为参数类型
function add(x: number, y: number): number {
    return x + y;
}

可选参数和默认参数

可选参数

在 typescript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?

function buildName(firstName: string, lastName: string) {
    return firstName + ' ' + lastName;
}
let result1 = buildName('Bob');                  // 错误,缺少参数
let result2 = buildName('Bob', 'Adams', 'sr.');  // 错误,参数太多了
let result3 = buildName('Bob', 'Adams');         // 正确

以下实列,我们将 lastName 设置为可选参数:

function buildName(firstName: string, lastName?: string) {
    if(lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}

let result1 = buildName('Bob');                  // 正确
let result2 = buildName('Bob', 'Adams', 'sr.');  // 错误,参数太多了
let result3 = buildName('Bob', 'Adams');         // 正确

可选参数必须跟在必需参数后面。如果上例我们想让 firstName 是可选,lastName 必选,那么就要调整他们的位置,把 firstName 放在后面,如果都是可选参数就没关系。

默认参数

我们也可以设置参数的默认值,这样在调用函数的时候,如果不传该参数的值,则使用默认参数,语法格式如下:

function function_name(param1[:type], param2[:type] = default_value) {}

注意:参数不能同时设置可选和默认。

剩余参数

有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + ' ' + restOfName.join(' ');
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀,它将成为一个由剩余参数组成的数组,索引值从 0(包括) 到 restOfName.length(不包括)。

function addNumbers(...nums:number[]) {
    var i;
    var sum:number = 0;
    for(i = 0; i < nums.length; i++) {
        sum += nums[i];
    }
    console.log('和为:', sum);
}

addNumbers(1,2,3);