TypeScript快速上手

发表于 | 分类于 | 评论数： | 阅读次数：
本文字数： 2.4k | 阅读时长 ≈ 4 分钟

TypeScript快速上手

什么是TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。2012年十月份，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript 0.9，向未来的TypeScript 1.0版迈进了很大一步。

摘自百度百科

怎么使用TypeScript

1
2
3
4
5
npm i -g typescript
tsc -v // 查看版本号
// 在vscode中创建一个文件夹
cd 到这个文件
tsc -init // 会初始化一个tsconfig.json文件

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowJs": true
    "sourceMap": true,
    "outDir": "./js/",   /* Redirect output structure to the directory. */
    "rootDir": "./tscript/", 
    "removeComments": false,  //删除注释
    "noImplicitAny": false,
    ...更多配置项
}

编写一个以ts为后缀的文件

hello.ts

1
console.log('hello ts');

从目前来看与js并没有什么不同，通过接下来的学习来对typescript深入的学习吧！

如何将ts文件自动编译成js文件

在vscode中保存好编写的ts文件，终端 > 运行任务，选择ts监视，正常情况下vscode会自动打开终端面板输出一些信息，这样就成功了。

当然也可能会像我一样出现异常，具体什么原因还不得而知，解决办法很简单，在终端中按回车键，

手动输入tsc -w也可以成功

基本数据类型

1
2
3
4
5
6
let num1: number = 123
let str1: string = "hello"
let bol: boolean = true

num1 = NaN
num1 = Infinity

与js相比ts对变量名加上了类型的约束，number类型的约束值只是number类型，其它基本类型也是一样的

any：类型的变量可以是任意类型的值

1
2
3
4
5
let atr: any = true
atr = 123
atr = "123"
atr = undefined
atr = null

不指定类型的变量相当于any类型

联合类型

1
2
3
let tr: number | string = 123
tr = "hello"
tr = true // 这样就不行了

类型断言

1
2
3
4
5
6
7
function getLength(arg: number | string) {
    if(arg.length) {
        return arg.length
    } else {
        return arg.toString().length;
    }
}

显然这段程序是不能通过运行的，使用联合类型所约束的值，其方法只能是所共有的方法，比如toString

在number并没有length方法，所以这里报错了

使用类型断言来解决这样的问题

1
2
3
4
5
6
7
function getLength(arg: number | string) {
    if((<string>arg).length) {
        return (<string>arg).length
    } else {
        return arg.toString().length
    }
}

注意在tsx中使用 值 as 类型 这种方法

复杂数据类型

接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 定义了一个接口类型
interface IPerson {
  readonly id: number // readonly 只读
  name: string
  age: number
  sex?: string // 允许为空
}


const p1: IPerson = {
  id: 1,
  name: "xians",
  age: 18
}

const p2: IPerson = {
  id: 1,
  name: "xians",
  age: 18,
  sex: "男"
}

p1.name = "zhangsan"
p1.id = 1 // 只读，不允许修改

数组

1
2
3
4
5
6
7
8
// 定义数组的第一种方式
let arr: string[] = ['1','2','3']

// 定义数组的第二种方式，与Java泛型类似
let arr1: Array<number> = [1,2,3] 

// any类型数组可以写入任意类型的值
let arr2: any[] = [1, '2', true, null, undefined]

元组：特别的数组类型

1
2
3
4
5
// 元组的值须与约束类型一一对应
let user: [string, number] = ["xians", 18]

// 当添加元素越界时，它的类型为联合类型
user.push(true) // 报错

函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 函数的声明
function add(x: number, y: number): number {
  // 对形参和返回值都进行了约束
  return x + y
}

function fn(x: string, y?: string) {
	// 可选参数
}

function fn1(x: string, y:number=3) {
	// 形参默认值
}

function fun2(x:string, ...arg: any[]) {
	// 剩余参数
}
0%