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