typescript学习

小小小的学习日记

已于 2022-12-02 11:34:57 修改

阅读量703

点赞数

分类专栏： JavaScript 文章标签： typescript 学习 javascript

于 2022-11-18 16:56:12 首次发布

本文链接：https://blog.csdn.net/qq_45108629/article/details/127925924

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ts的安装与运行

安装ts
```
npm install -g typescript
```
查看ts版本
```
tsc -v
```
将ts文件转为js文件
```
tsc 文件名.ts
```
执行js文件
```
node 文件名.js
```

ts基础语法

ts
- 模块
- 函数
- 变量
- 语句和表达式
- 注释
ts常用编译参数
- tsc --help
ts保留关键字
- var
- const
- …
ts区分大小写
分号可选
ts注释
- 单行注释 //
- 多行注释 /**/
面向对象
- 对象：对象objects是类的一个实例，有状态和行为
- 类：类class是一个模版，描述一类对象的状态和行为
- new关键字创建类的对象

ts基础类型

ts包含的数据类型如下：

any 任意类型

当该变量的类型不确定时，可以定义为any
声明为any的变量可以赋予任意类型的值

let x: any
x = 1
x = 'hello'
console.log(x) //hello
-----------------------------
let arrayList: any[] = [1, false, 'fine']
arrayList[1] = 100
console.log(arrayList) //[ 1, 100, 'fine' ]

number 数字类型
- ```
let n: number = 1
console.log(n) //1
```

string 字符串类型

let s: string = 'hello,ts!'
console.log(s) //hello,ts!

boolean 布尔类型

let flag: boolean = true
if (flag) {
  console.log('hello') //hello
} else {
  console.log('ts')
}

null 表示对象值缺失,空对象引用

undefined 用于初始化变量为一个未定义的值

console.log(typeof null) //object
console.log(typeof undefined) //undefined

null和undefined是其他类型的子类型，可以赋值给其他类型
此时赋值后的类型会变为null或undefined 

但是当ts开启了严格的空校验strictNullChecks特性后
let y: number
y = undefined //会提示不能将类型“undefined”分配给“number”
y = null //会提示不能将类型“null”分配给“number”

如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型
let y: number|null|undefined

数组类型

方式一：在元素类型后面加上[]
let arr: number[] = [12, 23, 34]
方式二：使用数组泛型
let arr2: Array<string> = ['hello', 'ts', 'haha']

console.log(arr, arr2) //[ 12, 23, 34 ] [ 'hello', 'ts', 'haha' ]

元组

用来表示已知元素数量和类型的数组，各元素的类型不必相同，但对应位置的类型需要相同
即数量和类型有限的数组

let yuanzu: [number, string, boolean] = [1, '123', true]
console.log(yuanzu) //[ 1, '123', true ]

enum 枚举用于定义数组集合

默认情况下，从0开始为元素编号
当red=3时，表示从3开始为元素编号

enum Color {
  // red,
  red = 3,
  pink,
  blue
}
let r: Color = Color.red
let p: Color = Color.pink
let b: Color = Color.blue
// 当red没赋值时，打印结果为 0 1 2
console.log(r, p, b)
// 当red没赋值3时，打印结果为 3 4 5

red 的值是被计算出来的。注意注释部分，如果某个属性的值是计算出来的，那么它后面一位的成员必须要初始化值。

function getValue() {
  return 3
}
enum Color {
  red = getValue(),
  pink = 6,// 此处必须要初始化值，不然编译不通过
  blue
}
let r: Color = Color.red
let p: Color = Color.pink
let b: Color = Color.blue

console.log(r, p, b) //3 6 7

可以根据枚举的值可到名字
console.log(Color[6]) //'pink'

void 用于标识方法返回值的类型，表示该方法没有返回值
- ```
function sayHi(): void {
  console.log('hi!')
}
sayHi()
```

never

never是其他类型的字类型，代表从不会出现的值
这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

ts 变量声明

ts变量声明

ts变量命名规则：变量名称可以包含（数字、字母、$美元符号、_下划线），不能以数字开头

可以使用以下四种方式来声明变量：

var a //声明变量，但没设置类型和初始值，类型可以是任意类型，默认初始值为undefined
var b: number //声明变量，有类型，但没初始值，默认初始值为undefined
var c = 'hello' //声明变量，有初始值，但没类型，该变量可以是任意类型
var d: boolean = true //声明变量，有初始值，有类型

