介绍
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的类型推断
当没有明确设置类型时,系统会根据值推断变量的类型
字符串
下例中系统会根据值推断 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}
未完待续