回顾我们之前所学
1、最基本的javascript面向对象
2、接触到了ecmascript 2015
3、接触了使用node.js+babel来“编译”一些目前浏览器还不兼容的语法
4、在实际开发中借助webpack等构建工具
由于技术等发展日益加快,我们有必要随着技术等发展及时跟踪步伐。
我们需要学习TypeScript了。
https://tslang.cn/
0、初始化
cd 一个目录
npm init #初始化
1、安装TypeScript
npm install typescript --save-dev
2、创建目录结构
官方有给我们推荐
https://tslang.cn/docs/handbook/migrating-from-javascript.html
projectRoot
├── src
│ ├── file1.js
│ └── file2.js
├── built
└── tsconfig.json
3、配置文件tsconfig.json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": [
"./src/**/*"
]
}
3、新建测试文件
src
目录下,新建一个index.ts
文件,代码如下:
let myName:string = "jack";
console.log(myName);
接下来要运行,首先需要编译。
4、怎么个编译
我们需要借助package.json
,在scripts
段做手脚:
"scripts": {
"b": "tsc && node ./built/index"
},
tsc
命令是TypeScript的编译命令
然后终端执行
npm run b
控制台会输出:
> ts@1.0.0 b /Applications/MAMP/htdocs/ts
> tsc && node ./built/index
jack
此时,我们的项目built
目录中,会生成一个同名的文件index.js
。
这个是编译之后的js文件,编译后的内容如下:
var myName = "jack";
console.log(myName);
5、我们来写一个函数试试
index.ts
代码修改如下:
let showMe = (name:string,age:number)=>{
"use strict";
return "我的名字是:"+name+",我的年龄是:"+age;
}
// 调用函数
console.log(showMe("lily",19));
执行编译命令:
npm run b
控制台输出:
> ts@1.0.0 b /Applications/MAMP/htdocs/ts
> tsc && node ./built/index
我的名字是:lily,我的年龄是:19
index.ts
语法解读:
我们定义函数,指定来参数类型,如果我们在传递参数的时候,不符合的类型,是会报错的
console.log(showMe("lily","19"));
需要的是number类型,而我们传递是字符串。