初识TypeScript -基础一

在开始工作之前，就听朋友提过TypeScript，之前也没多想学习，直到vue3出来之后，感觉TypeScript 后面会成为主流，只能硬着头皮学学吧。
读完本片文章，你会收获
1、TypeScript的历史及其优势
2、TypeScript和JavaScript的差别
3、TypeScript的安装及编译
4、TypeScript的基本类型

TypeScript 是由微软公司在 2012 年正式发布，现在也有 8 年的不断更新和维护。是Javascript的一个超集，其实本质上是向Javascript 添加了可选的静态类型和基于类的面向对象编程。使其具有很好的代码的可读性和可维护性,开发大型的项目。

线上学习可以不用安装 typescript，而是直接使用TypeScriptPlayground([https://www.typescriptlang.org/play]) 来学习新的语法或新特性。通过配置 TS Config 的 Target，可以设置不同的编译目标(ES版本)，从而编译生成不同的目标代码。

1、安装命令 npm i -g typescript 
2、测试安装是否成功 tsc -v 
3、有版本信息则说明安装成功 Version 4.0.2

// 编译单个文件命令
tsc a.ts
// 监控并编译单个文件命令
tsc a.ts -w
// 可以编译所有的ts文件，但是它会根据配置文件（tsconfig.json）去编译,tsconfig.json的配置将会在下一篇文章写到
tsc 
// 监控所有文件编译
tsc -w

1、将ts文件跟据编译选项编译为指定版本的js
2、将js文件打包
3、部署到浏览器运行

let str:String = "hello world";
console.log(str)

"use strict";
let str = "hello world";
console.log(str);

1、我们发现 str 参数的类型信息在编译后被擦除了。TypeScript 只会在编译阶段对类型进行静态检查，如果发现有错误，编译时就会报错。而在运行时，编译生成的 JS 与普通的 JavaScript 文件一样，并不会进行类型检查。
2、如果你跟着敲了代码，并且有其它的思想，你会发现当你预设了一个类型给到变量，那么后期再赋值时，只能赋值相同类型的值给到这个变量。例如: str = 123;这时候编辑器会报错。因为str 的类型是String

let isDone: boolean = false;

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

let name: string = "bob";

//  第一种，可以在元素类型后面接上 []
let list: number[] = [1, 2, 3];
// 第二种方式是使用数组泛型，Array<元素类型>：
let list: Array<number> = [1, 2, 3];

// 定义元组的类型，第一个值是string类型，第二个值是number类型
let x: [string, number];
// 给元组正确赋值
x = ['hello', 10]; // OK
// 给元组错误赋值
x = [10, 'hello']; // Error

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 不会报错
let notSure: any = 4;
notSure = "maybe a string instead";

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
function warnUser(): void {
    console.log("This is my warning message");
}

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

1、never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；
2、never类型是任何类型的子类型，也可以赋值给任何类型；any不可以赋值给never。
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

1、就是除number，string，boolean，symbol，null或undefined之外的类型。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;