javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 >  typeScript

 typeScript入门基础介绍

作者:前端人

这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文