TypeScript基础总结(入门篇)-01一、TypeScript开发环境搭建 1、下载Node.js 2、使用npm

TypeScript是是什么？
1、以js为基础构建的语言，一个js的超集；
2、可以在任何支持js的平台中执行，TypeScript扩展了js并添加了类型；
3、TS不能被js解析器直接执行，TS可以直接编译JS

一、TypeScript开发环境搭建

1、下载Node.js

//前往官网
//https://nodejs.org/en/download

2、使用npm全局安装typescript

//windows电脑
npm i -g typescript
//Mac电脑
sudo npm i -g typescript

3、在桌面创建一个文件夹，文件夹里创建一个后缀带.ts文件用来编译

ts文件.png 点击改文件使用编辑工具(WebStore或VScode)打开即可，并在文件内输入打印一段文字。打印一段文字.png

4、使用tsc命令执行单个ts文件

tsc 01-hellow.ts

tsc命令.png 执行完成之后就是完成了对ts文件的编译。
同时01-hellow.ts文件问又多了一个01-hellow.js文件 01-hellow.js.png 打印代码相同.png 看到这样即表示成功了！

二、TypeScript类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量(参数、形参)的类型
制定类型之后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错.简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

2.0、再创建一个`02-basis.ts`文件

//声明一个变量a，同时指定它的类型为number
let a:number;

//a的变量是number，值只能是数字
a = 10;
//如果a赋值字符串会报错，不符合TS语法规范。字符串不能赋值给number。

//声明字符串亦是如此
let name2: string;
name2 = '许褚'

值只能是数字.png

//声明完变量直接赋值
let opens: boolean = false;
opens = true;

//如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检查
let dow = false;

//Js中的函数是不考虑参数的类型和个数的
function sum(a,b){
    return a + b;
}

// sum(123,456);
console.log(sum(123,456));//579
//创建html文件，打印结果

2.1、在当前文件夹下创建`index.html`文件

html文件引入生成的02-basis.js文件 index.html.png 引入之后在对文件02-basis.ts文件tsc重新编译运行结果.png

function sum(a,b){
    return a + b;
}
console.log(sum(123,'456'));

运行结果.png

三、TypeScript编译选项

3.1、自动编译文件

编译文件时，使用-w指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译

tsc xxx.ts -w

ts代码如果有代码改变会重新编译ts
缺点：只能对单一ts文件执行有效果，多个文件不可以 tsc xxx.ts -w.png

3.2、自动编译整个项目

如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件
但是能直接使用tsc命令的前提是，要先在项目根目录下创建一个ts的配置文件tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需要tsc命令即可完成对整个项目的编译

3.3、创建一个新的工程新建`app.ts`和`tsconfig.json`文件

新的工程.png 修改tsconfig.json文件

{
  /*
  `tsconfig.json`文件是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
  "include" 用来指定哪些ts文件需要被编译
  一个*表示任意文件，两个*表示任意目录
  */
  //include表示包含
  "include": [
    "./src/**/*" //表示根目录下的src目录下的任意目录下的任意文件都会被编译
  ]
}

接着在项目中创建src目录,并在目录下再新建一个app.ts文件 app.ts.png 然后执行命令

tsc

tsc指令.png tsc只编译了src目录下的ts文件，src以外的ts文件未被编译，因为在配置项 tsconfig.json指定了编译的文件编译。

如果有文件希望被编译并有别的作用，在src目录下创建新的文件夹，可配置如下

{
    //exclude表示不需要被编译的文件目录,一般情况下无需管它
    "exclude": [
      "./src/hello/**/*"
    ]
    //默认值:["node_modules","bower_components","jspm_packages"]
}

再次执行tsc命令 tsconfig.json中配置compilerOptions

{
  //compilerOptions编译器的选项
  "compilerOptions": {
    "target": "es2015",//设置ts代码编译的目标版本 ESNext:表示最新版本的值
    //module指定要使用的模块化的规范
    "module": "commonjs",
    //lib:用来指定项目中要使用的库,一般情况下是不用动的
    //"lib": [],
    //outDir:用来指定编译后文件所在的目录
    "outDir": "./dist"
  }
}

执行tsc，查看下效果。编译后的文件全部进入dist目录。配置outFile，我要把我的编译后的文件合并到app.js当中

{
    "compilerOptions": {
    //outFile:将代码合并为一个文件
    //设置outFile后，所有的全局作用域中的代码会合并到一个文件中
    "outFile": "./dist/app.js"
    }
}

将上面生成的dist目录全给删了，执行tsc编译,看效果

//app.ts

let a = 10;
console.log(a);

//m.ts

let b = 20;
let c = 'hello world';
console.log(b,c);

看效果.png 配置allowJs选项,在src目录下新建一个hello.js文件

{
  //compilerOptions编译器的选项
  "compilerOptions": {
    //是否对js文件进行编译，默认false
    "allowJs": false,
    //是否检查js代码是否符号语法规范,默认false
    "checkJs": false,
  }
}

配置removeComments是否移除注释，为true时项目中所有注释移除。

{
  //compilerOptions编译器的选项
  "compilerOptions": {
    //是否移除注释,默认false
    "removeComments": false,//true
  }
}

配置noEmit。设置true后，将dist目录下所有文件删除，执行tsc编译

  "compilerOptions": {
    //不生成编译后的文件
    "noEmit": true, //使用的几率不高
  }

配置noEmitOnError选项。

  "compilerOptions": {
    //当有错误时不生成编译文件,默认false
    "noEmitOnError": false,
  }

配置alwaysStrict严格模式选项。执行tsc运行效果

  "compilerOptions": {
    //用来设置编译后文件是否使用严格模式,默认false
    "alwaysStrict": true,
  }

严格模式选项.png 配置noImplicitAny选项。为true时。

  "compilerOptions": {
    //不允许隐式的Any类型
    "noImplicitAny": true
  }

//app.ts

function fn(a,b){
    return a+b;
}

//app.ts

//修改后即可
function fn(a:number,b:number){
    return a+b;
}

配置noImplicitThis。

//不允许不明确类型的this
"noImplicitThis": true

在app.ts文件中定一个函数

//app.ts

function fn2(){
    alert(this);//this是不明确的，不知道this是什么
}

文件中定一个函数.png

//app.ts

function fn2(this:Window){//手动指定一个Window报错消失
   alert(this)
}

配置strictNullChecks选项，默认false。

//严格的检查空值
"strictNullChecks": true

//app.ts

//从网页当中获取元素
let box1 = document.getElementById('box1');
box1.addEventListener('click',function (){
    alert('hello');
})

//app.ts

//从网页当中获取元素
let box1 = document.getElementById('box1');
if (box1 !== null){//添加判断继续执行
    box1.addEventListener('click',function (){
        alert('hello');
    })
}
//或者
box1?.addEventListener('click',function (){
    alert('hello');
})

github地址
简书

TypeScript基础总结(入门篇)-01