介绍
typescript 是 javascript 的一个超集，typescript 可以运行于任何系统，并且是开源免费的。
typescript 有以下几个特点：
- typescript 会在编译时对代码进行严格的静态类型检查，可以在编码阶段就发现问题，而不是在上线运行时才发现
- typeScript 语法遵循 ES 规范，更细速度快，不断支持最新的 ECMAScript 新特性，如装饰器、public/private 修饰符
- typescript 支持 OOP（面向对象）的接口，抽象类，多态特性
- typescript 可以为 IDE 提供更好的代码补全、接口提示、跳转到定义
- 还有重要一点是众多科技公司已经采用 typeScript 进行开发，也是前端工程师需要掌握的就业技能
安装环境
全局安装 TS
npm install typescript -g
项目安装
npm install typescript -D
查看版本
tsc -V
编译TS
tsc 01.ts
# 或开启监听
tsc 01.ts -w
01.ts
const hhh = 'ok'
执行 tsc 01.ts
01.js
var hhh = 'ok';
配置文件
TS 支持对编译过程使用配置项自定义
初始化
执行以下命令创建配置项 tsconfig.json
tsc --init
然后执行以下命令使用配置项的定义进行监测
tsc -w
配置选项
| 配置 | 说明 |
|---|---|
| noImplicitAny | 禁止使用隐含的 any 类型，如函数参数没有设置具体类型 |
| strictNullChecks | 开启时不否允许将 null、undefined 赋值给其他类型比如字符串 |
| target | 转换成 JS 的版本 |
| strict | 是否严格模式执行 |
| module |
TS的类型推断
当没有明确设置类型时，系统会根据值推断变量的类型
扫描二维码关注公众号，回复：
14325476 查看本文章
字符串
下例中系统会根据值推断 hj 变量为 string，当将 hj 设置为 18 的 number 类型时编译时将报误
let hj = 'ok'; // let hhh: string
hj = 18; // 不能将类型“number”分配给类型“string”
数值
ts 中的数值类型包括了小数、负数、整数
let hj = 1 // let hj: number
hj = 1.1
hj = -111
布尔值
值为 true 或 false 会被推断为 boolean 类型
let state = true; // let state: boolean
数组
下面是数组类型的推断结果，表示数组内容值为字符串
const hj = ['okk', 'hj'] // const hj: string[]
下面会推断数组允许的值为字符串或数值
const hj = ['ok', 'hj', 1] // const hj: (string | number)[]
hj.push(2, 'hk') // 数组允许数值、字符串类型，所以编译通过
hj.push(true) // 类型“boolean”的参数不能赋给类型“string | number”的参数
对象
const hj = {
name: 'hj',
age: 20,
status: true,
otherInfo: {
desc: '前端'
},
skill: ['Node.js', 'Webapck']
}
推断结果如下
const hj: {
name: string;
age: number;
status: boolean;
otherInfo: {
desc: string;
};
skill: string[];
}
基本类型
字符串
字符串使用 string 来声明
const hj: string = 'hj'
数值
在 TS 中不区分整数与浮点数，都使用 number 来声明
const hj:number = 100
布尔
使用 boolean 来声明布尔类型
const hj: boolean = true
数组
下面是对数组值类型为字符串
let hj2: string[] = []
hj.push('hj', 'ok')
下面是对数组值类型为字符串或数字
let hj2: (string | number)[] = []
hj2.push('hj', 2)
下面是数据限制类型为字符串或 由数字组成的数组
let hj3: string | number[] = []
hj3 = 'hj'
hj3 = [1, 2]
也可以使用泛型来声明数组（泛型的详细使用后面内容会介绍）
let hj:Array<string> = []
hj.push('hj', 'ok')
对象
下面是声明对象类型但不限制值类型
let hj: object
hj = {
name: 'hj'}
hj = {
} // 使用字面量声明对象
hj = [] // 数组是对象
hj = function () {
} // 函数是对象
hj = Object.prototype // 原型对象
hj = 'hj' // 报错，不能将类型“number”分配给类型“object”
限定对象值类型
let hj: {
name: string, year: number}
hj = {
name: 'hj', year: 2010}
hj.a = 1 // error: 类型“{ name: string; year: number; }”上不存在属性“a”
属性后面跟上? 用来指定 url 为可选值，这样的属性是非必填项
let hj: {
name: string, year: number, url?: string}
hj = {
name: 'hj', year: 2010}
未完待续