初学-TypeScript-笔记01

 vue 转向 react ,正好vue3.0 也用到TypeScript     所以需要抓紧时间学习 TypeScript 。

教学视频 是 千锋前端TypeScript教程陆荣涛老师主讲(陆神顶配版TS入门教程)

(可能之前都有一些基础 但是比较凌乱  现在想系统性的学习一下,而且视频 我都是看完一遍 第二遍的时候才开始记笔记  如果有小伙伴 想学习的话 根据自己实际情况 学习就行)

学习视频  --->  千锋前端TypeScript教程陆荣涛老师主讲

 TypeScript  简称 ts

 Javascript 简称 js

什么是TypeScript 

ts 是 js 的一个超集,可以在ts 中使用 js 之外的扩展 语法,同时借助ts 对面向对象 和静态类型的 良好支持,可以编写更大型更健康的项目。

我个人理解ts 把它理解成 预编译 也行 或者把他理解成 对你所使用的数据增加类型判断等 从而可以在运行代码之前就可以检验出代码是否正确,从而达到了更早发现问题的目的。

关于 ts 的优缺点

优点:

提供可选的强静态类型

更早发现 BUG

代码可预测

丰富的 IDE 支持

方便重构

提供面向对象的写法

缺点:

不是真正的静态类型

有一定的学习成本

需要写更多的代码

需要编译

TS 常用数据类型(基础篇 且 必用)

通常声明一个变量 以 :类型  为准  如 数字类型   let num:number = 6;(在以后的变量使用中 如果num的数据类型发生变化(除了null undefined 外) 则代码编译的时候就会警告,这就是ts 不同于js 的地方之一)

TS中的常用的数据类型有 (内置类型)Number, String, Boolean, Null, Undefined, Void, enum,Array,Any,Object,元组, 接口等

数字类型

例如 let decimal: number = 6;

字符串

let color: string = "blue";

布尔类型

let isDone: boolean = true;

let bool1: Boolean = new Boolean();

Null和Undefined

null和undefined是所有类型的子类型,可以赋值给 任意类型的变量

undefined表示未定义的值,一个变量最原始的状态,例如声明了变量没有赋值

null是空值的意思,表示一个对象被人为的重置为空对象,相当于栈中的变量没有指向堆中的内存对象。

let num: number = undefined;

