TypeScript系列--基础

①什么是TypeScript

官网定义：Typed JavaScript at Any Scale-------添加了类型系统的JavaScript,适用于任何规模的项目

上面这句话强调了TypeScript最重要的两个特性：类型系统、适用于任何规模
从TypeScript名字就可以看出来它的核心特性—类型

1、TypeScript是添加了类型系统的JavaScript，适用于任何规模的项目 2、TypeScript是一门静态类型，弱类型的语言
3、TypeScript是完全兼容JavaScript的，它不会修改JavaScript运行时的特性
4、TypeScript是可以编译为JavaScript，然后运行在浏览器、Node.js等任何能运行JavaScript的环境中
5、TypeScript拥有很多编译选项，类型检查的严格程度由你决定
6、TypeScript可以和JavaScript共存，这意味着JavaScript项目能够渐进式的迁移到TypeScript
7、TypeScript增强了编辑器(IDE)的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力
8、TypeScript拥有活跃的社区，大多数常用的第三方库都提供了类型声明
9、TypeScript与标准同步发展，符合最新的ECMAScript标准(stage3)

②安装TypeScript

1、使用命令行工具安装

npm install -g typescript

以上命令会在全局环境下安装tsc命令，安装完成之后，我们就可以在任何地方执行tsc命令了
2、编译一个TypeScript文件

tsc hello.ts

3、注意：我们约定使用TypeScript编写的文件以.ts为后缀，用TypeScript编写React时，以.tsc为后缀

4、编辑器
主流编辑器都支持TypeScript
例如 Visual Studio Code
它是一款开源，跨终端的轻量级编辑器，内置了对TypeScript的支持
另外它本身也是用 TypeScript 编写的。
下载地址：https://code.visualstudio.com/

③Hello TypeScript

将以下代码复制到hello.ts中

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

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

然后执行

tsc hello.ts

这时候会生成一个编译好的hello.js文件

function sayHello(person) {
   
    return 'Hello,' + person;
}
var user = 'zhaohuan';
console.log(sayHello(user));

在TypeScript中，我们使用：指定变量的类型，：的前后有没有空格都可以
上述例子中，我们用：指定person参数类型为string。但是编译为js之后，并没有什么检查的代码被插入进来

这是因为TypeScript只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。而在运行时，与普通的JavaScript文件一样，不会对类型进行检查

如果我们需要保证运行时的参数类型，还是得手动对类型进行判断

function sayHello(person:string){
   
 if(typeof person === 'string'){
   
    return 'Hello,'+person;
 }else{
   
    throw new Error('person is not a string')
 }
}

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

下面尝试把这段代码编译一下

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

let user = [0, 1, 2];
console.log(sayHello(user));

编辑器中会提示错误，编译的时候也会出错

hello.ts:17:22 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

但是还是生成了js文件

function sayHello(person) {
   
    return 'Hello,' + person;
}
var user = [1, 2, 3];
console.log(sayHello(user));

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

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

④基础

4.1–原始数据类型

Boolean 布尔类型

布尔类型只有true(真)和false(假)两个值

var male:boolean = true;

注意：使用构造函数Boolean创造的对象不是布尔值：

let creatdByNewBoolean:boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.
//   'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

事实上，new Boolean()返回的是一个Boolean对象

let createdByNewBoolean:Boolean = new Boolean(1);

直接调用Boolean也可以返回一个boolean类型

let createdByBoolean:boolean = Boolean(1);

在TypeScript中,boolean是JavaScript中的基本类型，而Boolean是JavaScript中的构造函数。其他基本类型(除了null和undefined)一样。

Number 数字类型

TS所有的数字都是由浮点数表示的，这些数字的类型就是number

var age:number = 18

// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;

编译结果：

var age= 18
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;

String字符串类型

string表示文本数据类型，和JavaScript一样，可以使用双引号("")或单引号(’’)表示字符串

var name:string = "张三"

你还可以使用模板字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围(``),并且以${expr}这种形式嵌入表达式，这大大增强了代码的可读性。

let name:string = "张三";
let greet:string = `你好呀--${
     name}`;
console.log(greet);//你好呀--张三