ts基础

TypeScript介绍与安装

TypeScript介绍

  • TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。
  • 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript
  • TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。
  • TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。
  • TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。
  • TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub 上

特点

  • 始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

  • 强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

  • 先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

安装TypeScript

命令行运行如下命令，全局安装 TypeScript：

1
npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：

1
tsc -V

使用TS代码

  • 如果在ts文件中之只编写js的语法 在html页面中可以直接引入 在谷歌浏览器中可以直接使用 如果带有ts的语法 需要在命令行执行tsc xx.ts 进行编译为js代码 再在页面中引入js文件来使用
  • ts文件中的函数中的形参 如果使用了某个类型进行修饰 那么最终在编译的js文件中是没有这个类型的
  • ts文件中的变量使用let进行修饰 编译后的Js文件就会变成var

编译TS代码

手动编译 执行后自动生成js文件

1
tsc helloworld.ts

运行js代码

1
node helloworld.js

vscode自动编译

1
2
3
4
5
6
1). 生成配置文件tsconfig.json
    tsc --init
2). 修改tsconfig.json配置
    "outDir": "./js", //指定js文件的生成路径   
3). 启动监视任务: 
    菜单栏点击 终端 -> 运行任务 -> 监视tsconfig.json

TS的特性

  • 类型注解 为函数或变量添加约束 若user传入数组编译则会报错
1
2
3
4
5
6
7
function greeter (person: string) {
  return 'Hello, ' + person
}

let user = 'Yee'

console.log(greeter(user))

TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

  • 接口 允许在实现接口时只要保证包含了接口要求的结构 不用明确的使用implements语句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))
  • 类 对ts进行编译后 ts里的类只是一个语法糖 本质上还是js函数的实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class User {
  fullName: string
  firstName: string
  lastName: string

  constructor (firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new User('Yee', 'Huang')

console.log(greeter(user))

使用webpack打包TS

新建build public src目录 命令行分别执行npm init -y 生成package.json 执行tsc --init生成ts配置文件

下载依赖

1
2
3
4
5
6
npm install -D typescript
npm install -D webpack webpack-cli
npm install -D webpack-dev-server
npm install -D html-webpack-plugin clean-webpack-plugin
npm install -D ts-loader
npm install -D cross-env #跨平台命令

在package.json中配置打包命令

1
2
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"

最后运行npm run dev就可以在浏览器中自带打开

运行npm run build打包生成dist

语法

基础类型

语法：let 变量名:数据类型 = 值

ts变量一开始是什么类型 后期赋值也只能用这个类型的数据进行赋值

布尔类型
1
2
let isDone: boolean = false;
isDone = true;
数字

TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量

1
2
3
4
let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制
字符串
1
2
3
4
5
let name:string = 'tom'
name = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is ${name}, I am ${age} years old!`

字符串和数字类型可以使用+进行拼接

undefined 和 null
1
2
let u: undefined = undefined
let n: null = null

默认情况下 null 和 undefined 是所有类型的子类型。 在”strict“严格模块没打开时 可以把 null 和 undefined 赋值给 number 类型的变量

数组

有两种方式可以定义数组

1
2
let list1: number[] = [1, 2, 3]
let list2: Array<number> = [1, 2, 3] //泛型的写法

数组定义后 和java中的Array数组类似 里面的数据类型必须和定义数组的时候的类型一样

元组

允许表示一个已知元素数量和类型的数组 各元素的类型不必相同 但类型和数据的个数一开始就已经确定了

1
2
3
let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error

访问呢已知所以的元素 可以得到正确的值

1
2
console.log(t1[0].substring(1)) // OK
console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法
枚举

使用枚举类型可以为一组数值赋予友好的名字 枚举中的每个数据值都可以叫做元素 每个元素都有自己的编号 从0开始 依此加一

1
2
3
4
5
6
7
8
9
10
enum Color {
  Red,
  Green,
  Blue
}

// 枚举数值默认从0开始依次递增
// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 0
console.log(myColor, Color.Red, Color.Blue)

也可以手动的指定成员的数值

1
2
3
4
enum Color {Red = 1, Green, Blue} //从1开始编号
let c: Color = Color.Green
//直接通过索引也可以查找到元素名
let colorName: string = Color[2]
any

any可以为那些在编程阶段还不清楚类型的变量指定一个类型

1
2
3
4
5
6
7
let notSure: any = 4
notSure = 'maybe a string'
notSure = false // 也可以是个 boolean

//也可以用any来定义一个类型、长度不确定的数组
let list: any[] = [1, true, 'free']
list[1] = 100

但是any定义数组时 若调用了不是该类型的方法 编译也不会报错 例如

1
list[1].split('');
void

void表示没有任何类型 当一个函数没有返回值时，通常会见到其返回值类型是 void

在函数声明时的小括号后带上void 代表函数没有任何函数值

1
2
3
4
5
6
7
/* 一般用来说明函数的返回值不能是undefined和null之外的值 */
function fn(): void {
  console.log('fn()')
  // return undefined
  // return null
  // return 1 // error
}

声明一个 void 类型只能为它赋予 undefined 和 null

object

object 表示非原始类型，也就是除 number，string，boolean之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的 API

1
2
3
4
5
6
7
8
9
10
11
12
//需求：参数是object类型 返回值也是object类型
function fn2(obj:object):object {
  console.log('fn2()', obj)
  return {
      name:'poi'
  }
  // return undefined
  // return null
}
console.log(fn2(new String('abc')))
// console.log(fn2('abc') // error 'abc'是string类型
console.log(fn2(String))
联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种
需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

1
2
3
function toString2(x: number | string) : string {
  return x.toString()
}

需求2: 定义一个一个函数得到一个数字或字符串值的长度

1
2
3
4
5
6
7
8
9
10
function getLength(x: number | string) {

  // return x.length // error 如果length存在就说明str是string类型的

  //if (x.length) { // 报错
 //   return x.length
  //} else {
    return x.toString().length
  //}
}
类型断言

通过类型断言可以解决上面的问题

类似于类型转换 但是不进行数据检查和解构 只在编译阶段起作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 
类型断言(Type Assertion): 可以用来手动指定一个值的类型
语法:
    方式一: <类型>值
    方式二: 值 as 类型  tsx中只能用这种方式
*/

/* 需求: 定义一个函数得到一个字符串或者数值数据的长度 */
function getLength(x: number | string) {
  if ((<string>x).length) {
    return (x as string).length
  } else {
    return x.toString().length
  }
}
console.log(getLength('abcd'), getLength(1234))
类型推断

类型推断: TS会在没有明确的指定类型的时候推测出一个类型
有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型

1
2
3
4
5
6
7
8
/* 定义变量时赋值了, 推断为对应的类型 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */
let b10  // any类型
b10 = 123
b10 = 'abc'

接口

  • 在 TypeScript 中，使用接口（Interfaces）来定义对象的类型
  • 接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
  • 接口类型的对象
    多了或者少了属性是不允许的
可选属性: ?
只读属性: readonly 一旦赋值就不能再改变

1
2
3
4
5
6
7
8
9
10
11
12
13
interface IPerson {
  readonly id: number
  name: string
  age: number
  sex?: string
}

const person2: IPerson = {
  id: 1,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以没有
}
readonly vs const

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用 readonly

函数类型

为了使用接口表示函数类型，需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

1
2
3
4
5
6
7
8
interface SearchFunc {
  (source: string, subString: string): boolean
}
//可以像使用普通接口一样使用函数类型的接口
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
  return source.search(sub) > -1
}
console.log(mySearch('abcd', 'bc'))
类类型
  • 一个类可以实现多个接口
  • 一个接口可以继承多个接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface Alarm {
  alert(): any;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car2 implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
  lightOn() {
    console.log('Car light on');
  }
  lightOff() {
    console.log('Car light off');
  }
}
接口继承接口
1
2
3
interface LightableAlarm extends Alarm, Light {

}

函数