TypeScript语言简介

概述

微软公司开发的一种基于JavaScript语言的编程语言。
增强JavaScaript的功能，使其更适合多人合作的企业级项目。
TypeScript可以看成是JavaScript的超集(superset:/ˈsjuːpəset/),即它继承了后者的全部语法，所有JavaScript脚本都可以当作TS脚本(但是可能会报错)，此外它再增加了一些自己的语法。
TS对JS添加的最主要部分，就是一个独立的类型系统。

类型的概念

类型(type)指的是一组具有相同特性的值，如果两个值具有某些共同的特征，它们就是同一种类型。
举例：

let a = 123
let b = 234

// 两者都是数字
// 两者都具备加、减、乘、除等数值运算
// 所以都属于 typeof a/b === 'number' 类型

确定的它的类型，就知道运用场景，凡是不适用的地方，使用这个值都会报错。
类型是人为添加的一种编码约束和用法提示。
举例：

function sum(a:number,b:number):number{
    return a + b
}
sum(123,'1234')

上述代码比较简单，正常的JS计算加和，但是结合TS给形参增加了类型，那根据TS的特性，sum的实参'1234'就是提示报错,这样在调用函数时就是知道需要什么参数才能支持这个函数执行。

动态类型与静态类型

JS的类型系统几乎是没有的，基础类型和引用类型可相互赋值不会报错，这种特性属于动态类型

let a = 123;
a = {
    name:'name',
    age:123,
}
// 最终 a的值会变更对象类型

TS引入了比较严格的类型系统，属于静态类型语言

let a = 123;
// Type '{name:string;}' is not assignable to type 'number'
// 类型“{name:string;}”不能赋值给类型“number”
a = {
    name:'name'
}

这一特征可规避你不了解的变量不可修改，避免多次迭代无法控制影响范围。

缺点

丧失了动态类型的代码灵活性
增加了编程工作量
更高的学习成本
引入了独立的编译步骤

优点

有利于代码的静态分析
有利于发现错误
有助于代码重构
更好的IDE支持，做到语法提示和自动补全

TypeScript基本用法

类型声明

// 基础类型声明 | 或者的意思 可以赋值数字类型或者undefined
let total:number|undefined // 数字类型|undefined
total = 123 | undefined

let name:string
name='张三'
name=123 // 报错

// 引用类型声明
let sum = (a:number,b:number):number=>{
    return a + b
}
// 正常运行
sum(12,13) 
// 报错 Argument of type 'string' is not assignable to paramenter of type 'number'.
// 'string'类型的参数不能赋值给number类型的参数
sum(12,'13')

interface Object{
    name:string
}
let obj:Object={}
// 正常运行
obj.name = 'name' 
// 报错 Type 'number' is not assignable to type 'string'.
// 类型'number'不能赋值给类型'string'.
obj.name = 123

运行环境

官网在线编译 TypeScript Playground
tsc 编译器及部分命令

  npm install -g typescript
  tsc -v 查看版本
  tsc -h 帮助信息
  tsc app.ts 编译文件
  tsc app1.ts app2.ts app3.ts 同时执行
  tsc app1.ts app2.ts --outFile app.js 多脚本编译成一个JS文件
  tsc app.ts -- outDir dist 编译输出路径

tsc --init 生成 tsconfig.json 配置文件

在 tsconfig.json 文件中配置

outDir:'./dist' 输出的文件位置
include:['./src'] 引入文件的位置

在命令行输入 tsc -p tsconfig.json -watch 实现监听

ts-node 模块

 npm install -g ts-node
 ts-node app.ts 运行脚本
 
 // 如果不安装ts-node
 npx ts-node app.ts npx也可执行

结尾

个人技术落后就要挨打，成长是个人的，接受一切成长道路上所收集的宝贵意见。

TypeScript入门之基础用法

TypeScript语言简介

概述

类型的概念

动态类型与静态类型

TypeScript基本用法

运行环境

结尾