1.JavaScript 和 TypeScript 的区别
(1)类型检测问题
(2) 没有对是否传入参数进行校验
// 当前foo函数,在被其他调用时,没有做任何的参数校检
// 1.没有对类型进行校验
// 2.没有对是否传入参数进行校验
function foo(message){
console.log(message.length);
}
foo("helle")
foo(123)
2. 如何编译TypeScript 代码
(1)先安装
npm install typescript -g
(2)运行代码: tsc 需要编译的文件
tsc typescript.ts
(3)代码示例初体验:
//1.给变量赋值
let message:string="hello world"
//2.函数参数限制
function foo(payload:string){
console.log(payload.length)
}
foo("english")
(4)如何将这个代码运行到浏览器上面
1.新建一个html文件,并引入文件编译好的文件
2.因为每次新的文件编译,都会生成不同js文件,这时候我们通过webpack搭建一个ts的环境或者利用ts-node库:
这是方式一 :利用ts-node 库,搭建的ts 运行环境
1.安装: npm install ts-node -g
2.并且安装两个依赖包:npm install tslib @types/node
3.输入命令:ts-node TypeScript.ts
这是方式二 :利用webpack,搭建的ts 运行环境
1. npm init 然后一直回车 就建了一个package.json
2.安装webpack : npm install webpack webpack-cli -D
3. 新建一个webpack.config.js 文件
4.在package.json 写一个运行的脚本
"scripts": {
"build": "webpack", //命令
},
在webpack.config.js 里面写相关的配置文件
⚠️:要安装ts-loadel 和babel
npm install ts-loader -D
npm install babel-loader @babel/core -D
tsc --init //自动生成一个tsconfig.json 的配置文件
const path=require("path")
module.exports={
entry:"./src/main.ts",
output:{
path:path.resolve(__dirname,"./dist"),
filename:"bundle.js"
},
resolve:{
extensions:['.ts']
},
module:{
rules:[
{
test:/\.ts$/,
loader:"ts-loader"
}
]
}
}
⚠️:注意我们每次运行打包代码的时候都会输入npm run build ,这样的话很影响开发效率,这时侯我们可以安装一个npm install webpack-dev-serve 本地服务,然后配置下
以上如果在配置webpack 出现错误,可以根据错误去找下之前写的关于webpack文章。
3.Typescript 变量如何声明
var /let /const 变量名:数据类型 = 赋值;
4.其他补充:
1.大小写string 的区别
string: TypeScript 中的字符串类型
String: JavaScript 的字符串包装类的类型