typescript笔记_市场资讯

typescript笔记

创始人

2025-06-01 16:05:58

0次

为什么没有二级标题?

搭建开发换环境

安装nodejs

全局安装 typesctipt

npm i -g typescript

创建一个ts文件:

使用tsc对文件进行编译:

tsc xxx.ts

基本类型

类型声明:

声明一个变量a,同时制定它的类型为number,

a设置为了string,在以后的使用过程中a的值只能是string

const a: string = 'fuck you also !';// 或者:
const b:string;
b = 'fuckyou';

注意:

在typescript中如果写的有错误代码,但是可以编译为js
ts编译可以编译为任意版本的js,默认是编译为较低版本的js

自动推断类型

如果变量的声明和赋值是同时进行的,ts可以自动对变量进行类型检测

let c = false;
// 这里会报错,因为在上面使用时已经制定其为boolean类型
c = 'fuckyou';

指定function传参类型:

function sum(a: number, b: number): number {return a + b
}const res = sum(5, 8);

指定function返回的数值类型:

其中():后面的类型就是指定的方法返回类型

function sum(a: number, b: number): number {return a + b
}

基本类型:

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。`let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制`
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。`let name: string = “Runoob”; let years: number = 5; let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;`
布尔类型	boolean	表示逻辑值：true 和 false。`let flag: boolean = true;`
数组类型	无	声明变量为数组。`// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array = [1, 2];`
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。`let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob`
枚举	enum	枚举类型用于定义数值集合。`enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2`
void	void	用于标识方法返回值的类型，表示该方法没有返回值。`function hello(): void { alert("Hello Runoob"); }`
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

字面量的创建:

字面量创建后无法修改,类似于const:

// 使用字面量进行类型声明
let g: 310;// 使用字面量之后下面无法赋值,会报错
// g = 65;
// g = 5;

字面量可以限制其值:

// 也可以在创建字面量的时候使用|链接多个值:
let h: "fuck you" | "son of bitch" | "shameless";
console.log(`h:${h}`)

限制字面量的类型:

//也可以指定其为多个类型:
let flag: boolean | string;
flag = true;
flag = "fuck the world";

any:

一个变量设置为any后,就会对该变量关闭类型检测,但开发中不建议使用

显式any,在声明时,不指定类型

let b;

隐式any

any不仅影响自己,同时也会影响与它相关的:

let u:any;
u='123465';
let o:string;
//下面这个不会报错,any可以复制给任意变量
o=u;

但是有些情况我们不知道传入的值的类型

可以使用unknown 表示未知类型的值

let y: unknown;
y = 10;
y = 'sad';
let p:'fuck';
//将ubknown赋值给其他类型时,会报错,区别于any
p=y;

//unknown实际上就是一个类型安全的any

避免unknown赋值错误可以:

let y: unknown;
y = 10;
y = 'sad';
let p:'fuck';
// 将ubknown赋值给其他类型时,会报错,区别于any
// p=y;
if(typeof p=='string'){p=y; 
}

类型断言

let y: unknown;
y = 10;
let p:'fuck';
// 判断,他可以用来告诉解析器变量的实际类型
p = y as string;
p =  y;

void一般作为返回值

// 有返回值:
function fn1(): boolean {return false
}console.log(fn1())// 表示该函数没有返回值
function fn2(): void {console.log('fuck you! fn2')
}fn2();

never 表示永远不会返回结果:

// never 表示永远不会返回结果:
function fn3(): never {throw new Error('报错');
}
fn3();

设置函数结构的类型声明

// 限定一个function的传参和返回值:
// 设置函数结构的类型声明
let d: (a: number, b: number)=>number;
d = function (n1, n2) {return n1 + n2;
}

数组(array)

// 表示字符串数组
let e: string[];
e = ['s', 'g', 'sc'];
// number类型数组
let u: Array;
u = [2, 5, 1, 5, 6, 4];
let d3: Array;
d3 = [2, 5, 65, 32, -123];

两种表示方式

元祖(tuple)

//元祖,固定长度的数组,但数组中的值是固定的,使用元祖比较好
let h: [string, string];h = ['hello', 'world'];

对象(object)

在js中对象什么都可以存储:

// js中的对象
let c2 = {name: '八嘎',age: 15,gender: '男'
};

但在ts中我们可以指定tys中存储的属性类型:

// 指定属性名: propName 指定属性值:any
let c: {name: string,[propName: string]: any
};c = {name: '椎间孔',school: 'fuck you school!'
}
console.log('c:');
console.log(c);

其中[propName: string]: any指定其属性名为任意值

对于不确定是否设置的属性可以使用?表示这个属性是可选的

let c: {name: string,age?: number,[propName: string]: any
};

函数(function)

/*
箭头函数的形式设置函数的类型声明,
语法:(形参:类型,形参:类型...)=>返回值
* */
let s: (a: number, b: number) => number;
//下面传入两个参数是符合定义的
s = function (n1, n2) {return n1 + n2;
}
// 如果传入三个参数,报错
/*s = function (n1, n2, n3) {return n1 + n2;
}*/

枚举(enum)

// 定义枚举:
enum Gender {Male,Female
}
let i: { name: String, gender: Gender }
i = {name: 'zjk',gender: Gender.Female
}console.log(i.gender == Gender.Male);// &表示同时:
let j: { name: string } & { age: number };
j = {name: '猴子', age: 15};

类型别名

type myType = string;
type myKey = 1 | 2 | 3 | 4 | 5
let k: myKey;
let m: myType

&表示必须有的多个值

// & 用来连接,表示该值必须有指定的类型参数
let o: { name: string } & { age: number };
o = {name: 'fuc',age: 23
};

编译选项

自动编译文件:

编译文件时,使用-w指令后ts编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译

示例:

tsc xxx.ts -w

但是这种方式每一个文件都要单独开一个窗口,不适合开发的

设置编译所有ts文件:

在需要编译的目录下新建ts的配置文件:

tsconfig.json

你可以使用的模板:

