什么是typescript

简介

TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

静态类型：

• 可读性增强
• 可维护性增强：在编译阶段可以暴露大部分的错误

JS的超集：

• 包含于兼容所有的JS特性，支持共存
• 支持渐进式引入与升级

内容

使用Typescript

编辑器的推荐： Visual Studio Code - Code Editing. Redefined

获取TypeScript工具的方法：

• 通过npm（Node.js包管理器）
• 安装TypeScript的Visual Studio插件

一个简单的ts的demo：

console.log("hello ts w d");
let age: number = 18
console.log(age);
复制代码

基础数据类型

字符串：const a: string = 'juejin'

数字：const b: number = 1

布尔值:const c: boolean = false

null：const d: null = null

undefined:const e: undefined = undefined

联合类型

顾名思义就是不止一种数据类型，比如一个数组中既可以有number，也可以又string类型

let arr: (number | string)[] = [1,2,'scsad','sds']

类型别名

自己定义的一个类型

type CustomArray = (number | string)[]


let arr1: CustomArray = [1,2,'scsad','sds']
let arr2: CustomArray = [1,2,3,'scsad','sds']
复制代码

函数类型

一个两数相加的demo：函数中的两个参数被指定了数据类型为number，同时也为函数本身添加返回值类型。 返回值return没有添加数据类型的原因是：TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

function add(num1: number, num2: number): number {
    return num1 + num2;
}

console.log(add(1, 2));
复制代码

如果调用函数的时候不是number型就会报错，并且会给出错误的提示内容。

对象类型

let person: {name: string; age: number; sayHi(): void; greet(name: string): void } = {
    name: '张三',
    age: 18,
    sayHi(){},
    greet(张三){}
}
复制代码

Typescript工程应用

1. 配置webpack loader相关配置
2. 配置tsconfig.js文件
3. 运行webpack启动/打包
4. loade处理ts文件的时候，会进行编译和类型检测

总结

学习Typescript会发现他有很多的优点，而且可以在编译的时候发现出大部分的问题 ，增强代码的可读性和可维护性，多看代码和写代码可以更好的理解，出现数据类型很多种的时候要一层一层分析

引用参考：

TypeScript 中文手册 - TypeScript 中文手册 (bootcss.com)

TypeScript 教程_w3cschool