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