{"compilerOptions": {// 采用的模块系统"module": "es6",// 编译输出目标 ES 版本"target": "es6",// 删除所有注释，除了以 /!*开头的版权信息。"removeComments": true}
}

这里你也可以什么都不写:

{}

在什么都不写的情况下运行:

PS D:\myHomeWork\project\WebStudy\typescript\part02> tsc
PS D:\myHomeWork\project\WebStudy\typescript\part02> dir目录: D:\myHomeWork\project\WebStudy\typescript\part02Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2023/3/15     13:47             49 01.js
-a----         2023/3/15     13:41             59 01.ts
-a----         2023/3/15     13:47             64 02.js
-a----         2023/3/15     13:47             68 02.ts
-a----         2023/3/15     13:45            239 tsconfig.json

该目录下的ts文件都被编译了

当然,也可以使用tsc -w监视该文件夹下所有的ts文件

include

include 用来指定哪些ts文件需要被编译:

/*
ts编译器的配置文件,
ts编译器可以根据它的信息来对代码进行编译include 用来指定哪些ts文件需要被编译其中 ** 表示任意目录, * 表示任意文件*/
{"include": ["./src/**/*"]
}

exclude

exclude 用来排除

默认值:[“node_modules” , “bower_components” , “jspm_packages”]

{"include": ["./src/**/*"],"exclude": ["./src/hello/**/*"]
}

extends

定义被继承的配置文件
示例:

"extends":"./config/base"

上述示例中,当配置文件中会自动包含config目录下config目录下base.json中的所有配置信息

compilerOptions

编译器的选项,是配置文件中非常重要也比较复杂的配置选项
在 compilerOptions 中包含多个子选项,用来完成对编译的配置

项目选项

target

用来指定ts被编译的es版本,默认情况下ts会被转为es3版本的js

{  "include": [  "./src/**/*"  ],"compilerOptions": {  "target": "es6"  }
}

如果值为ESNext表示编译为最新版本的es

注意:如果不知道有哪几个版本,可以乱填一个,编译报错会告诉你可以填哪些版本

lib

用来指定项目中要使用的库
一般情况下不动它

module

模块
指定要使用的模块化规范

{  "include": [  "./src/**/*"  ],  "compilerOptions": {  "target": "es6",  "module": "es2015",  }  
}

outDir

{  "include": [  "./src/**/*"  ],  "compilerOptions": {  "target": "es6",  "module": "es2015",  "lib": [],  "outDir": "./dist"  }  
}

outFile

将编译后的ts文件打包为一个文件
设置outFile之后,所有的全局作用域中的代码会合并到同一个文件中
如果你想要合并自己的js文件,那么需要将modules改为system:

"module": "system",

allowJs

是否编译指定目录下的js文件:

"allowJs": false

如果为false,那么编译时不会编译js文件,只会编译ts文件

checkJs

检查js代码是否符合规范
默认为false

"checkJs": false,

removeComments

是否移除注释
默认值为false

"removeComments": false

noEmit

不生成编译后的文件

"noEmit": false

noEmitOnError

有错误时不生成编译文件
默认值为false

"noEmitOnError": false

alwaysStrict

设置编译后的js是否使用严格模式
并且在浏览器中执行的性能要好一些
默认为false

"alwaysStrict": false

设置为true:
在编译后的js文件头部加上:

"use strict";

注意:
对于有export,import这些导出导入模块的js文件,它是不会加上"use strict";,因为它已经自动使用了严格模式

noImplicitAny

设置没有指定参数类型时,是否允许推断其为any类型
开发中我们要避免显式的any,
对于下面的代码就是使用的是显式any,需要避免:

function fn(a, b) {  return a + b  
}

默认是为true

"noImplicitAny": false

如果为false,那么像是下面的代码就会报错:

function fn(a, b) {  return a + b  
}

此时如果加上类型就不会报错了:

function fn(a: number, b: number) {  return a + b  
}

noImplicitThis

是否允许不明确类型的this

"noImplicitThis": true

默认为true

此时为false,那么下面就会报错:

function fn2() {// 下面这个this是不明确的alert(this);
}

当你指定后就不再报错:

function fn2(this: Window) {// 下面这个this是不明确的alert(this);
}

strictNullChecks

严格的检查空值

默认值为false

如果改为true:

"strictNullChecks": true

对于下面的ts代码:

let box1 = document.getElementById("box1");
box1.addEventListener("click", function () {console.log('click')
})

这里的box1可能为空,那么在编译的时候就会报错

可以这样解决:

let box1 = document.getElementById("box1");
if (box1 != null) {box1.addEventListener("click", function () {console.log('click')})
}

或者使用?:

let box1 = document.getElementById("box1");
box1?.addEventListener("click", function () {console.log('click')
})

strict

所有严格检查的总开关,如果这个为true,那么下面几个都可以不写,一般开发建议写true所有严格检查的总开关,如果这个为true,那么下面几个都可以不写,一般开发建议写true

"strict": true,

可以省略下面这几个:

noEmitOnError,
alwaysStrict,
noImplicitAny,
noImplicitThis,
strictNullChecks

通过webpack对ts编译

最基础的配置:

目录结构:

PS D:\myHomeWork\project\WebStudy\typescript\part03> dir目录: D:\myHomeWork\project\WebStudy\typescript\part03Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2023/3/16     11:33                dist
d-----         2023/3/16     11:36                node_modules
d-----         2023/3/16     11:34                src
-a----         2023/3/16     11:37            472 package.json
-a----         2023/3/16     11:25            103 tsconfig.json
-a----         2023/3/16     11:35            557 webpack.config.js

package.json:

{"name": "part03","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack server --open"},"author": "","license": "ISC","dependencies": {"html-webpack-plugin": "^5.5.0","ts-loader": "^9.4.2","typescript": "^4.9.5","webpack": "^5.76.2","webpack-cli": "^5.0.1","webpack-dev-server": "^4.12.0"}
}

tsconfig.json:

{"compilerOptions": {"target": "ES2015","module": "ES2015","strict": true}
}

webpack.config.js:

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: "./src/index.ts", output: {path: path.resolve(__dirname, 'dist'), filename: 'bundle.js',}, module: {rules: [{test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/}]},// 插件:plugins: [new htmlWebpackPlugin({// 自定义生成文件的title// title: 'index title'// 自定义模板template: './src/index.html'})]
}

这里主要是使用webpack.config.js中的配置文件

兼容目标浏览器版本: