TS学习笔记
入门篇:Typescript安装
1.环境搭建步骤
2| npm i -g typescript
3|tsc xxx.ts
tsc 文件名
tsc --watch 文件名
- 执行Ts文件
ts-node
编译篇:编译器配置
tsconfig.json 是ts编译器的配置文件,ts编译器可以根据他的信息对ts文件进行编译
控制台使用tsc
执行编译
1. 简单的编译配置
include
定义需要编译的目录- 默认值:
["/**/*"]
"include":[
"src/**/*","demo/**/*"
],//src、demo 目录下的文件将会被编译
"extends":"./configs/base"
files
指定要编译的文件列表
"files":[
"user.ts",
"sct.ts",
"get.ts",
"tsc.ts"
]
2. compilerOptions
compilerOptions
中包含多个子选项,用来完成对编译的配置
target
设置TS编译的目标版本
"files": [
"./diro1/1.ts"
],
"compilerOptions": {
"target": "ES6"
}
"lib":["dom","webwork",...]
outdir
指定编译后的js 文件存放的位置
"compilerOptions": {
"target": "ES6",
"outDir": "./dir02"
}
"allooutfile":"app.js"
"allowJs":false
-
checkJs
是否检查js代码 -
默认: false
-
默认: false
-
默认: false
-
alwaysstrict
严格模式 -
默认: false
-
noImplicitAny
是否允许隐式any类型 -
默认:false
//"noImplicitAny":true 当为true 时 编译会有报错提示
function fn(a,b){
}
noImplicitThis
是否允许类型不明确的this
- 默认: false
//"noImplicitThis": true 此时一下代码会有报错提示
function(){
console.log(this);
}
strict
严格检查总开关- 默认:false
"strict": true //开启所有严格检查
strictnullchecks
是否严格检查空值- 默认: false
//"strictnullchecks": false
let btn = document.querySelector('#btn1');
btn.addEventListener('click',function () {
alert(123);
})
//"strictnullchecks": true 为true 编译器 检查到btn1 课程会为空 出现报错提示
let btn1 = document.querySelector('#btn1');
btn?.addEventListener('click',function () {
alert(123);
})
一、变量类型
1. 数据类型
- 原始类型(基本数据类型)
类型 | 关键字 | 描述 |
---|---|---|
数字 | number | |
字符串 | string | |
布尔 | boolean | |
undefined | undefined | 声明但未赋值的变量值 |
null | null | 空值 |
字面量 | 其本身 | 限制变量的值就是该变量的值 |
任意类型 | any | 任意类型(变量设置为该类型,相当于关闭TS类型检测) |
unkNow | * | 类型安全的any |
对象 | object | {name:‘小明’} |
数组 | array | [1,2,3] |
元组 | tuple | TS新增类型,固定长度的数组 |
枚举 | enum | TS新增类型 |
// 0. undefined/null 类型 都只有一个值
let dog_1:undefined = undefined;
let cat_1:null = null;
console.log(dog_1,cat_1); // undefined null
// 1. 字面量赋值(变量只能是规定好的值,否则报错)
let gender:'男'|'女';
gender = '女';
//2. any
let misc:any;
misc = 22;
misc = '菜刀';
let num:number;
//此时misc 的实际类型是string 赋值给number类型【没有报错】
num = misc;
// 3.unkNow
let dog_01:unkNown;
dog_01 = ['小明',22];
dog_01 = '小红';
let dog_2:string;
// dog_2= dog; 此时无法赋值,TS会报错
console.log(typeof dog_01); // string
if(typeof dog=='string')dog_2 = dog;
dog_2 = dog_01 as string;
dog_2 = <string>dog_01;
// 4. void 表示为空 函数则表示没有返回值
function echo():void
{
return null;
return undefined;
}
// 5. never 永远不会返回结果
function echo_2():never
{
throw new Error('报错了');
}
//echo_2();
// 6.object js一切皆对象
let obj:object;
obj = {};
obj = function(){};
obj = [];
obj = null;
// so 使用以下跟方便
let person:{name:string,age:number}
person = {name:'小明',age:22};
interface Iperson {name:string,age:number,gender?:string};
let person_2:Iperson = {name:'小红',age:18,gender:'女'};
let person_3:Iperson = {name:'小刚',age:19};
//规定对象中必须有一个值其他值任意
interface Iperson_2 {name:string,[renyi:number]:any}; //此处规定 name属性必须 其他属性为数字类型,属性值任意
let person_4:Iperson_2 = {name:'小红',1:33,2:'女'};
// 使用 &
let person_5:{name:string}&{age:number};
//函数
let func:(a:number,b:number)=>string;
func = function (num1:number,num2:number){return '小红';}
// 7. 数组
let arr:Array<number>;
let arr_1:number[];
let arr_2 = [1,2,'小红'];
// 8. 元组(固定长度的数组)
let arr_3:[string,number];
let arr_4:number[];
// 9. 枚举 enum
enum hero_gender
{
male= '男',
female = '女'
};
let hero = {
name:'猴子',
gender:hero_gender.male
}
if(hero.gender=hero_gender.male){
console.log(hero.name+'是男的!');
}
- 对象类型(复杂数据类型)
类型 | 关键字 | 描述 |
---|
2. 创建类型
//创建一个类型
type num = 1|2|3|4;
let num1:num = 4;
二、运算符
1. + 、- 号运算符
- 加号运算符的特殊用法
console.log(1 - +'3'); //-2
console.log(3 + -'1'); //2
var num1 = -'点击'; //NaN
console.log(num); //-3
三、数组
1. 数据添加元素
//数组
let arr:string[] = ['q','w','e','r'];
console.log(arr);
//获取长度
console.log(arr.length) // 4
//末尾添加元素
arr[arr.length] = 'rr';
- 冒泡排序取出数组中最大值
let arr:number[] = [1,4,9,12,6,7];
let max:number = arr[0];
for (let i:number = 0;i<=arr.length-1; i++){
if(arr[i]>max) max = arr[i];
}
console.log(max);
2. 数组对象内置函数
- push() 向数组末尾添加元素,并返回数组的新长度
let arr:number[] = [23,4];
console.log(arr.push(89,1));// 4
console.log(arr); //[23,4,89,1]
- forEach() 遍历数组(类似PHP中的foreach)
let arr1:string[] =['小明','小红','小美'];
arr1.forEach(function (value,key) {
console.log(key+'----'+value);
})
- some() 遍历数组,返回true即可停止遍历
let arr2:string[] = ['小明','小刚','小红'];
let bol:boolean = arr2.some(function (value) {
let bool:boolean = value=='小'? true:false;
return bool;
})
console.log(bol); //false
四、函数
1. TS 函数的基本结构
//求和 形参arr
function sum(arr:number[],size:boolean=true):number {
let sum:number = 0;
for (let i:number = 0; i<=arr.length-1; i++){
sum +=arr[i];
}
return sum;
}
console.log(sum([1,5])); //传入实参
2. 直接使用函数返回值
function echo():number{
return 22;
}
let age:number = echo() + 1;
console.log(age); //23
五、对象
1. 对象的类型注解
- TS 中对象是结构化,使用前可以根据需求提前设计好对象的结构
//注解
let mengmeng:{
name:string;
age :number;
skill:(s:number,str:string,arr:number[])=>string;
}
mengmeng ={
name : 'mengmeng',
age : 23,
skill:function (num:number,str:string,arr:number[]) {
return '可爱、善良!'
}
}
console.log(mengmeng.skill(1,'字符串',[5]));//输出 可爱、善良!
- 【推荐】接口类型注解(规定以I 开头)
interface IPersons {
name:string;
age :number;
say :(num:number)=>number
}
let li:Persons = {
name:'李强',
age :17,
say :function(num:number){
console.log(this.name);
return num;
}
}
console.log(li.say(1)) //输出1
2. 对象类型注解深入学习
- 对象中对属性的限制
interface Iperson {name:string,age:number,gender?:string};
let person_2:Iperson = {name:'小红',age:18,gender:'女'};
let person_3:Iperson = {name:'小刚',age:19};
- 规定对象中必须有一个值其他值任意
//此处规定 name属性必须 其他属性为数字类型,属性值任意
interface Iperson_2 {name:string,[renyi:number]:any};
let person_4:Iperson_2 = {name:'小红',1:33,2:'女'};
let func:(a:number,b:number)=>string;
func = function (num1:number,num2:number){return '小红';}
3. 对象存值
console.log(li.name); // 李强
li.name = '王刚';
console.log(li.name); //王刚
五、类
1. TS类属性访问控制
- readonly 只读
- static 静态
- public 公开
- protected 保护的
- private 私有的
class Cat
{
public readonly name:string = '花花'; //只读属性无法更改值
static readonly height:number = 30 //静态只读属性
private another_name:string = '小肥猫';
protected age:number = 5;
public color:string = '白色';
public sayHello():string {
console.log(this.name+'说喵喵!');
return '22';
}
private action(){
console.log(this.name+'爱睡觉!');
}
}
let c = new Cat();
c.sayHello();
2. 构造函数 constructor
/**
* 构造函数
*/
class Dog {
private name:string|number;
protected color:string;
constructor(name:string,color:string) {
this.name = name;
this.color= color;
}
}
let dog = new Dog('小黑','黑色');
let red_dog = new Dog('小红','红色');
console.log(dog);
3. super 关键字
class Monkey extends Animal {
num = 11;
constructor() {
super();
console.log(super());
}
}
4. 抽象类
abstract class Person {
protected abstract name:string;
constructor(){
console.log('抽象类');
}
/**
* 1.抽像方法只能在抽象类中
* 2.子类必须实现抽象类
*/
protected abstract echo():string;
}
class Changren extends Person {
public name = 's';
public echo():string
{
return 'changren 继承 person';
}
5.TS中的属性存取
class Zhukai
{
private age:number = 22;
private height:number = 140;
//Ts关键字获取属性
get zhuAge ():number
{
return this.age;
}
//Ts关键字 设置值
set zhuAge (age)
{
this.age = age;
}
}
//设置
zhukai.zhuAge = 45;
//获取
console.log(zhukai.zhuAge);
六、接口
1. 接口的定义
1. 接口可以在定义的时候限制类的结构
2. 接口中的所有属性都不能实现实际的值
3. 接口定义对象的结构,而不考虑实际的值(接口中定义对象的方法,都是必须实现的抽像方法)
4. 事件接口使用implements
2. TS接口在类和对象中的使用
interface Ipen
{
name:string;
length:number;
color:string;
action():string;
}
//类中
class Hero_pen implements Ipen{
public length = 15;
name = '英雄001钢笔';
color = '红色';
size = 12;
action(){
return '123';
}
}
//对象中
let qq_pen:Ipen = {
length:15,
name:'英雄001钢笔',
color:'红色',
action(){
return '123';
}
}
console.log(qq_pen.color) //红色
七、泛型
1. 函数中使用泛型
function goAction<T,A>(name:T,time:A):A
{
return time;
}
// 2. 调用方法
let action_1 = goAction('看书',200) //直接调用
let action_2 = goAction<string,string>('吃饭','2020-09'); //调用时指定类型
console.log(action_2);
2. 类中使用fanxing
class Action<T,B>
{
public name:T
public getTime(time:B):B
{
return time;
}
}
let action = new Action<string,string>()
console.log(action.getTime('2020'));
3. 泛型指定范围
//1. 泛型指定实现接口
interface Iaction{
title:string;
money:number;
}
function shopAction<T extends Iaction>(shop:T):number
{
return shop.money;
}
let shopmoney = shopAction({title:'去动物园玩',money:15})
console.log(shopmoney);
八、TS DOM操作
1. 类型断言(手动指定更加精确的类型)
- 查看元素的类型
let div1 = document.querySelector('#div1') as HTMLdivelement;
console.dir(div1);
2. css选择器
- 选取单个元素
document.querySelector()
- 选取多个元素
document.querySelectorAll()
3. 操作文本内容
- innerText (读取|设置元素的内容)
// <h1 id="h1">QQ:112233</h1>
let h1 = document.querySelector('#h1') as HTMLheadingElement;
// console.dir(h1);
console.log(h1.innerText='55'); //输出55
- 小练习
<h1 id="h1">QQ:112233</h1>
<h1 id="h101">QQ:112233</h1>
<h1 id="h102">QQ:112233</h1>
let p = document.querySelectorAll('h1');
p.forEach(function (item,key) {
let Now_h = item as HTMLheadingElement;//更换类型
Now_h.innerText = Now_h.innerText+'hh';
Now_h.style.background = 'red';
})
4. 操作样式
dom.classList.add('b','c');//添加类
dom.classList.remove('b','c');//移除类
dom.classList.contains('b'); //判断类是否存在
5. 事件
- 事件对象Event
属性 | 描述 |
---|---|
target | 返回触发该事件的元素 |
type | 返回当前事件的名称 |
… |
- 代码示例
btn.addEventListener('mouSEOut', function (event) {
console.log(event); //查看所有属性
console.log(event.target); //<button id="btn">点击事件</button>
console.log(event.type); //mouSEOut
let h = event.target as HTMLButtonElement;
h.style.color = 'red';
h.style.fontSize =50+ 'px';
});
- 事件绑定、移除
方法 | 说明 |
---|---|
addEventlistener | 添加事件 |
removeEventlistener | 移除事件 |
<button id="btn">点击事件</button>
- 事件绑定
let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.onclick = function(){ alert('鼠标点击了'); }
btn.addEventListener('click',function () {
alert('鼠标点击了');
});
btn.addEventListener('mouSEOut ',function () {
alert('鼠标移出了');
});
//添加只触发一次的事件
btn.addEventListener('mouSEOut ',function () {
alert('触发一次');
},{once:true});
- 事件移除
//点击5次移出事件
let i:number = 1;
let btn = document.querySelector('#btn') as HTMLButtonElement;
function oneclick(event:MouseEvent)
{
document.title =''+i;
if(i>=5) btn.removeEventListener('click',oneclick);
console.log('第'+i+'次点击');
i++;
}
btn.addEventListener('click',oneclick)
let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.onclick = function(){ alert('鼠标点击了'); }
btn.addEventListener('click',function () {
alert('鼠标点击了');
});
btn.addEventListener('mouSEOut ',function () {
alert('鼠标移出了');
});
//添加只触发一次的事件
btn.addEventListener('mouSEOut ',function () {
alert('触发一次');
},{once:true});
- 事件移除
//点击5次移出事件
let i:number = 1;
let btn = document.querySelector('#btn') as HTMLButtonElement;
function oneclick(event:MouseEvent)
{
document.title =''+i;
if(i>=5) btn.removeEventListener('click',oneclick);
console.log('第'+i+'次点击');
i++;
}
btn.addEventListener('click',oneclick)