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的小星星。嘿嘿

发布了16 篇原创文章 · 获赞 2 · 访问量 399
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览