typeScript入门基础介绍

目录
  • 一、安装 TS
  • 二、Vscode 自动编译 ts
  • 三、入门 TS
    • 基础数据类型
    • 接口

TS 的特点:

  • 始于 javaScript 归于 javaScript 。
  • 强大的类型系统。
  • 先进的 javaScript 。
  • 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上。

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));
})();

总结:

  • ts 文件内直接输入 js 文件,在 html 文件引入 ts 文件,在浏览器内是可以直接运行的。
  • ts 文件内如果有 ts 语法代码,若在 html 文件内引入 ts 文件,直接在浏览器运行会报错,此时需要先编译为 js 文件。
  • 在 ts 文件函数中的形参,如果使用了某个类型进行修饰,那么在最终编译的 js 文件中是没有该类型的。
  • ts 内地 let 修饰符,编译后的 js 文件内变成了 var 。

二、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

基础数据类型

  • 为布尔值类型。如:let isDone: boolean = false;
  • number 为数值类型,ts 能够支持二、八、十、十六进制数据。如:let decLiteral: number = 6;
  • string 为字符串类型。如:let name: string = "bob";
  • 表示数组类型。数组名后加元素类型[] 加 数组值。如:let list: number[] = [1, 2, 3];
  • 元组类型。如:let arr:[string,number,boolean] = ['str',1,true]
  • 枚举,为一组数值赋予友好名字。如:enum Color { red, green, blue }
  • 任意类型,有时不确定传入的值是什么类型,就可以使用 any 类型。如:let notSure:any = 1
  • 空值,与 any 正好相反,表示没有任何类型。 如:function show():void { }
  • null undefined
  • never 类型,表示永不存在的值。function error(message: string): never { throw new Error(message); }

接口

接口简单点讲就是一种约束。在 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • TypeScript入门-接口

    大致介绍 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 接口 例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = { size: 10, label: "Size 10 Object" }; printLabel(myObj); printLabel函数有一个参数,要求这个参数是个对象,并

  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript + Vue ,毛计喇,学之...-真香! 注意此篇标题的"前",本文旨在讲Ts混入框架的使用,不讲Class API 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue cr

  • TypeScript入门-基本数据类型

    大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,它相当于是JavaScript的超集 ES5.ES6和TypeScript的关系: 安装 首先需要安装npm,然后在输入 npm install -g typescript 安装完成后,因为TypeScript是以.ts结尾的,要想运行就得把他编译js文件,编译的方法特别简单就是使用tsc命令 ts

  • Vue新搭档TypeScript快速入门实践记录

    目录 1. 使用官方脚手架构建 2. 项目目录解析 3. TypeScript极速入门 3.1 基本类型和扩展类型 3.2 泛型:Generics 3.3 自定义类型:Interface vs Type alias 3.4 实现与继承:implements vs extends 3.5 声明文件与命名空间:declare 和 namespace 3.6 访问修饰符:private.public.protected 3.7 可选参数 ( ?: )和非空断言操作符(!.) 4. Vue组件的Ts写法

  • vue项目中使用ts(typescript)入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • TypeScript基础入门教程之三重斜线指令详解

    前言 TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript.当然最后代码还是编译为Javascript. 三斜杠指令是包含单个XML标记的单行注释. 注释的内容用作编译器指令. 三斜杠指令仅在其包含文件的顶部有效. 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令. 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义. /// <reference path ="..."/> /// <re

  •  typeScript入门基础介绍

    目录 一.安装 TS 二.Vscode 自动编译 ts 三.入门 TS 基础数据类型 接口 类 TS 的特点: 始于 javaScript 归于 javaScript . 强大的类型系统. 先进的 javaScript . 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上. typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门. 一.安装 TS 使用之前需要安装: npm install -g typescript 安装完

  • C# 语言入门基础介绍

    目录 一..NET 体系结构 二.Hello world 三.类型和变量 四.程序结构 前言: C#(读作"See Sharp")是一种新式编程语言,不仅面向对象,还类型安全. 开发人员利用 C# 能够生成在 .NET 中运行的多种安全可靠的应用程序. C# 源于 C 语言系列,C.C++.Java 和 JavaScript 程序员很快就可以上手使用. 本教程概述了 C# 8 及更高版本中该语言的主要组件. C# 是面向对象的.面向组件的编程语言. C# 提供了语言构造来直接支持这些概

  • 前端开发TypeScript入门基础教程

    TYPESCRIPT 官网 github TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为JavaScript代码. 可以看看官网的5分钟 TypeScript Tooling in 5 minutes 安装 TypeScript 命令行运行如下命令,全局安装 TypeScript: npm install -g typescript 安装完成后,在控制台运行如下命令,检查安装是否成功: tsc -V 第一个ts程序 新建文件 test

  • Kubernetes(K8S)入门基础内容介绍

    Introduction basic of kubernetes 我们要学习 Kubernetes,就有首先了解 Kubernetes 的技术范围.基础理论知识库等,要学习 Kubernetes,肯定要有入门过程,在这个过程中,学习要从易到难,先从基础学习. 那么 Kubernetes 的入门基础内容(表示学习一门技术前先了解这门技术)包括哪些? 根据 Linux 开源基金会的认证考试,可以确认要了解 Kubernetes ,需要达成以下学习目标: Discuss Kubernetes. Lea

  • Oracle PL/SQL语言入门基础

    正在看的ORACLE教程是:Oracle PL/SQL语言入门基础.PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE 服务器和其他工具中了,近几年中更多的开发人员和DBA开始使用PL/SQL,本文将讲述PL/SQL基础语法,结构和组件.以及如何设计并执行一个PL/SQL程序. PL/SQL的优点 从版本6开始PL/SQL就被可靠的整合到ORACLE中了,一旦掌握PL/SQL的优点以及其独有的数据管理的便利性,那么你很难想象ORACLE缺了PL

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • AngularJs 60分钟入门基础教程

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

  • JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运算符(+,-,*,/,++,--,%).比较运算符(>,<,<=,>=,==,===,!=,!==).逻辑运算符(||,&&,!).条件运算(?:).位移运算符(|,&,<<,>>,~,^)和字符串运算符(+). 可能很多人不知道&quo

  • python入门基础之用户输入与模块初认识

    一.注释 当前行注释:# 被注释内容 多行注释:""" 被注释内容 """ 二.用户输入 #!/usr/bin/env python #_*_coding:utf-8_*_ #name = raw_input("What is your name?") #only on python 2.x name = input("What is your name?") print("Hello "

  • xhEditor编辑器入门基础

    1.1. 在线可视化HTML编辑器概述 在Web程序应用中,最常见的一种行为是信息和言论的发布和交流.而在信息发布的同时,往往会有对信息发布的格式.类型和功能上的需求,比如:加粗.下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率.在这个需求的背景下,HTML在线编辑器就应运而生了. 顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一.在线HT

随机推荐