TypeScript速学领悟篇 - 配置和运行

回顾我们之前所学

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类型，而我们传递是字符串。