TypeScript基础 1

简介: TypeScript基础

一、关于 TypeScript

TypeScript是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发

二、TypeScript优缺点

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

·         类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了

·         可以在编译阶段就发现大部分错误,这总比在运行时候出错好

·         增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等

TypeScript 拥有活跃的社区

·         大部分第三方库都有提供给 TypeScript 的类型定义文件

·         Google 开发的 Angular2 就是使用 TypeScript 编写的

·         TypeScript 拥抱了 ES6 规范

TypeScript 的缺点

TypeScript 的弊端在于:

·         有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等概念

·         短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本

·         集成到构建流程需要一些工作量

·         可能和一些库结合的不是很完美

三、安装 TypeScript

npm install -g typescript
tsc xxxx.ts

四、Hello TypeScript

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
执行 tsc hello.ts
这时候会生成一个编译好的文件 hello.js:function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
TypeScript 中,使用 : 指定变量的类型,: 的前后有没有空格都可以


注意点:

TypeScript 如果发现有错误,编译的时候就会报错。

TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json,参考官方手册中文版)

五、原始数据类型

1、布尔值

var isScuess: boolean = false;
注意,使用构造函数 Boolean 创造的对象不是布尔值:new Boolean() 返回的是一个 Boolean 对象:let createdByNewBoolean: Boolean = new Boolean(1);
直接调用 Boolean 也可以返回一个 boolean 类型
let createdByBoolean: boolean = Boolean(1);

2、数值

var decLiteralNum: number = 6;
var hexLiteralNum: number = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteralN: number = 0b1010;
// ES6 中的八进制表示法
var octalLiteralN: number = 0o744;
var notANumber: number = NaN;  //typeof
var infinityNumber: number = Infinity;
其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字。

3、字符串

let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

4、空值

function alertName(): void {
    alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:let unusable: void = undefined;
5、null和undefined
在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型:let u: undefined = undefined;
let n: null = null;
undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null。与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
而 void 类型的变量不能赋值给 number 类型的变量:let u: void;
let num: number = u;


相关文章
|
JavaScript 前端开发 编译器
TypeScript:熟练掌握TypeScript(四)
TypeScript:熟练掌握TypeScript(四)
113 0
|
JavaScript 前端开发 Java
TypeScript:熟练掌握TypeScript(三)
TypeScript:熟练掌握TypeScript(三)
164 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript在项目中应用
【8月更文挑战第4天】TypeScript在项目中应用
37 0
|
4月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
35 0
|
JavaScript 前端开发 IDE
TypeScript基础
TypeScript基础
107 0
TypeScript基础
|
JavaScript 前端开发
|
JavaScript 前端开发
初识TypeScript -基础一
初识TypeScript -基础一
112 0
|
资源调度 JavaScript 前端开发
TypeScript:熟练掌握TypeScript(一)
TypeScript:熟练掌握TypeScript(一)
96 0
|
JavaScript 索引
TypeScript:熟练掌握TypeScript(二)
TypeScript:熟练掌握TypeScript(二)
123 0
|
JavaScript 前端开发
TypeScript学习(1)
一、概述 1、什么是Typescript? 官方网站的定义是: TypeScript 是 JS 类型的超集,TypeScript 是一个js的外壳,需要编译成浏览器可识别的javascript才可以运行。
77 0