乐趣区

TypeScript入门

jiezi

关于TypeScript

TypeScript 是 JavaScript 的一个超集，主要提供了 类型系统 和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

TypeScript 优缺点

  • TypeScript 增加了代码的可读性和可维护性

  • TypeScript 非常包容

    typeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
    即使不显式的定义类型，也能够自动做出类型推论
    可以定义从简单到复杂的几乎一切类型
    即使 TypeScript 编译报错，也可以生成 JavaScript 文件
    兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

  • 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念, 可能会增加开发成本

快速上手

命令行安装：

npm install -g typescript

hello world , 新建 index.ts 文件:

function sayHello(person: string) {return 'Hello,' + person;}

let user = 'Tom';
console.log(sayHello(user));

运行：

tsc index.ts

TypeScript 中，使用 : 指定 变量的类型 ，: 的前后有没有 空格 都可以。

TypeScript 只会进行 静态检查，如果发现有错误，编译的时候就会报错。

但还是会生成对应的 .js 文件，如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。关于配置项

基础

变量类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和 对象类型（Object types）。
原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

指定变量类型：


let isShow: boolean = false;   // 布尔值  new Boolean(true) 不可 new 出来是对象  可以 Boolean()
let name: string = '君莫笑';   // 字符串
let age: number = 5;   // 数值
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;     //hex 十六进制
let binaryLiteral: number = 0b1010;  //binary 二进制 
let octalLiteral: number = 0o744;   //octal  八进制  OCT
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

let u: undefined = undefined;
let n: null = null;
// null 和 undefined 是所有类型的子类型，也就是说其他类型可以设值为 null 或 undefined（void 除外）let account: string = u;

JavaScript 没有 空值（Void）的概念，在 TypeScript 中，可以用 void 表示 没有任何返回值的函数：

function alertName(): void {alert('My name is Tom');
}

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：

let unusable: void = undefined;

任意值, 用 any 代替：let sth: any = null;

类型推论

其实就是根据之前定义时的初值类型推断出变量类型，若没有赋值，则识别为any，如以下代码会报错：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
退出移动版