TypeScript

TypeScript

TypeScript就是JavaScript的超集，适用于大型应用或多人协作

TypeScript vs JavaScript

1. TypeScript更适用于大型应用
2. 是javascript的超集(typescript文件最终还是要编译成javascript文件)
3. TypeScript是跨平台且开源的语言
4. TypeScript可以引入javascript流行的组件库

环境安装

• 安装node，先去官网下载最新版本安装 官网地址，安装好之后，打开cmd，输入

  	node -v
  	npm -v
  

  出现版本号就说明安装成功了

• 安装TypeScript包,在cmd中输入

  windows

  	npm install typescript -g
  	tsc --version
  

  mac

  	sudo npm install typescript -g
  

编写你的第一个typescript程序

			1.初始化项目。
					npm init -y	生成 package.json 文件
					
			2.创建tsconfig.json文件。
					tsc --init	Typescript的配置文件
					
			3.安装@types/node。
					npm install @types/node --dev-save
					
			4.创建编写HelloWorld.ts文件。
					var a:string = "HelloWorld"
					console.log(a)
					
			5.在VS Code 终端菜单下，选择 运行生成文件（Ctrl+Shift+B），选择tsc：构建-文件夹名/tsconfig.json，在本地编译出来一个HelloWorld.js文件。
			
			6.在终端中输入node helloWorld.js就可以看到结果了。

Typescript数据类型

• Undefined :
• Number:数值类型；
• string : 字符串类型；
• Boolean: 布尔类型；
• enum：枚举类型；
• any : 任意类型；
• void：空类型；
• Array : 数组类型；
• Tuple : 元祖类型；
• Null ：空类型。

---

Undefined类型

js中，你定义一个变量而不给它进行赋值的时候，它的值就是undefined。

	var a:string;
	console.log(a);		//undefined

Number类型

js中，只要是数字，数据类型就是number，不管是小数还是整数。
特殊的Number类型： NaN: 不是一个数值。Infinity :正无穷大。-Infinity：负无穷大。

String类型

只要是在js中用引号包起来的内容就是一串字符串。

Boolean布尔类型

js中少不了逻辑判断，逻辑判断用的最多的肯定就是true和false，boolean只有两个值，就是true和false。

enum 类型

这个类型我不是太理解，别人是这么说的

这个世界有很多值是多个并且是固定的，比如：

世界上人的类型：男人、女人、中性
一年的季节：春、夏、秋、冬 ，有四个结果。
这种变量的结果是固定的几个数据时，就是我们使用枚举类型的最好时机：

enum REN{ nan , nv ,yao}
console.log(REN.yao)  //返回了2，这是索引index，跟数组很想。

如果我们想给这些枚举赋值，可以直接使用=,来进行赋值。

enum REN{
    nan = '男',
    nv = '女',
    yao= '妖'
}
console.log(REN.yao)  //返回了妖 这个字

any

一个写惯了前端的人，有时候不自觉的就分不清类型了。这是个不好的习惯，也是前端的痛，就因为这个原因，JavaScript也多次被人诟病说大型项目不适合用JavaScript。但是习惯一旦养成，改是需要时间和磨练的。TypeScript友好的为我们提供了一种特殊的类型any，比如我们在程序中不断变化着类型，又不想让程序报错，这时候就可以使用any了。

Null类型：

与 Undefined 类似，都代表空。Null 代表是引用类型为空。意义不大，但是有用。后续学习中会使用到。

注意：剩余的数组、元组、void 会在后续的章节中讲解。

PS: 我觉得这样总体来看，js跟ts写法其实区别不大， 更加严谨了，但是第一次上手写 vue + ts， 变化可不是一点半点

之前的写法是这样的：

<template>
  <div class="login-info">
    <mu-container class="login-info-box">
      <!-- <mu-avatar color="indigo">
        <mu-icon value="account_circle"></mu-icon>
      </mu-avatar> -->
      <h3>Welcome to login</h3>
      <mu-text-field label="邮箱" v-model="user.email" label-float icon="account_circle"></mu-text-field>
      <mu-text-field label="密码" v-model="user.password" label-float  icon="locked" :action-icon="visibility ? 'visibility_off' : 'visibility'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'"></mu-text-field>
      <div style="text-align: right;margin:">
          <span>忘记密码？</span>
      </div>
      <div class="login-footer">
          <mu-button color="primary" @click="login()">登录</mu-button>
          <mu-button @click="register()">注册</mu-button>
      </div>
    </mu-container>

  </div>
</template>

<script>
export default {
    data(){
        return {
            visibility: false,
            user: {
                email: '',
                password: ''
            },
            open: false
        }
    },
    methods: {
        login(){
            if(!this.user.email) {
                this.$toast.error('请输入用户名邮箱');
            }else if(!this.user.password) {
                this.$toast.error('请输入密码');
            }else {
                this.$store.dispatch('login',this.user)
            }
        },
        register(){
            this.$router.push('/register')
        }
    },
    computed: {
        // 获取点击注册之后的状态值
        logins() {
            return this.$store.state.logins
        }
    },
    watch:{
        logins(newVal) {
            if(newVal === "1") {
                this.$toast.success('登录成功');
                this.$router.push({ path:'/index' })
            }else if(newVal === "0") {
                this.$toast.error('登录失败，请检查用户名密码是否正确');
            }
        }
    }
}
</script>

用了ts之后，写法变成这样了：

<template>
  <div class="login-info">
    <mu-container class="login-info-box">
      <!-- <mu-avatar color="indigo">
        <mu-icon value="account_circle"></mu-icon>
      </mu-avatar> -->
      <h3>Welcome to login</h3>
      <mu-text-field label="邮箱" v-model="user.email" label-float icon="account_circle"></mu-text-field>
      <mu-text-field label="密码" v-model="user.password" label-float  icon="locked" :action-icon="visibility ? 'visibility_off' : 'visibility'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'"></mu-text-field>
      <div style="text-align: right;margin:">
          <span>忘记密码？</span>
      </div>
      <div class="login-footer">
          <mu-button color="primary" @click="login()">登录</mu-button>
          <mu-button @click="register()">注册</mu-button>
      </div>
    </mu-container>

  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Toast } from 'vant';

@Component
export default class Login extends Vue {
    private visibility:boolean = false;
    private user: any = { email: '',password: '' };
    private open:boolean = false;

    private login() {
        if(!this.user.email) {
            Toast('请输入用户名邮箱');
        }else if(!this.user.password) {
            Toast('请输入密码');
        }else {
            this.$store.dispatch('login',this.user);
        }
    }

    private register() {
        this.$router.push('/register');
    }


    // computed
    get logins(){
        return this.$store.state.logins;
    }

    // Watch
    @Watch('logins')
    private onChangeLogins(newVal: any, oldVal: any) {
        if(newVal === "1") {
            Toast('登录成功');
            this.$router.push({ path:'/index' })
        }else if(newVal === "0") {
            Toast('登录失败，请检查用户名密码是否正确');
        }
    }
}
</script>

demo地址：demo

源码地址： GitHub

如果可以，我希望大家给我点一下github的小星星。嘿嘿