Typescript

typescript持续更新中…

1. 环境搭建
1
2
3
4
5
6
1. node	node环境
2. npm install typescript -g/yarn global add typescript 安装命令
3. tsc Demo.ts ts文件转js文件
4. node Demo.js 运行
5. npm install -g ts-node 安装全局简易命令
6. ts-node Demo.ts 简易运行命令
2. 静态类型
(1) 基础类型
1
let count : number = 1;
(2) 自定义类型
1
2
3
4
5
6
7
8
interface Demo {
uname: string,
age: number
}
const demo: Demo = {
uname: ‘小红’,
age: 18
}
3. 基础静态类型和对象类型
(1).基础静态类型
1
number string null undefinde boolean void symbol
(2).对象静态类型
1
2
3

对象类型
number string null undefinde boolean void symbol
1
2
3

数组类型
const demo : string = [‘小红’,‘小明’,‘小胖’]
1
2
3
4
5
6
7
8
9
10
11
12

类类型
class Person{}
const demo :Person = new Person()
ss
```


```Typescript

函数类型
const demo : ()=>string = () => { return ‘小红’ }
4. 类型注解和类型推断
(1).类型注解

给变量类型进行声明

1
2
3
4
5
6
7
let count : number;
count = 123;

function getTotal (one : number,two : number) {
return one + two
}
const total = getTotal1(1,2)
(2).类型推断

根据变量的值进行推断变量属于什么类型

1
2
3
4
5
6
let countInference = 123;

const obj = {
name:'小红',
age:18
}
5. 函数参数类型注解和函数返回类型注解

函数返回类型注解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getTotal (one : number,two : number) :number {
return one + two
}
const total1 = getTotal(1,2)


function sayHello() : void {
console.log('Hello World')
}


function errorFuc() : never {
throw new Error()
console.log('Hello World')
}


function forNever() :never {
while (true) {
console.log('Hello World')
}
}

函数参数类型注解

1
2
3
4
5
6
7
8
9
10
function add ({one,two} :{one : number,two : number}) {
return one + two
}
const total = add({one:1,two:2})


function getNumber({one} : {one : number}){
return one
}
const one = getNumber({one:1})
6. 数组类型类型注解

数组类型类型注解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const numberArr : number[] = [1,2,3];

const stringArr : string[] = ['a','b','c'];

const undefinedArr : undefined[] = [undefined,undefined];

const arr : (number | string)[] = [1,'string',2];


type alisa 类型别名

type Lady = {name:string,age:number}
const obj : Lady[] = {
{name:'李雷',age:28},
{name:'李华',age:18},
}


class Madam {
name: string;
age: number;
}
const obj : Madam[] = {
{name:'李雷',age:28},
{name:'李华',age:18},
}
7. 元数组使用和类型约束

元组的基本应用

代码如下:

1
const array = ['xiaoming','xiaohong',28]

类型注解如下:

1
const array : (string | number)[] = ['xiaoming','xiaohong',28]

此时更改代码格式依然不会报错,代码如下:

1
const array : (string | number)[] = ['xiaoming',28,'xiaohong']

我们简单的把数组内容调元一下位置,但是Typescript并不能发现,所以我们需要一个更强大的类型,来解决这个问题,元组类型;代码如下:

1
2

const array : [string,string,number] = ['xiaoming','xiaohong',28]

元组的使用

1
2
3
4
5
const array : [string,string,number][] = [
['dajiao1','teacher1',281],
['dajiao2','teacher2',282],
['dajiao3','teacher3',283]
]
7. Typescript中的interface接口

现在某某某足疗店需要招聘技师,这时候需要一些小姐姐简历的自动筛选功能,不符合要求的直接过滤掉,符合要求的才能进入下一轮面试。

interface接口初步了解

现在我们要做一个简历的自动筛选程序,年龄要小于25岁,胸围大于90公分,可以进入面试环节,并且要看到女孩们的简历。代码如下:

1
2
3
4
5
6
7
8
9
10
11
const uname = (name:string, age:number, bust:number)=>{
age < 24 && bust >= 90 && console.log(name + '进入面试');
age > 24 || bust < 90 && console.log(name + '被淘汰');
}
const getUname = (name:string, age:number, bust:number)=>{
console.log(name + '年龄是' + age);
console.log(name + '胸围是' + bust);
}

uname('fengtao',20,95);
getUname('fengtao',20,95);

作为一名程序员要时时刻刻都考虑到该如何偷懒,所以这里我们要强调’代码重用’,之前有一个类型别名的知识可以解决代码重复问题,现在我们去了解一个更常用的语法接口(interface)

我们可以重复的类型注解,定义成一个统一的接口。代码如下:

1
2
3
4
5
interface Girl {
name:string;
age:number;
bust:number
}

有了接口之后,我们的程序也要进行修改,需要写成下面的样子。这样就更像是面向对象编程了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const uname = ( girl:Girl )=>{
girl.age < 24 && girl.bust >= 90 && console.log(girl.name + '进入面试');
girl.age > 24 || girl.bust < 90 && console.log(girl.name + '被淘汰');
}
const getUname = ( girl:Girl )=>{
console.log(girl.name + '年龄是' + girl.age);
console.log(girl.name + '胸围是' + girl.bust);
}
const girl = {
name:'fengtao',
age:20,
bust:95
}

uname(girl);
getUname(girl);

接口(interface)和类型别名的区别

现在我们了解接口,也了解类型别名,这两个语法用起来好像一样,但是还是有不少的不同。

类型别名可以直接给类型,比如string,而接口必须代表对象

比如我们的类型别名可以写出如下代码:

1
type Girl = string

但是接口就不能这样写,它必须代表的是一个对象,也就是说初始化girl的时候,必须写出它下面的形式。

1
2
3
4
5
const girl = {
name:'xiaohong',
age:18,
bust:90
}

接口非必选值的定义

这时候有个别客户提出了另一个要求,不作为硬性要求,要求小姐姐的腰围是XX一下。其实typesript已经为我们准备好了相应的办法,就是在 : 号前面加一个 ?

比如把 Girl 的接口这样写

1
2
3
4
5
6
interface Girl {
name:string;
age:number;
bust:number;
waistline ?: number;
}

然后我们修改一下 getUname 方法,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
const getUname = ( girl:Girl )=>{
console.log(girl.name + '年龄是' + girl.age);
console.log(girl.name + '胸围是' + girl.bust);
girl.waistline && console.log(girl.name + '腰围是:' + girl.waistline);
}
const girl = {
name:'fengtao',
age:20,
bust:95,
waistline:60,
}

getUname(girl);

这时候在定义 Girl 对象的时候,就可以写 saistline (腰围),也可以不写了。

查看评论