2021-12-23 typescript学习笔记(一) Typescript的介绍和安装使用,类型注解,Typescript的数据类型

0.介绍

1.TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
2.TypeScript 由微软开发的自由和开源的编程语言。
3.TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

1.为什么要学习 TypeScript？

TypeScript 让我们的代码更可靠更清晰。
TypeScript 是 JavaScript 超集，完全兼容所有 JavaScript 语法规则。

2.Typescript的特点

1.始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、
Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

2.强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时
使用高效的开发工具和常用操作(如静态检查和代码重构。)

3.先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，
包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，
比如异步功能和 Decorators，以帮助建立健壮的组件。

3.安装和使用

安装命令:npm install -g typescript

检查:`tsc -V

helloworld.ts

编写如下代码

function say (data) {return 'Hello, ' + data}
console.log(say('world'))

在终端输入:tsc helloworld.ts,生成一个同名的js文件,
node运行此js文件:node helloworld.js
输出:hello world

4.让vscode自动编译出同名js文件

(1)  生成配置文件tsconfig.json
    tsc --init
(2) 修改tsconfig.json配置
    "outDir": "./js",
    "strict": false,    
(3) 启动监视任务: 
    终端 -> 运行任务 -> 监视tsconfig.json

5.类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式

示例:接上例,给say函数的参数添加 string 类型注解

function say (data: string) {return 'Hello, ' + data}
console.log(say('world'))

此时data只能是一个字符串,否则报错:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

6.TypeScript 数据类型

6.1.Typescript的基本数据类型

TypeScript 对比 JavaScript 来讲是一门强类型语言，不能更改原有的类型

示例:Typescript不能更改原有类型

JavaScript

let a = '1';
a = 1;
console.log(typeof(a)); // Number

Typescript:

let a = '1';
a = 1; // Type '1' is not assignable to type 'string'

Typescript定义变量的方式:let a: string = '1'

类似的还有

let a: string = '1';
let num: number = 1;
let ifLogin: boolean = false;

anything

let anything;// 一种特殊的类型
anything = 1;
anything = '1';

可以不对当前值做初始化，此时变量可以被赋值为任意值。等同于：let anything: any;

6.2.Typescript的数组类型

在 TypeScript 中数组的原型写法

let name: Array<string> = ['a','b']
console.log(name[0]);

前面的 Array 是 name 这个变量的值的类型，
<>里面的string是数组里面的值的类型。

其他写法

let numbers: Array<number> = [1, 2, 3];
let numbers: number[] = [1, 2, 3];
let anyArray: any[] = [1, '2', false];

6.3…Typescript的元组类型（tuple）

在数组里面设置多个类型值:let box: [string, number] = ['hello', 2];
与数组的区别:元组的长度是有限的，而且分别为每一个元素定义了类型

6.4.Typescript的枚举(enum)

枚举:组织收集一组相关变量的方式。

字符串枚举

字符串枚举

```typescript
enum Color{
    Black,
    Yellow,
    Red
}
let myColor: Color = Color.Red;
console.log(myColor); // 输出 3

枚举存的是数值，而不是属性 Red

字符串枚举类型允许使用字符串来初始化枚举成员

enum SIJI {
    chun = '春',
    xia = '夏',
    qiu = '秋',
    dong = '冬'
}
console.log(SIJI.chun,SIJI.xia,SIJI.qiu,SIJI.dong)//春夏秋冬

数字的枚举:下标从0开始,也可以自行设置枚举成员的初始值，它们会依次递增

6.5.变量类型

number 类型(Infinity, -Infinity, NaN 也属于Number类型)

let num1 : number = 20;
let num2 : number = 175.5;
let a1 : number = Infinity; //正无穷大
let a2 : number = -Infinity; //负无穷小
let a3 : number = NaN;

undefined 类型的数据只能被赋值为 undefined

let un : undefined = undefined;

在 typescript中，已声明未初始化的值要直接访问的话，类型需要定义为undefined

null 类型只能被被赋值为null

let nu : null = null;

null和undefined的区别

null是一个空指针对象，
undefined是未初始化的变量
可以把undefined看成一个空变量，把unll看成一个空对象。
默认情况下，undefined 和 null 类型，是所有其它类型的子类型，
也可以说成，它们可以给所有其他类型赋值

string 类型

let str : string = '你好！'//值类型
let str1 : String = new String('你好！')//引用类型

boolean 类型

let boo : boolean = true;
let boo1 : boolean = false

symbol类型的值是通过Symbol构造函数创建的

let sy : symbol = Symbol('bar');

6.6.函数类型

let myfunc;
//这里的 myfunc 是 void 类型，可以存储不同的函数
function say():void { console.log('hahaha');}
myfunc = say;
myfunc();       // 输出 hahaha

function box(val1:number, val2:number){ return val1 + val2}
myfunc = box;
myfunc(5, 5);   // 输出 10

6.7.函数的相关类型

返回值的类型

function returnVal1():string{ return 'hello';}
console.log(returnVal1())//hello

function returnVal2():string{return 100;}
console.log(returnVal2()) //打印报错

参数返回值

function box(val1,val2){return val1+val2}
box(1, '2');    // 输出 '12';
// 等同于
function box(val1:any, val2:any){return val1 + val2}
box(1, '2');    // 输出 '12';
// 可以定义类型
function box(val1:number, val2:number){return val1 + val2}
box(1, 2);      // 输出 3
box(1, '2');    //报错

设置返回值类型

function box(val1:number, val2:number):number{return val1 * val2}
box(1, 2);      // 输出 3

6.8.对象类型

let obj = {
    name: "cheng",
    age: 20
};
obj = {}// 报错:因为初始化的时候已经给 obj 这个对象设置了属性和属性值类型 
 
obj = {
    a: 'cheng',
    b: 20
}// 报错:因为初始化的时候已经给 obj 设置格式, 包含了 name，age 所以在 obj 里面要有 name 和 age             

正确写法

let obj:{name: string, age: number} = {
    name: "cheng",
    age: 20
};
obj = {//obj 里面要有 name 和 age             
    name: 'wu',
    age: 18
} 

复杂对象类型

let comp: {data: number[], myfunc:(itme: number)=> number[]} = {
    data: [1, 2, 3],
    myfunc: function(itme: number):number[]{
        this.data.push(itme);
        return this.data;
    }
};
console.log(comp.myfunc(20)); // 输出 [1, 2, 3, 20]

6.9.type 生成类型

type IType = {data: number[], myfunc:(itme: number)=> number[]};
let comp: IType = {
    data: [1, 2, 3],
    myfunc: function(itme: number):number[]{
        this.data.push(itme);
        return this.data;
    }
};
console.log(comp.myfunc(10)); // 输出 [1, 2, 3, 10]

6.10.union type类型

let unionType:any = 12;
unionType = '12';
let a:number| string| boolean = 12;
a = '12';
a = true;
a = {}; // 报错

6.11.检查类型

let checkType = 10;
if(typeof checkType == "number"){
    console.log('number');
}

6.12.never类型

never 类型是任何类型的值类型，也可以赋值给任何类型。
然而没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。
any 也不可以赋值给 never。
通常表现为抛出异常或无法执行到终止点（例如无线循环）。

let x:never;
x = 12; // 报错: 不能将其他类型转为 never 类型
let y: number;
y = (()=>{
    throw new Error(msg)
})();

never 类型的使用场景

never 的应用场景

• 抛出异常

 function error (msg: string):never {
    throw new Error(msg)
}

• 死循环

function loop():never{
    while (true){}
 }