网站建设盈利模式,diy电子商城网站,农产品十大交易平台,营销型网站规划文章目录编译环境基本类型函数类型函数重载联合类型和函数重载编译环境
TypeScript最终会被编译成JavaScript来运行#xff0c;所以我们需要搭建对应的环境。 首先我们要全局安装typescript
# 安装命令
npm install typescript -g
# 查看版本
tsc --version⭐️ 方式一…
文章目录编译环境基本类型函数类型函数重载联合类型和函数重载编译环境
TypeScript最终会被编译成JavaScript来运行所以我们需要搭建对应的环境。 首先我们要全局安装typescript
# 安装命令
npm install typescript -g
# 查看版本
tsc --version⭐️ 方式一通过webpack配置本地的TypeScript编译环境和开启一个本地服务可以直接运行在浏览器上
安装webpack相关的依赖
使用webpack开发和打开需要依赖webpack、webpack-cli、webpack-dev-server
npm install webpack webpack-cli webpack-dev-server -D在package.json中添加启动命令
为了方便启动webpack我们在package.json中添加如下启动命令
scripts: {test: echo \Error: no test specified\ exit 1,serve: cross-env NODE_ENVdevelopment webpack-dev-server --modedevelopment --config build/webpack.config.js
},添加webpack的其他相关依赖
依赖一cross-env
这里我们用到一个插件 “cross-env” 这个插件的作用是可以在webpack.config.js中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境我们需要这个插件
npm install cross-env -D依赖二ts-loader
因为我们需要解析.ts文件所以需要依赖对应的loaderts-loader
npm install ts-loader -D依赖三html-webpack-plugin
编译后的代码需要对应的html模块作为它的运行环境所以我们需要使用html-webpack-plugin来将它插入到对应的模板中
npm install html-webpack-plugin -D配置webpack.config.js文件
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.ts,output: {filename: build.js,},resolve: {extensions: [.tsx, .ts, .js],},module: {rules: [{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/,},],},devtool: process.env.NODE_ENV production ? false : inline-source-map,devServer: {static: ./dist,// stats: errors-only,compress: false,host: localhost,port: 8080,},plugins: [new HtmlWebpackPlugin({template: ./index.html,}),],
};下面我们就可以愉快的在main.ts中编写代码之后只需要启动服务即可
在终端中启动服务npm run serve
方式一 参考文章 TypeScript(二)使用Webpack搭建环境 ⭐️ 方式二通过ts-node库为TypeScript的运行提供执行环境
安装ts-node
npm install ts-node -g另外ts-node需要依赖tslib和 types/node 两个包
npm install tslib types/node -g现在我们可以直接通过ts-node来运行TypeScript的代码
ts-node math.ts基本类型
// number类型
let num: number 100;
// string类型
let msg: string abc; // 一般这种可以不写类型注解
// boolean类型
let flag: boolean true;
// null undefined
let n: null null;
let u: undefined undefined;// Array类型
let arr1: string[] [abc, 123];
let arr2: Arraystring [aaaa, ccc];// Object类型
let obj: {name: string;age: number;
} {name: zhangsan,age: 18,
};
console.log(obj.age);// Symbol类型
const s1: symbol Symbol(title);
const s2: symbol Symbol(title);const person {[s1]: 程序员,[s2]: 老师,
};
// any
let a: any why;
a 123;let flag true;
function foo(): string {return foo;
}
function bar(): number {return 123;
}
// unknow
let result: unknown;
if (flag) {result foo();
} else {result bar();
}// void
function sum(num1: number, num2: number): void {console.log(num1 num2);
}
// never类型 永远不会发生值的类型
// tuple
const tInfo: [string, number, number] [abc, 18, 22];export {};
函数类型
// 函数的参数类型注解
function greet(name: string) {console.log(hello name.toUpperCase());
}console.log(greet(world));// 函数的返回值类型
function sum(num1: number, num2: number): number {return num1 num2;
}const names [abc, cba, nba];
// 并未指定item的类型 但是item是string类型
names.forEach((item) {console.log(item.toUpperCase());
});// 函数接收的参数是一个对象 z?可选类型
function printCoordinate(point: { x: number; y: number; z?: number }) {console.log(x坐标, point.x);console.log(y坐标, point.y);
}
printCoordinate({ x: 10, y: 30 });// 联合类型
type ID number | string;
// function printId(id: number | string) {
function printId(id: ID) {console.log(你的id是, id);
}
printId(10);
printId(abc);// 类型断言
const myEl document.getElementById(my-img) as HTMLElement;
// const myEl document.getElementById(my-img) as HTMLImageElement;// 非空类型断言! 确定某个标识符是有值的
function printMsg(message?: string) {console.log(message!.toUpperCase());
}// ??和!!的作用
// 将一个其他类型转换成 boolean类型
// ?? 逻辑操作符 左侧是null或者undefined时 返回其右侧操作数
函数重载
// 函数重载
// 如果编写了一个add函数希望可以对字符串和数字类型进行相加
// 应该如何编写
// 以下是错误方式
// function sum(a1: number | string, a2: number | string): number | string {
// return a1 a2;
// }// 正确方式
function sum(a1: number, a2: number): number;
function sum(a1: string, a2: string): string;
function sum(a1: any, a2: any): any {return a1 a2;
}
console.log(sum(10, 20));
console.log(sum(aa, bb));export {};联合类型和函数重载
// 联合类型和重载
// 需求定义一个函数可以传入字符串或者数组获取它们的长度
// 1. 联合类型
function getLength(a: string | any[]) {return a.length;
}
// 2. 函数重载
function getLength(a: string): number;
function getLength(a: any[]): number;
function getLength(a: any) {return a.length;
}
