typescript基础知识总结

2020-11-08　　07:59:04

typescript

1安装

npm i -g typescript

2编译和执行

方法一：

 tsc helloworld.ts
 ​
 //执行前先下载node.js
 node helloworld.js

方法二

 //执行前先安装ts-node
 npm i -g ts-node
 //安装好后执行以下命令：
 ts-node helloworld.ts

创建项目步骤总结：

1、新建文件夹 demo

2、npm init -y 生成 package.json 文件

3、tsc --init 生成 tsconfig.json，可以对 ts 的默认配置做修改

4、npm install -D（--save-dev） ts-node

npm install -D typescript

在 devDependencies 中安装 ts-node 编译 ts 用

5、创建 src 目录写真正的代码

6、在 package.json 里面 script 加 'dev': 'ts-node ./src/crowller.ts'

7、File -> Settings Language & Frameworks -> TypeScript 配置(ts语言规范配置)

8、File -> Settings Tools -> File Watchers 配置(ts文件自动编译为js文件) + custom

name: TypeScript

arguments: --target "ES5"

output paths to refresh: $FileNameWithoutExtension$.js

working directory: $FileDir$

常用命令注释：

tsc xxx.ts 将ts文件转换成js文件

tsc - -watch xxx.ts 监视ts文件，时时都转换成js文件

注释

单行注释

//

多行注释

 /*
 ​
 ​
 */

输出语句

console.log(‘hello’);

变量的基本使用

方法一

 //1声明变量类型
 let age: number;
 //2给变量赋值
 age = 15;

方法二

 let age: number = 20;

变量的命名规范

变量名只能出现：数字、字母、_、$，且不能以数字开头

区分大小写，小驼峰命名法

数据类型

原始类型（基本数据类型）

number(包含整型和浮点型，都用number)

string（单引号和双引号都可以）

boolean（true false）

underfined

null

 let u1: undefined = undefined;
 let n1: null = null;

特殊类型：any

对象类型（复杂数据类型）

运算符

算数运算

+

-

*

/

赋值运算

+= -= /= *=

字符串拼接（强制类型转换）

算数运算不会强制类型转换，只会报错

+“1” 代表强制类型转换，将string转换为数字类型

如果+“string”中的string不是数字，则强制类型转换没有意义

自增/减运算符

a++ a- -

比较运算符

< > >= <= ===相等 !==不相等

逻辑运算符

&& and

|| or

! 取反

判断

条件语句if…else…

if (判断条件){

条件满足时，要做的事

}

else if(判断条件){

条件满足时，要做的事

}

else{

条件不满足时，要做的事

}

switch…case 语句

三元运算符

判断条件？值1：值2

循环语句

for循环

for (初始化语句；判断条件；计数器更新){

循环体

}

break和continue

断点调试步骤（需要自行在网站上查查）

1准备要调试的ts文件

2添加调试配置

打开调试器

生成默认的配置

tsc - -init

修改配置

重启pycharm,不重启的情况下，容易出现Cannot find module 'ts-node/register'报错，出现异常，请修改后再次重启！！！

3安装调试用到的包

pass

数组

let names: string[] = [‘1’, ‘2’, ‘3’]；

通常数组中的数据类型相同

创建数组

方法一：空数组

let names: string[] = []；

方法二：（不推荐）

let names: string[] = new Array();

数组的长度和索引

 console.log(names.length);

数组长度 = 最大索引 + 1

取值和存值

取值：数组名【索引】

存值：数组名【索引】= 值

遍历数组

 for (let i: number = 0; i < names.length; i++) {
     console.log(names[i]);
 }

函数

function f函数名(nums形参: number[]形参的数据类型): 返回值类型 {
    代码逻辑;
}

f(arr1);//调用函数，并传递参数

===========举例===================
function getSum(nums: number[]) {
    let sum2: number = 0;
    for (let i: number = 0; i < nums.length; i++) {
        sum2 += nums[i]
    }
    console.log(sum2);
    return sum2;
}

getSum(arr1);

返回值

return后面不加内容代表可以终止代码

如果没有返回值，默认返回值类型为void

变量作用域

let、var、const

const经常是常量，主要的是它是不改变地址值的，所以可以进行push、splice等操作

let、var的区别：

var是函数作用域，而let是块作用域

let不能在定义之前访问该变量，但是var是可以的

let不能被重新定义，但是var是可以的

var可以声明同名变量，但let不可以

对象

创建对象

空对象：

let person = {}

对象的属性：

let person = {键：值}

举例：let person = {name: 'a', age: 18};

对象的方法：

值是不是函数

let person = {

sayHi: function () {

console.log(‘大家好，我是一个方法’)

}

}

注意：function后面如果没有函数名就是匿名函数，通过前边的sayHi调用函数

接口

对象的类型注解

let person：{

name: string;

age: number;

}

对象方法的类型注解

在webstorm上，用ctrl+鼠标放上去就看到类型是什么了

let person: {

sayHi: () => void;

sing: (name:string) => void;

sum: (num1:number, num2: number) => number

}

箭头函数括号内的是参数，箭头右侧是返回值类型

举例：

let p2: {

sing: (name:string) => void

}

p2 = {

sing: function (name: string) {

console.log(‘歌曲名’ + name)

}

}

let p3: {

sum: (num1: number,num2: number) => number

}

p3 = {

sing: function (num1: number,num2: number) {

return num1 + num2

}

}

接口的使用

创建接口：

Interface IUser {

name: string

age: number

sayHi: () => void

}

引用接口：

let p1: IUser = {

name: ‘jack’,

age: 18

sayHi: function () {

console.log(‘你好’)

}

}

对象的取值

访问属性：

p1.name

访问方法：

console.log()

对象的存储

=

常见内置对象文档的查看网站

CDN/w3school

数组对象

push添加元素

forEach遍历数组

let arr2: string[] = ['好人', '男人', '女人',];
arr2.forEach(function (item, index) {
    console.log('索引为', index, '元素为', item);
});

forEach的参数是函数，所以他是回调函数，其中第二个参数Index可省

some方法遍历数组

如果满足某一条件可以停止循环

ts的类型推论：

以下情况不用写类型注释：

1声明变量并初始化时

2决定函数返回值时

ts的类型断言：

DOM使用类型断言：

手动指定更加具体和精确的类型

语法：

值 as 更具体的类型

举例：let img = document.queryAllSelector(‘#image’) as HTMLImageElement

如何查看DOM元素类型：

console.dir()

快速生成html文件

输入感叹号！然后按tab键可以生成html文件

DOM4个常见操作：

获取DOM元素

querySelector(“标签”)获取某个DOM元素，如果有多个元素，会获得第一个

querySelectorAll(“标签”)同时获取多个DOM元素

举例：document.querySelector("body");

操作文本内容

读取/设置文本内容

注意：需通过类型断言指定DOM元素的具体类型，才能使用innerText属性

dom.innerText = ‘xxx’

追加：dom.innerText += ‘xxx’

设置样式/内容

dom.style属性：行内样式

dom.style.样式名 = 值

dom.classList属性：类样式操作，也就是操作类名，比如添加类名，移除类名判断是否存在等。（如：<p class="a"></p>）

添加

dom.classList.add(类名1,类名2,…)

移除

dom.classList.remove(类名1,类名2,…)

判断是否存在

dom.classList.contains(类名)

绑定（解绑）事件(操作事件)

移入鼠标、点击鼠标、敲击键盘

操作事件的两个方法：

addEventListener 添加（绑定）事件

removeEventListener 移除（解绑）事件

具体语法：

dom.addEventListener(事件名称，事件处理程序，{once: true}（事件只触发一次）)

事件名称：字符串，包括：‘click’(鼠标点击事件)、‘mouseenter’（鼠标进入事件）、、、、、、、、

事件处理顺序：回调函数，指定要实现的功能

注意：添加和移除事件时，事件的处理程序是同一个函数，如果直接写function也是不行的，必须另写一个函数，然后调用函数名才行！

操作事件

事件对象（event）,是时间处理程序（回调函数的参数）

表示：与当前事件相关的信息，比如：事件类型（type）、触发事件的DOM元素（target）等

函数的声明：

函数可以放在任意位置，即可以将函数放在调用它的句柄之前或之后

使用事件参数时，应指定类型注解

枚举类型

enum 枚举名称 {成员1，成员2，。。。}

enum Gender {Female, Male}

约定枚举名称、成员名称都以大写字母开头

枚举可以作为变量的类型注解

let useGender: Gender

userGender = Gender.Female

userGender = Gender.Male

枚举成员本身是常量，不能修改

枚举成员默认是从0开始，自增的；你也可以自己给枚举成员赋值，

枚举成员的值可以是数字或字符串等

常见错误

声明类型错误

1 error TS2322: Type 'Stock' is not assignable to type 'number’

'Stock'不是number类型，前边'Stock'是你写的出错的位置，后边 'number'是这里应该是什么类型的

在html中引入js文件位置放错

1TypeError: Cannot read property 'src' of null

document.querySelector('body')
#找不到选择器位置

解决办法：将<script src="./one.js"></script>的引入位置改为<body>内部最后一行