typeScript 了解和简单使用

typeScript 介绍

• typeScript 是 javaScript 的超集
• typeScript 中的代码不能直接在浏览器中使用 需要编译成js代码在浏览器中执行
• typeScript 有类型系统 类似于 java 的强类型语言

typeScript 安装

win + r
输入 cmd 回车
输入以下内容 回车 进行全局安装

npm install -g typeScript

安装成功后 输入一下内容 检查是否安装成功

tsc -V

简单的typeScript代码

function fn(value:string){ // :string 为ts代码
	return value + 'world!!!'
}
fn('hellow ')

使用vscode 自动编译typeScript文件

当前终端中输入

tsc --init

生成了 tsconfig.json 文件
注意：strict 配置项 默认为 true 打开严格模式 学习过程中建议改为false
最后 在vscode 中选择终端 ==》运行任务 ==》 所有任务 ==》 tsc 监视

类型注解

一种轻量级的为函数或者变量添加的约束
简单的语法

let value1: 类型 = 值; // 

接口 interface

是一种能力 是一种约束

//定义一个接口
interface Iperson {
	firstName:string
	lastName:string
}
//输出姓名
function showFullName (person:Iperson) {  //参数必须符合接口的规范
	return person.firstName + '-' + person.lastName
}

const person = {
	firstName:'西门',
	lastName:'吹雪'
}

console.log(showFullName(person)) //西门-吹雪

类

ts中使用js中的类的效果

(() => {
  //定义一个接口
  interface Iperson {
    firstName: string
    lastName: string
  }
  //定义一个类
  class Person {
    //定义公共字段
    firstName: string
    lastName: string
    fullName: string
    //定义一个构造器函数
    constructor(firstName: string, lastName: string) {
      this.firstName = firstName
      this.lastName = lastName
      this.fullName = this.firstName + '-' + this.lastName
    }
  }
  //定义一个函数
  function showFullName(person: Iperson) {
    return person.firstName + '-' + person.lastName
  }
  //实例化对象
  const person = new Person('西门', '吹雪')
  console.log(showFullName(person)) //西门-吹雪
})()