void类型(表示没有任何返回值的函数;表示没有任何类型

function warnUser(): void {

console.log("This is my warning message");

}

enum枚举类型

enum Color {Red, Green, Blue}

let c: Color = Color.Greent

enum Color {Red = 1, Green, Blue}

let c: Color =color.green

数组

数组的项中不允许出现其他的类型; 有时候可以通过any类型来允许出现任意类型

类型+方括号的表示法 例如 number[], 这种类型的数组里面是不允许有除了number之外的类型

数组泛型 Array+ <类型> 例如 Array<number>

接口表示数组, 利用索引签名

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

interface selfArray {

[index: number]: numer

}

let list3: selfArray = [1,2,3]

元组(数组是合并了相同类型的对象, 而元组Tuple合并了不同类型的对象

let list:[number, string] = [1, 'a']

Any类型

let notSure: any = 4;

notSure = "maybe a string instead";

notSure = false;

Object 类型

Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法

let prettySure: Object = 4;

prettySure.toFixed(); 这行会直接报错



安装编辑器  编译环境


我个人还是习惯用webstrom 编辑器

新建 xxx.ts 文件

在该文件中输入console.log('这是一个简单的测试!');

然后在该文件下打开termial   输入命令 tsc xxx.ts  后 会生成一个与之相对应的js 文件 ,然后再执行 node xxx.js 控制台输出内容。这样一个简单的ts 文件转化 以及输出 就完成了。

这里事先要说一下 将来可能会看到 xxx.ts 的文件 也会看到 xxx.tsx 文件 ,这个问题 问过大佬 大佬说 ts是js文件(通过编译转化成js文件) tsx是写代码模版的。日后会看到很多 先温习一下基础知识。

优化编译

解决 ts 和 js 的代码冲突问题

当 ts 和 js 中出现相同方法名称或者变量名称的时候 会出现警告。

如图


看视频教程中用的vscode 出现了 但是我用的webstrom中就没有出现 应该是我本地的代码自动编译了,另外截图中的参数并没有增加类型


tsc --init   执行命令后 会在文件下生成 tsconfig.json 文件里面有各种配置项 (执行后会发现 方法中传入的参数会报警告,原因是没有定义 参数的类型)

tsc --watch  执行命令后 可以实时检查代码编译情况,包括报错情况。

tsc -noEmitOnError xxx.ts 文件 执行该命令的时候 当ts文件中的方法出现错误的时候 文件不可以编译成js 文件。(日后项目优化的时候 会用到)

在ts 文件中有类型的增加 如 

function greet(person:string,date:Date){

console.log(`Hello ${person}, Today is ${date.toDateString()}`);

}

中的 person:string

在编译成js 代码后 没有出现 后面的 :string

以下是代码部分 我直接贴出来 有空的小伙伴 勤加练习。

//字符串

let str:string ='hello world!';

//数值

let num:number =100;

//布尔

let bool:Boolean =true;

//数组  (有两种写法) :type[]  :Array<type>(泛型写法)

let arr01:number[] = [1,2,3];//数组中必须是 number 类型的值

let arr02:Array = [1,2,3];

//特殊类型 any  (可以将任意类型的值 赋值给 对应的变量)  如下

let obj:any = {

x:0

};

obj ='any 也可以赋值成 字符串。'

//函数  :void 意思是 默认啥也不返回  name: string  类型注释  :void 返回值类型注释

function greet(name:string):void{

console.log(name)

}

greet('字符串参数。')

//也可以 写入 number 返回值类型

function returnNum(x:number):number{

return x>1?x:1

}

returnNum(50);

//匿名函数  会自动指定编译类型 names 中有不同类型的值 forEach输出的时候

// 就可以正常输出 不报任何错误

//值得注意的是  当我们打印 x.toUpperCase()的 时候就会报错toString() 不报错

let names = ['1','2',3];

names.forEach(x =>{

console.log(x.toString());

})

//对象类型

function printCoord(pt:{x:number,y:number}){

console.log(pt.x)

console.log(pt.y)

}

printCoord({x:1,y:1});

// 对象类型中 传入的参数 是可选 的  如下 last? 就是 用户 可传 可不传的 值  不可以额外传入 没有接收的值

function printName(obj:{first:string,last?:string}){

console.log(obj.first)

console.log(obj.last ?obj.last:'last 没有值');

//等同于上面的三元表达式

    console.log(obj.last?.toString())

}

printName({first:'对象类型中传入last值',last:'传入last值。'});

printName({first:'对象类型中不传入last值'});

//联合类型  两个或者多个其他类型组成的类型

// 既可以是 字符串类型 也可以是 数值类型

function printId(id:string |number ){

console.log(id);

// 类型缩小 也叫类型判断  其实就是 事先对传过来的值 增加一个判断 然后根据类型的不同做不同的事儿

    if(typeof id ==="string"){

console.log('传过来的是个字符串类型。')

}else{

console.log('传过来的是个数值类型。')

}

}

printId(100)

printId('100')

// 既可以传入 字符串  也可以传入 字符串类型的数组

// 这里 主要是想练习一下 Array.isArray(xxx) 的方法,以前都是通过 长度判断是否为字符串的

function welcomePeople(x:string[] |string){

if(Array.isArray(x)){

console.log('传过来的是个字符串类型的数组。')

}else {

console.log('传过来的是个字符串。')

}

}

welcomePeople(['1','2','3']);

welcomePeople('传入字符串。');

// 类型别名  通过 type  直接定义  对象 数值 字符串 三种类型

type obj = {

x:number,

y:number

};

type Id =number;

type name =string;

type arr = Boolean;

function isObjType(point:obj){

console.log(point.x)

console.log(point.y)

}

isObjType({x:0,y:1});

function isString(x:Id){

console.log(x)

}

// 自定义返回值 方式  之前的:void

type useArr =string;

function isMethods(str:string):useArr{

return str;

}

isMethods('返回一个字符串。')

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容