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;

相关推荐