随着vue3.0的即将到来,是时候学习一下TS了

  简介:TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

  ts并不是js语言,所以它是不能直接被浏览器识别的,所有从ts到js是有一个转换的过程,我们可以称之为编译。

  ts转化到js和es6到es5是类似的,所以我们借助webpack 构建工具,将要使用的转化插件是ts-loader,和css-loader,style-loader都是差不多的

  https://www.webpackjs.com/guides/typescript/ webpack 使用指南

  webpack 4  安装webpack-cli  创建webpack.config.js 文件

  执行 npm install --save-dev typescript ts-loader 安装转化插件,创建tsconfig.json 配置文件

  整体的项目结构如图

  

  测试一下,我们创建一个ts文件tsdome.js,经过编译后申请bundle.js

  tsdome.ts

function getname():string {
let name: string = "123"
return name
}
console.log(getname())

  最终生成的bundle.js(可以不用关心)

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("123")}]);

  最终可以再浏览器打印出123  

  经过上面我们初始开发ts的环境已经搭建完毕

  一、TS基础类型

    布尔值 boolean  数值 number  字符串 string  数组 number[] 或者 Array<number>  元组 Tuple 枚举 enum

    任何类型 Any  空值 void  Null和Underfined  nerver   Object 对象

    下面是所以的类型,以及所以的类型使用

let isdome: boolean = true
let cname: string = '123132'
let age: number = 123
let list: number[] = [1,2,3,4]
let listname: string[] = ['1','2','3','4']
let listarray: Array<number> = [1,2,3,5]
// 元组 对每个元素都进行单独类型定义 ,如果类型对不上就会报错
let yzlist: [number,number,string] = [1,2,'3']
//枚举 (好像有点像对象)
enum Color {red,green,blue}
let c: Color = Color.red
let notsure: any = 4 //不确认类型,可以用any function getbname(): void {
// 表示没有换回值的函数
console.log(123)
}
getbname()
// undefined null 意思不是很大
let und: undefined = undefined
let nl: null = null // never 表示永不存在的值类型,如一些总是抛出错误,或者根本不会有返回值的函数表达式,或者是箭头函数
function error(message: string):never {
throw new Error(message)
}
//object 对象类型
let obj: object = {
a:132
}
// 类型断言
let anykey: any = '七月的风,八月的雨,你的过去,无法参与'
let alength: number = (<string>anykey).length
console.log(alength) let aslength: number = (anykey as string).length
console.log(aslength)

  二、变量申明 let const var

  没什么可说的,es6 es5 ,let表示局部变量,没有申请提升,只能先申明后使用,否则报错,var 略,const,表示常量,赋值后就不能再次改变了。如果值是一个对象,表示地址不能变。

  三、接口

  

// 定义一个父类接口parent 里面有一个name属性
interface parent {
name: string
} function getname(anyamin:parent) {
console.log(anyamin.name)
} //继承于parent的子类必须实现 name属性,要不会报错
getname({name: '123123'}) // 当然接口的属性是可以定义成可选的
interface anany {
name: string,
age?: number,
sex?: string
}
let bbb: anany = {
name: '123132',
}
// bbb可以不去实现sex 和 age ,当然也不能给bbb新增属性,那么也会报错
// 只读属性的定义
interface point {
readonly x: number,
readonly y: number
}
let bp: point = {
x: 123,
y: 123
}
// bp.x = 6 报错,只读属性不能从新赋值 // 函数类型
interface SearchFunc{
//表示一个函数,有两个参数,第一个参数是string类型,第二个参数是number,返回值是void
// x y 为形参,不需要一样
(x: string,y: number): void
}
let func: SearchFunc = function(z: string,b: number) {
console.log(z+b)
}
func('1',2)
// 可索引类型 好像和数组类似,没多大区别
interface stringarrray{
[index: number]: string
}
let arrayname: stringarrray = ['bob','333']
console.log(arrayname[0]) //类 类型 。。。。。。

  类类型

// 类继承接口
//类 类型
interface ClockInterface {
currentTime: string
}
// 定义一个接口,里面有一个currentTime
// 如果使用类去继承他,则必须再构造函数中初始化它
class Clock implements ClockInterface {
currentTime: string
constructor(h: number,m: number){
this.currentTime = '123'
}
} interface parent {
tick(): void, //tick方法,返回值是空
name: string // 属性那么,为string 类型
} class child implements parent {
name: string
constructor(x: string) {
this.name = x
}
tick(): void {
console.log(this.name)
}
}
let c1 = new child('cz')
c1.tick()
// 接口继承接口
interface p1 {
name: string
}
interface p2 extends p1 {
age: number
}
class c1 implements p2 {
name: string
age: number
constructor() {
this.name = '123'
this.age = 12
}
}
// 接口继承接口
interface Counter {
(start: number): string //代一个string参数,返回值未string的函数
interval: number
reset (): void
} function getCounter(): Counter {
let counter = <Counter>function(x: number){}
counter.interval = 123
counter.reset= function():void {
}
return counter
}
let cc = getCounter()
console.log(cc.interval) //接口继承类
class pc {
private state: any
}
interface sel extends pc {
select (): void
}
// 接口不能继承代有私有类型类
class pd implements sel {
constructor () {
}
select ():void { }
}

  对于接口而言,不能出现私有的属性或者方法,因为接口的属性在其继承者上,必须实现。二私有的属性和对象是不能够继承的。

 

TS学习的更多相关文章

  1. TS学习随笔(七)->声明文件

    now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...

  2. TS学习随笔(三)->接口

    终于来到了比较重要的知识,接口,有多重要呢,反正是很重要好啵 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型. 那什么是接口呢,在面向对象语言中,接口(Interf ...

  3. TS学习随笔(四)->数组的类型

    少侠们,今天我们继续来搞一搞TS 今天我们要来看一看TS中数组的定义是个什么鬼样子 数组的类型: 在 TypeScript 中,数组类型有多种定义方式,比较灵活.下面我们来看看有哪些定义方法 「类型 ...

  4. TS学习随笔(一)->安装和基本数据类型

    去年学过一段时间的TS,但由于在工作中不常用.就生疏了,最近项目要求用TS,那我就再回去搞搞TS,写一篇记录一下自己学习TS的进度以及TS知识点 首先,关于TS的定义我就不在这描述了,想看百度一下你就 ...

  5. TS学习随笔(六)->断言

    now,我们来看一看TS里面的断言,听起来很上档次啊,其实看完你就发出惊叹,这就是断言啊 类型断言 类型断言(Type Assertion)可以用来手动指定一个值的类型 语法 <类型>值 ...

  6. TS学习随笔(五)->函数

    这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expre ...

  7. TS学习随笔(二)->类型推论,联合类型

    这篇内容指南:        -----类型推论  -----联合类型 类型推论 第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...

  8. TS学习之for..of

    for..of会遍历可迭代的对象,调用对象上的Symbol.iterator方法(可迭代对象,数组,字符串等) let arr = ["hello", "ts" ...

  9. TS学习之泛型

    可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { return args; } functi ...

随机推荐

  1. httpclient+jsoup实现网页信息抓取

    需求分析:抓取:http://tools.2345.com/rili.htm中的万年历(阳历.阴历等等). 1.首先为抓取的内容创建一个类.实现封装. package com.wan.domain; ...

  2. 品 SpringBootApplication 注解源码

    @SpringBootApplication 由以下三个注解构成: @SpringBootConfiguration@EnableAutoConfiguration@ComponentScan 一:@ ...

  3. SpringApplication及banner的配置

    配置SpringApplication 如果SpringApplication无法满足要求,你可以自己创建一个局部实例,然后对其进行设置: public static void main(String ...

  4. 关于MySQL中查询结果的count和from后的条件与where后的条件对比

    啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...

  5. linux下快速查找文件(转载)

    权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xxmonstor/article/deta ...

  6. 六、smarty-缓存控制前的页面静态化原理

    页面静态化可以实现优化服务,对大流量访问网站非常至关重要 为什么页面静态化, 1.  不去执行数据库连接 2.  不去执行SQL语句 设置按时间更新, 1.  按时间更新,如果缓存文件设置1小时 如下 ...

  7. 后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」

    后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」 一.总结 一句话总结: laravel-ide-helper作用是:代码提示 larav ...

  8. spark 笔记 13: 再看DAGScheduler,stage状态更新流程

    当某个task完成后,某个shuffle Stage X可能已完成,那么就可能会一些仅依赖Stage X的Stage现在可以执行了,所以要有响应task完成的状态更新流程. ============= ...

  9. Vue复杂路由器的实现

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. DAY 4模拟赛

    DAY 4 zhx出题 T1 裂变链接 [问题描述] 你是能看到第一题的 friends 呢. ——hja 众所周知,小葱同学擅长计算,尤其擅长计算组合数,但这个题和组合数没什么关系. 现在有