类型断言？？？？？

类型推断

当没有给出变量的类型时，ts编译器会利用类型推断来推断类型

var num=2 //var num: number
num='123'//编译错误 不能将类型“string”分配给类型“number”。

如果由于缺乏声明而不能推断出类型，那么此变量的类型为any类型
- ```
var a //var a: any
a=1
a='123'
```

变量作用域

全局作用域
类作用域
局部作用域

var e = 1 //全局变量
class Numbers {
  // 类变量（实例变量，静态变量）在类里面，方法的外面。可通过类的对象访问到
  f = 2 //实例变量
  static g = 3 //静态变量，静态变量可以通过类型直接访问
  h(): void {
    var i = 4 //局部变量
    console.log('i', i)
  }
}
console.log(e) //1
var obj = new Numbers()
console.log(obj.f) //2
obj.h() //i 4
console.log(Numbers.g) //3

ts运算符

算术运算符

+	加
-	减
*	乘
/	除
%	取模（余数）
++	自增
--	自减

关系运算符
- ```
==
!==
>
>=
<
<=
```
逻辑运算符
- ```
&&	and
||	or
!		not取反
```
短路运算符
- ```
&&
||
```
位运算符(不懂，没怎么用过)
- ```
&
|
~
^
<<
>>
>>>
```
赋值运算符
- ```
=
+=
-+
*=
/=
```
三元运算符
- ```
a?b:c
```
类型运算符
- ```
typeof 
instanceof
```

其他运算符

负号运算符（-）

var x: number = 1
var y = -x
console.log(x, y) //1 -1

字符串运算符：连接运算符（+）

var str: string = 'hello,' + 'ts'
console.log(str) //'hello,ts'

ts条件语句

if
else
else if

switch case

ts循环

for()
for...in
for...of
forEach
every
some
while
do...while
break语句
continue语句
无限循环
	for(;;){}
	while(true){}

ts函数

函数定义与函数调用

function test(){
	console.log(111)
}
test()

函数返回值

将函数执行结果返回到调用它的地方

function function_name():return_type{
	return value
}

带参数函数

function add(x: number, y: number): number {
  return x + y
}
console.log(add(1, 3)) //4

可选参数

可选参数使用？标识
可选参数必须跟在必选参数后面

function add(x: number, y: number, z?: number): number {
  if (z) {
    return x + y + z
  } else {
    return x + y
  }
}
console.log(add(1, 3)) //4
console.log(add(1, 4, -1)) //4

默认参数

调用该函数时如果未传入该参数就使用该参数的默认值

function add(x: number, y: number, z: number = 10): number {
  return x + y + z
}
console.log(add(1, 3)) //14
console.log(add(1, 4, -1)) //4

注意参数不能同时设为可选和默认

剩余参数

function str(x: string, y: string, ...z: string[]) {
  console.log(x) //'hello'
  console.log(y) //'hi'
  console.log(z) //[ 'ym', 'haha', 'xixi' ]
}
str('hello', 'hi', 'ym', 'haha', 'xixi')

function getSum(...numbers: number[]): number {
  var sum = 0
  for (var i = 0; i < numbers.length; i++) {
    sum += numbers[i]
  }
  return sum
}
console.log(getSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) //55

匿名函数
- ```
var fun=function(){}
```
构造函数
- ```
new Function()
```
递归函数,即在函数内调用函数本身，抽时间好好学学！！！
Lambda函数，也称为箭头函数
- ```
var fun=()=>{}
```

ts Number、String、Array、Map、元组

参考js,好好复习一下！！！

ts 联合类型

通过管道符｜将变量设置多种类型
- ```
var x:number|number[]
```
也可将联合类型作为函数参数使用
- ```
function fun(x:number|number[]){}
```

ts 接口、类

参考js

定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。

interface IPerson {
  firstName: string
  lastName: string
  sayHi: () => string
}

var customer: IPerson = {
  firstName: 'y',
  lastName: 'm',
  sayHi: (): string => {
    return 'hello'
  }
}
console.log(customer.firstName) //'y'
console.log(customer.lastName) // 'm'
console.log(customer.sayHi()) //'hello'

可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

interface nameList {
  [index: number]: string
}
var list: nameList = ['apple', 'huawei', 'vivo']

接口继承

Child_interface_name extends super_interface_name

ts命名空间、模块、声明文件

看不懂……