TypeScript-邂逅TypeScript语法

noora
73 阅读5分钟

一、TypeScript类型缺失

任何新技术的出现都是为了解决原有技术的某个痛点

1. JavaScript的痛点

  • JavaScript语言本身存在很多的缺点
  • 比如ES5以及之前的使用的var关键字关于作用域的问题
  • 比如最初JavaScript设计的数组类型并不是连续的内存空间
  • 比如直到今天JavaScript也没有加入类型检测这一机制

2. 类型错误

  • 这个错误很大的原因就是因为JavaScript没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误
  • 如果我们可以给JavaScript加上很多限制，在开发中就可以很好的避免这样的问题了

3. 类型思维的缺失

  • 前端开发人员通常不关心变量或者参数是什么类型的，如果在必须确认类型时，我们往往需要使用各种类型验证

二、邂逅TypeScript开发

1. 认识TypeScript

  • JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的
  • TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先
  • 并且在语言层面上，不仅仅增加了类型约束，并且包括一些语法的拓展，比如枚举类型、元组类型等
  • 并且TypeScript最终会编译成JavaScript代码，所以不需要担心它的兼容性问题，在编译时也可以不借助于BaBel这样的工具

2. TypeScript特点

  • 始于TypeScript，归于TypeScript
    • TypeScript从今天数以百计的JavaScript开发者所熟悉的语法和语义开始
    • 使用现有的JavaScript代码，包括流行的JavaScript库，并且从JavaScript代码中调用TypeScript代码
    • TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript3以及更好版本的JavaScript引擎中
  • TypeScript是一个强大的工具，用于构建大型项目
    • 类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构
    • 类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为
  • 拥有先进的JavaScript
    • TypeScript提供最新的不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件
    • 这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3或更高版本的JavaScript

三、TypeScript运行环境

1. TypeScript的编译环境

  • 安装命令：npm install typescript -g
  • 查看版本：tsc --version

2. TypeScript的运行环境

  • 通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，直接运行在服务器上
  • 通过ts-node库，为TypeScript的运行提供运行环境

四、TypeScript变量声明

1. 变量的声明

  • 在TypeScript中定义变量需要指定 标识符 的类型
  • var/let/const标识符：数据类型 = 赋值
    let message: string = "Hello World"
  • 声明了类型后TypeScript就会进行类型监测，声明的类型可以称之为类型注解

2. 声明变量的关键字

  • 在TypeScript定义变量（标识符）和ES6之后一致，可以使用var、let、const来定义
  • 在tslint中并不推荐使用var来声明变量

3. 变量的类型推导

  • 声明一个标识符时，如果有直接进行赋值，会根据赋值的类型推导出标识符的类型注解，这个过程称之为类型推导
  • let进行类型推导，推导出来的通用类型
  • const进行类型推导，推导出来的字面量类型

五、JavaScript数据类型

  • number类型
num = 100 // 十进制
num = 0b110 // 二进制
num = 0o555 // 八进制
num = 0xf23 // 十六进制
  • boolean类型；true/false
  • string类型
  • Array类型
const names1: string[] = ["abc", "cba", "cba"]
const names2: Array<string> = ["abc", "cba", "cba"]
  • Object类型
  • Symbol类型
  • null和undefined类型
  • 函数的参数类型
    • TypeScript允许我们指定函数的参数和返回值类型
    • 参数的类型注解：声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型
    function greet(name: string) {
    console.log("hello" + name.toUpperCase())
}
  • 函数的返回值类型
function sum(num1: number, num2: number): number {
    return num1 + num2
}
  • 匿名函数的参数
    • 当一个函数出现在TypeScript可以确定该函数会被如何调用时，该函数的参数会自动指定类型

六、TypeScript数据类型

  • any类型
    • 在某些情况下，无法确定一个变量的类型，并且可能它会发生一些变化，这个时候可以使用any类型
  • unknown类型
    • 用于描述类型不确定的变量，但是unknown类型上的值做任何事情都是不合法的
  • void类型
    • 通常来指定一个函数是没有返回值的，那么它的返回值就是void类型
    • 函数默认返回的类型就是void的
    • 可以将undefined赋值给void类型，也就是函数可以返回 undefined
    • 当基于上下文的类型推导推导出返回类型为void的时候，并不会强制函数一定不能返回内容
  • never类型
    • 表示永远不会返回的内容
  • tuple类型
    • 元祖类型
    • 元祖中每个元素都有自己的特性的类型；数组中建议存放相同类型的元素
    const tInfo: [string, number, number] = ["why", 18, 1.88]
avatar
文章
阅读
粉丝