乐趣区

TypeScript入门

关于TypeScript

TypeScriptJavaScript 的一个超集,主要提供了 类型系统 对 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 类型的变量没有什么用,因为你只能将它赋值为 undefinednull

let unusable: void = undefined;

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

类型推论

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

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

退出移动版