文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

typeScript入门基础介绍

2024-04-02 19:55

关注

TS 的特点:

typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门。

一、安装 TS

使用之前需要安装:

npm install -g typescript

安装完成之后,使用 tsc -v 检查安装之后的版本。

第一个 ts 文件:01.ts,代码如下:

(()=>{
 function show(msg){
  return "字符串:"+msg
 }
 let str = "前端"
 console.log(show(str))
})()

通过 script 引入 html 文件

<script  src="./01.ts"></script>

页面正常运行,因为 ts 能够支持 js 语法,所以文件内直接引入使用是没问题的,除此之外,还可以使用 node 命令运行该文件,也是可以正常执行的。

如果此时,在 ts 文件内加入 ts 语法:

// 添加类型支持
(()=>{
 function show(msg:string){
  //添加 string 的意义在于传入的 msg值只能是字符串,不可以是其他类型
  return "字符串:"+msg
 }
 let str = "前端"
 console.log(show(str))
})()

此时浏览器运行时,会报错,无法继续执行。

此时就需要将 ts 文件编译为 js 文件,打开命令行工具,运行:

tsc 01.ts

运行后会自动生成一个 01.js 文件,查看js代码内容如下:

function show(msg) {
 return "字符串:" + msg;
}
(function () {
 var str = "前端";
 console.log(show(str));
})();

总结:

二、Vscode 自动编译 ts

新建一个项目目录,当前目录下打开命令行工具,执行

tsc --init

自动生成 tsconfig.json 文件,代码如下:

{
 "compilerOptions": {
  "target": "es2016",                                
  "module": "commonjs",                               
  "outDir": "./js",                                  
  "esModuleInterop": true,                             
  "forceConsistentCasingInFileNames": true,      
  "strict": true,                                                  
  "skipLibCheck": true                               
 }
}

注:

outDir 表示的是 ts 文件编译之后生成 js 文件的存放目录。如果属性值之后的文件夹不存在时,就会自动创建。

strict 表示是严格模式。

新建 index.ts 文件,代码如下:

(() => {
 function showStr(str:string) {
  return str 
 }
 let a: string = "前端人"
 // 调用函数
 console.log("a",showStr(a));
})()

类型注解:函数地形参后加修饰符,用来限制传入参数的类型,string 表示只能为字符串类型。

在命令行运行

tsc -w 
//或
tsc -watch

自动生成 js 文件夹,包括 index.js 文件。运行该命令后,只要 ts 文件发生改变,就会自动编译。

一切运行正常,没有任何错误。

如果调用函数的参数传为数值时:

console.log(showStr(123));

此时编辑器内报错:类型“number”的参数不能赋给类型“string”的参数。

ts 能够智能提示问题,是因为 ts 提供了静态代码分析,可以分析代码结构和提供的类型注解。

但是 tsc 编译的时候,虽然会提示错误,但它依旧会编译为 js 文件,js 在执行的时候不会报错,因为 js 是弱类型语言。

三、入门 TS

基础数据类型

接口

接口简单点讲就是一种约束。在 ts 里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

使用形式:

(() => {
 //定义一个接口
 interface Person{
  firstName:string,//添加类型限定
  lastName:string
 }
 function showFullName(person:Person) {
  // 添加类型限定之后,内部会自动提示接口内的字段
  return person.firstName + '_' + person.lastName
 }
 const p = {
  firstName: "Hello",
  lastName: "World"
 }
 console.log("姓名",showFullName(p));
})()

如果把 p 中的 firstName 注释掉,就会报错,提示:

在本实例中,接口的意义就是限定传入 showFullName 函数内的数据属性的限制。

接口优点:自动检测传入的数据是否符合接口规范,如果不符合则会报错。

Typescript类介绍

传统的 JavaScript 的程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来从 ECMAScript 2015,也就是 ECMAScript 6 开始,JavaScript 程序员将能够使用基于类的面向对象的方式。使用 TypeScript,我们允许开发者现在就使用这些特性,并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript的版本。

ts 的类只是一个语法糖,本质还是 js 函数实现的。

使用示例:

(() => {
  //定义一个接口
  interface Person{
    firstName: string,
    lastName:string
  }
  //定义一个类
  class Personal {
    //定义公共的字段属性
    firstName: string
    lastName: string
    fullName: string
    // 构造函数
    constructor(firstName: string,lastName:string) {
      //更新属性数据
      this.firstName = firstName
      this.lastName = lastName
      this.fullName = this.firstName + this.lastName
    }
  }
  
  const p = new Personal('你','好')
  
  function showFullName(person: Person) {
    return person.firstName + person.lastName
  }
  console.log("p",showFullName(p));
})()

到此这篇关于 typeScript入门基础介绍的文章就介绍到这了,更多相关 typeScript内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