Bootstrap

Web学习之TypeScript

一. TypeScript是什么

  • TypeScript是JavaScript类型的超集,扩展了 JavaScript 的语法;
  • TypeScript 设计目标是开发大型应用,它能编译出纯净、简洁的JavaScript代码,可以运行在在任何浏览器、任何计算机和任何操作系统上,并且是开源的;
  • TypeScript 通过类型注解提供编译时的静态类型检查,就能将调试从运行期提前到编码期,诸如类型检查、越界检查这样的功能才能真正发挥作用;
  • TypeScript的开发体验远远超过以往纯JavaScript的开发体验,无需运行程序即可修复潜在bug;
  • TypeScript支持未来的ES6甚至ES7。在TypeScript中,可以直接使用ES6的最新特性,在编译时它会自动编译到ES5。

在这里插入图片描述

二. TypeScript配置

  1. 安装好NodeJS后,以管理员身份运行终端,使用npm -g install ts-node typescript命令进行全局安装;
  2. 在VS Code中开发,安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件;
  3. 新建一个.ts后缀的文件,任意写一段JS代码,点击运行试试是否配置成功。

三. 变量声明

使用letconst新的声明方式来代替var,并加上类型说明,且作用域为块级即以{}为界。
const是对let的一个增强,它能阻止对一个变量再次赋值。

例如:

let lang: string = 'TypeScript';//如果省略类型说明,TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型:let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变,类似常量
pi = 3.14;//error!

四. 解构

将对象、数组中的元素拆分到指定变量中,以方便使用

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //...other表示将剩余的数组展开
console.log(...others);  //64 2018 10
let newArr = [89, ...others, 18];
console.log(newArr);  // [ 89, 64, 2018, 10, 18 ]

//解构对象
let o = {
   
  a: "foo",
  b: 12,
  c: "bar"
};
let {
   a, b} = o;//注意使用{},且变量名需与对象中道属性名一致
console.log(a, b);  //foo 12

五. 函数

TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。

1. 使用完整函数类型定义

变量名:类型
function 函数名():返回值类型{}

//命名函数,有完整的参数和返回类型。可以不用,TS将自动进行类型推断但推荐使用!
function add(x: number, y: number): number {
   
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number {
    return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2
;