扩展标签类型
HTMLDivElement, 代表div
HTMLUListElement,代表 li
HTMLImageElement,代表图片
第一次使用时下载
npm i typescript -g
有时要装淘宝 nrm use taobao
初始化ts配置文件
tsc --init
tsconfig.json 配置文件解释
1. ES6配置
{
"target": "ESNext", ts转换为js的目标版本
"module": "ES6", ts转换为js的模块化方式
}
2. ES5配置
{
"target": "ES5", ts转换为js的目标版本
"module": "AMD", ts转换为js的模块化方式
}
3. node的ts配置
{
"target": "ES5", ts转换为js的目标版本
"module": "commonjs", ts转换为js的模块化方式
}
"module": "AMD", 使用模块化开发时转换为JS的那种模块化方式 javascript ES5-->AMD/CMD
ES6-->ES6模块化 Nodejs ES5--->Commonjs ES6--->ES6模块化
"rootDir": "./ts", 需要将那个文件夹下的ts文件转换为js，TS的源文件根路径 就是指你写的那些
ts代码，在哪里放的
"declaration": true, 描述文件生成.d.ts 可以在代码提示时显示方法的参数和返回值等详细数据
类型 必须使用数组方法中显示数据类型如数组是字符串
"declarationMap": true, .d.ts的映射文件，可以根据这个提示找到源文件内容 鼠标移到它身上显示
连接
"sourceMap": true, 生成一个.js.map文件可以在运行时，根据js在浏览器中找到对应的ts相关代码
的位置 鼠标移到它身上显示连接 很重要
"outDir": "./js", 将TS代码转换为JS代码放入某个文件夹中，JS的目标文件夹
"lib": ["DOM","DOM.Iterable","ES2015"], 当使用ES5模块化时，使用了ES6一些东西必须添加下
面的模块才能使用
"DOM.Iterable" Dom迭代器
tsc -w 监听rootDir路径下的ts（就是将ts变为js文件），如果编辑修改就会自动转换到outDir路径下
的js
当使用ES5模块化时 引入文件不需要加文件的扩展名
但是使用ES6模块化时 引入文件必须加入文件的 js 扩展名
以下是node 的配置还有图片
@types/node ts的nodeAPI库 npm i @types/node
@types/express 是typescript的express的API
express 是js默认express框架
@types/mysql 是typescript的mysql的API
mysql 是js默认的mysql库
AMD与ES5 在HTML中操作
ES6在HTML中操作
模块化说明
一， 前端模块化
1. ES5模块化
ES5模块化包括 AMD模块
所有路径都不能带扩展名
导出
默认导出1个
define(function(){
定义模块
return 模块
})
默认导出多个
define(function(){
定义模块1
定义模块2
定义模块3
return {模块1,模块2,模块3}
})
导出的模块有依赖
define([依赖模块路径1,依赖模块路径2...],function(依赖模块1,依赖模块2...){
定义模块
return 模块
})
导入
require([路径1,路径2...],function(路径1的模块,路径2的模块...){
})
require([路径1,路径2...],function(路径1的模块,{模块a,模块b..}...){
})
2. ES6
导出
export default 模块
export 模块
导入
import 模块名 from 路径
import {模块1,模块2} from 路径
二， nodejs模块化
Commonjs
导出
module.exports=
exports.模块名=
导入
var 模块=require(路径)
var {模块1,模块2..}=require(路径)
var {模块1=别名,模块2..}=require(路径)
4. ES6
导出
export default 模块
export 模块
导入
import 模块名 from 路径
import {模块1,模块2} from 路径
import {模块1 as 别名,模块2} from 路径
ts基础内容
1. ts变量写法
定义变量时 let 变量名：类型=值
let a: number = 1
console.log(a);//1
2.ts函数写法
//function 函数名 (参数1:类型,参数2:类型) ：返回值的类型
//{
//}
2.1 function fn(a: number, b: number): number {
return a + b
}
console.log(fn(1, 2));//3
3.ts中的类写法
class 类{
属性:类型=值
// 构造函数后不能写入返回类型
constructor(参数:类型){
}
实例化方法(参数:类型...):返回值类型
{
}
// set访问器属性不能设置返回类型
set 访问器属性(value:类型){
}
// get不能设置参数和参数类型
get 访问器属性():返回值类型{
}
// 访问器属性set的参数类型必须和get的访问器属性返回值的类型一致
}
3.1 class Box {
n: number = 1
_count: number = 0
constructor(num: number) {
}
set count(value: number) {
this._count = value
}
get count(): number {
return this._count
}
play(n: number): number {
return n + 1
}
}
var a = new Box(2)// 这个2没关系
a.count=6
console.log(a.count);//6
console.log(a.play(5));//6
ts的基础类型写法
1. number 只能赋值为基础数据类型number的数值，不能赋值数值对象类型
var a:number=1;
Number 数值类型的对象函数
Number既可以赋值为基础的number类型，也可以赋值为数值对象类型
var b:Number=2;
1.1 let a=new Number(3)
console.log(a); //Number {3} 大写的Number 就是对象类型
a=2
console.log(a); //2
a="cdscsc" // 出错但可以打印 a是数值类型
console.log(a);
a=3.4e+2
console.log(a); //340
a=0xFF;
console.log(a);//255
a=0o57
console.log(a);//47
2. 字符串
var a:string="a";
var b:String="b";
a="a";
a='a';
a=`a`;
3. 布尔值
var a:boolean=true;
var b:Boolean=false;
4. undefined
var a:undefined;
a=undefined;
4.1 或者 这个变量可以是number类型也可以是undefined
或者 用一个"|"
var a:number|undefined
console.log(a);//undefined
a=2
console.log(a);//2
5. null 一般会和Object联合使用|
用来表示对象的属性的属性值不存在
var a:null=null
console.log(a); //null
var obj:object|null={a:1,b:2}
console.log(obj);// {a: 1, b: 2}
obj=null
6、 symbol(Symbol) 唯一类型
var s:Symbol=Symbol("a");
var s1:symbol=Symbol("b");
7、 ES2020 bigint
var a:bigint=34567898765789876n;
8、 正则类型
var reg:RegExp=/a/g;
9、 日期类型
var date:Date=new Date();
ts数组类型
1. Array<元素的类型>
var arr:Array<number>=[1,2,3,4]
var arr:Array<number|string>=[1,2,"a","b"];
1.1 元素类型[]
var arr:number[]=[1,2,3,4,5];
(元素类型|元素类型)[]
var arr:(number|string)[]=[1,2,3,4,"a"]
1.2 二维数组
var arr:Array<Array<number>>=[[1,2,3],[4,5,6]]
var arr:number[][]=[[1,2,3],[4,5,6]];
2. 枚举 遍历时候读取不到他，正常读取可以
enum COLOR{RED,GREEN,BLUE};// 当没有设置枚举类型的值时，默认从0开始
enum COLOR{RED=2,GREEN,BLUE};// 当没有设置枚举类型的值时，如果设置前面的一个枚举类型的
值，并且是数值，后面的值也会递增
enum COLOR{RED,GREEN=5,BLUE};// 当没有设置枚举类型的值时，如果设置前面的一个枚举类型的
值，并且是数值，后面的值也会递增
如何值设在中间，后面的递增，前面的为0
console.log(COLOR.RED); // 0
enum COLOR{RED,GREEN="a",BLUE=6};// 当没有设置枚举类型的值时，如果设置摸个类型值为字符
串，后面的枚举类型必须也要设置值
enum COLOR{RED="red",GREEN="green",BLUE="blue"};// 当没有设置枚举类型的值时，如果设
置摸个类型值为字符串，后面的枚举类型必须也要设置值
enum COLOR{RED,GREEN="green",BLUE="blue"};// 枚举类型的值只能设置为数值或者字符串
console.log(COLOR.BLUE);
如果枚举类型值是数值类型，可以通过值的反射获取到对应的枚举类型属性名
console.log(COLOR[0]);//RED
enum COLOR { RED = 2, GREEN, BLUE };
console.log(COLOR[3]) // GREEN
元组
let arr:Array<number>=[1,2,3]
规定每个下标对应的元素的类型，这个就是元组
var arr:[string,Number,boolean]=["asac",2,true]
console.log(arr); //(3) ['asac', 2, true]
ts另外的属性
1. any 就是可以赋值任意类型值
var a:any=1;
a="a";
a={a:1};
a:null
2. never 永远不会正确的内容
function fn():never
{
// console.log(123);// 写正常的不行
throw new Error("a"); // 这是显示报错，只能写这种
}
fn()
console.log(fn());
3. void void与undefined类似 void表示没有结果
var a:void=undefined// 这样写只能写
console.log(a);
一般来说void用于函数执行后不返回值的时候
3.1 function fn():void{
// console.log("a");// 在里面打印会在控制台显示
// return a 写返回 值出错
}
console.log(fn());
3.2 function fn(a:number):number{
return a // 这个没事
}
fn(2)
4. object 不建议使用 因为随意设置值会出错
var obj:object={a:1};
var obj1:Object={b:2};
obj.a=2;
console.log(obj.a)
delete obj.a;
4.1 [key:string]:number key属性名必须是字符串类型 属性值必须number数值型
可以随意给对象中增加或者删除键名，但是键名必须是字符型，值必须是数值型
var obj:{[key:string]:number}={a:1,b:2};
断言
断言 强制假设类型
1、在需要断言的内容后面写上 as 断言的类型
2、在需要断言的内容前面写上<断言的类型>
1.平常
function fn(){
关于dom对象初始化时，有两种情况1.存在：HTMLDivElement，不存在undefined
就是这个 var div:HTMLDivElement|undefined=document.querySelector("div");
或这个 prev:HTMLLIElement|undefined;
下面的情况就是你想清除dom对象（前提你已经获取了，然后再次使用时清除）就把undefined换成
null
var div:HTMLDivElement|null=document.querySelector("div");
if(div){
div.style.width="50px";
div.style.height="50px";
div.style.backgroundColor="red";
}
}
2.断言
function fn(){
// 获取到的内容断言为HTMLDivElement
// var div:HTMLDivElement=document.querySelector("div") as HTMLDivElement;
var div:HTMLDivElement=<HTMLDivElement>document.querySelector("div");
div.style.width="50px";
div.style.height="50px";
div.style.backgroundColor="red";
}
fn();
重载
1. function fn(a:number,b:number):number;
2. function fn(a:string,b:string):string;
3. function fn(a:Array<number>,b:Array<number>):Array<number>;
和为4 这就是重载，函数的多种写法的集合
function fn(a:number|string|Array<number>,b:number|string|Array<number>):number|
string|Array<number>
{
if(Array.isArray(a) && Array.isArray(b)){
return a.concat(b)
}else if(typeof a==="string" && typeof b==="string"){
return a+","+b;
}else if(typeof a==="number" && typeof b==="number"){
return a+b;
}
throw new Error("错误参数类型")//参数给的不对就会出错
}
console.log(fn(1,2));
a参数可以是number或者boolean或者数组或者对象，函数执行完成会转换为字符串
function toStrings(a:number):string;
function toStrings(a:boolean):string;
function toStrings(a:Array<any>):string;
function toStrings(a:object):string;
function toStrings(a:number|boolean|Array<any>|object):string
{
return ""
}
在ts中函数也有命名函数、匿名函数、箭头函数
a:number 必填参数，数值类型
b:number|string=1 默认值参数，数值类型或者字符串类型
c?:number=1 可选参数，数值类型
...arg:Array<number> 剩余参数都是数值型数组
例子1 function fn(a:number,b:number|string=1,c?:number,...arg:Array<number>){
console.log(a,b,c,arg)
}
fn(1);
fn(1,2);
fn(1,2,3);
fn(1,2,3,4);
fn(1,2,3,4,5);
...arg:[string,number,string] 剩余参数都是元组类型
例子2 function fn(a:number,b:number|string=1,...arg:[string,number,string]){
console.log(a,b,arg);
}
fn(1,2,"a",3,"b");
fn(1,2);
不返回值，就是没有返回值的函数
function fn():void
{
}
有返回值的
function fn():number{
return 1;
}
function fn():number|string{
return 1;
}
不能再返回值类型中使用?
匿名函数
var fn=function(a:number,b:number):void
{
}
fn(1,2)
箭头函数 在ts中使用箭头函数，不能省略() ,{}
var fn=(a:number,b:number):void=>{
console.log(a+b);
}
var fn=(a:number):number=>{
return a+1;
}
// 匿名函数或者箭头函数定义接口类型
(a:number,b:number) 是函数的参数类型
=>void 是函数的返回类型 ，这样后面的参数就不需要写类型了
匿名函数
var fn:(a:number,b:number)=>void=function(a,b){
}
箭头函数
var fn:(a:number,b:number)=>number=(a,b)=>a+b;
