1,使用node.js

2,配置typescript node i -g typescript

3,创建ts文件 使用tsc + <文件名>在命令行中跑可以跑出一个一样得js文件默认生成的文件是es3的javascript;而ts中在默认的情况下有错误也会进行编译js文件(ts文件可以编译成任何版本的ES文件)

4.在使用ts中

问题:其实问题出在变量命名空间,如果不把文件当作模块使用的话typescript会认为所有文件里的代码都是在一个作用域里的,所以即使在不同文件也不能声明同名变量,

解决方案1:最简单的解决办法就是关掉js文件

解决方案2:

5.TS中最重要的功能就是把js中的动态数据类型变成静态数据类型

在最大功能是对函数返回值给定类型 例子:

function sum (a:number,b:number):number{    //后面的number是返回的值

 return a+b;

}

// 参数传多传少都会报错

// 此时result的值就是收到返回值的类型number;

let result = sum(123,456);

6,功能可以给定变量数据类型,函数数据类型

类型:

any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测(不建议使用); any类型的变量,它可以赋值给任意变量; 即不止影响自己还影响别人;

let d;   // d 的类型是 any  此时为隐式类型即不指定变量类型
d = 10;
d = 'hello';
d = true
let d :any;  //变量设置为any时候就是相当于给TS关闭了类型检测
d = 10;
d = 'hello';
d = true;
let s :string;
s = d; //这里不会报错

//unknown 表示未知类型的值(当我们不知道类型的时候可以使用),而unknown

只是影响自己不会影响别人,unknown类型的变量,不能直接赋值给其他变量;

let  e : unknown;
e = 10;
e = 'hello';
e = true;
//不会影响别人
let s : string;
s = e; //这里会报错

//类型断言(就是让e的数据类型必须是这个string类型)
//可以用来告诉我们解析器变量的实际类型;

s = e as string;  <==>  s = <string>e;

上面用到了类型断言,类型断言的语法 (1)变量 as 数据类型 ,(2) <数据类型> 变量

//void 以函数为例子表示 函数没有返回值 但是函数也可以返回 undefined 和 null 直接返回(即没有返回值但有一个return)

这样写不会报错但是在原则是不建议书写

//使用void数据类型的正确形式
function e():void {
}
//会报错的形式
function e():void {
return 123/‘rere’/true
}

//never 表示永远不会返回结果

function fn2() :never{
throw new Error('报错了!')
}

//object 表示一个js对象(应为对象包含的内容太多不具有限制效果所以我们不建议使用

let a :object;
a = {}
a = function(){}

而我们对object的使用如下使用字面量来书写

let b :{name:string};
b = {name:'孙悟空',age:‘18’};  //报错,对象形式就是多了也不行少了也不行必须形式跟定义得时候一模一样
// 语法 {} 用来指定对象中可以包含那些属性
// 语法: {属性名:属性值,属性名:属性值}
// 在属性名后面加上?表示属性可选 例子
  let b :{name:string,age?: number};
/*


下例子中[propName:string]:ang表示任意数据类型但是赋值时候必须有name属性名
*/  
let c :{name:string,[propName:string]:any };
c = {name:'王超',age:18,hobber:'代码'};

////......
//设置函数结构得类型声明
// 语法:(形参:类型,形参:类型..) => 返回值
let d:(a:number,b:number) =>number;
//上述语句的意思是希望的到的d可以传入俩个参数,并且返回类型是number
d = function(n1:number,n2:number):number{
   return n1+n2;          //在这里只要传入的值不是number或者返回                           //的值不是number就会报错
}
   
 

//array 因为没有规定数组可以写多少个即数组的长度是多少所以在可以在ts中引入了元组的概念

数组的类型声明有俩种
/*
1.数据类型[]
2.Array<数据类型>
*/
//string[] 表示字符串数组
let e:string[];
e = ['a','b','c'];

//number[] 表示数值数组
let f = [1,2,3,4];

let g:Array<nunber>;    //不建议使用
g = [1,2,3];

//tuple

元组,元组就是固定长度的数组即arr.length的长度是固定的

语法:[数据类型,类型,类型]

let a : [string,string];
a = ['hello',123] //报错因为第二个数据不是string
a = ['hello,'1','2'] //报错因为元组在定义的时候长度为2而此时的长度为3
a = ['hello']   //报错 长度不够

//enum 枚举

let i : {name:string,gender:1 | 0}
i = {
   name:'王超',
   gender: 1,
}
console.log(i.gender ===1);
//上述这种情况只是适合于个人开发在团队开发中为了让别人也看清楚引入了enum枚举

///////////
enum Gender{
   Male = 0,
   Female = 1
}
let i :{name:string,gender:Gender};
i = {
   name:'王超',
   gender:Gender.Male  //'male'
}
console.log(i.gender === Gender.Male);   //true

//......
// & 表示同时,       | 表示或者
let j :{name: string} & {age:number};
j = {name:'王超',age:18};  //在这里少一个多一个都不会报错

//////////////
//类型的别名
let k: 1|3|2|4|5;
let l: 1|2|3|4|5;
//上述这样的写起来太麻烦了
type myType = 1|2|3|4|5;  //这里就是给myType的类型与1|2|3..等相                                                         等
let k :myType;
let l :myType;
let h :myType;

k = 6  //报错
k = 4  //true

7优化ts文件的run

优化tsc 文件名.ts 可以使用 tsc 文件名.ts -w 可以减少当修改ts文件的时候需要继续使用tsc 文件名.ts 。但是这样依然是只会单独执行某一个文件

引入tsconfig.json文件是TypeScript编译器的配置文件,TypeScript编译器可以根据它的规则来对代码进行编译

解决办法 1 首先全局安装typescript npm install typescript -g

2 在项目目录下执行 tsc --init

3 至此tsconfig.json 文件就在项目目录下生成好了,当然这个json文件 也可以个人配置如下

  • include :指定被编译文件所在的目录。

  • exclude: 指定不需要被编译的目录

  • extends: 指定要继承的配置文件

  • files : 指定被编译的文件

  • references: 项目引用,是ts3中的一项新功能,它允许将ts程序组织成更小的部分

target用于指定编译之后的版本目录

"target": "es5",  

module用来指定要使用的模板标准

"module": "commonjs", 

lib用于指定要包含在编译中的库文件

"lib":[
"es6",
"dom"
],

allowJs用来指定是否允许编译JS文件,默认false,即不编译JS文件

"allowJs": true,

checkJs用来指定是否检查和报告JS文件中的错误,默认false

"checkJs": true, 

指定jsx代码用于的开发环境:'preserve','react-native',or 'react

"jsx": "preserve", 

declaration用来指定是否在编译的时候生成相的d.ts声明文件,如果设为true,编译每个ts文件之后会生成一个js文件和一个声明文件,但是declaration和allowJs不能同时设为true

"declaration": true,

declarationMap用来指定编译时是否生成.map文件

"declarationMap": true,

socuceMap用来指定编译时是否生成.map文件

"sourceMap": true,

outFile用于指定输出文件合并为一个文件,只有设置module的值为amd和system模块时才支持这个配置

"outFile": "./",

outDir用来指定输出文件夹,值为一个文件夹路径字符串,输出的文件都将放置在这个文件夹

"outDir": "./",

rootDir用来指定编译文件的根目录,编译器会在根目录查找入口文件

"rootDir": "./",

composite是否编译构建引用项目

"composite": true, 

removeComments用于指定是否将编译后的文件注释删掉,设为true的话即删除注释,默认为false

"removeComments": true,

noEmit不生成编译文件

"noEmit": true, 

importHelpers指定是否引入tslib里的复制工具函数,默认为false

"importHelpers": true,

当target为"ES5"或"ES3"时,为"for-of" "spread"和"destructuring"中的迭代器提供完全支持

"downlevelIteration": true, 

isolatedModules指定是否将每个文件作为单独的模块,默认为true,他不可以和declaration同时设定

"isolatedModules": true,

strict用于指定是否启动所有类型检查,如果设为true这回同时开启下面这几个严格检查,默认为false

"strict": true,

noImplicitAny如果我们没有一些值设置明确类型,编译器会默认认为这个值为any类型,如果将noImplicitAny设为true,则如果没有设置明确的类型会报错,默认值为false

"noImplicitAny": true,

strictNullChecks当设为true时,null和undefined值不能赋值给非这两种类型的值,别的类型的值也不能赋给他们,除了any类型,还有个例外就是undefined可以赋值给void类型

"strictNullChecks": true,

strictFunctionTypes用来指定是否使用函数参数双向协变检查

"strictFunctionTypes": true,

strictBindCallApply设为true后对bind、call和apply绑定的方法的参数的检测是严格检测

"strictBindCallApply": true,

strictPropertyInitialization设为true后会检查类的非undefined属性是否已经在构造函数里初始化,如果要开启这项,需要同时开启strictNullChecks,默认为false

"strictPropertyInitialization": true,

当this表达式的值为any类型的时候,生成一个错误

"noImplicitThis": true,

alwaysStrict指定始终以严格模式检查每个模块,并且在编译之后的JS文件中加入"use strict"字符串,用来告诉浏览器该JS为严格模式

"alwaysStrict": true,  

noUnusedLocals用于检查是否有定义了但是没有使用变量,对于这一点的检测,使用ESLint可以在你书写代码的时候做提示,你可以配合使用,他的默认值为false

"noUnusedLocals": true, 

noUnusedParameters用于检测是否在函数中没有使用的参数

"noUnusedParameters": true,

noImplicitReturns用于检查函数是否有返回值,设为true后,如果函数没有返回值则会提示,默认为false

"noImplicitReturns": true,

noFallthroughCasesInSwitch用于检查switch中是否有case没有使用break跳出switch,默认为false

"noFallthroughCasesInSwitch": true, 

moduleResolution用于选择模块解析策略,有"node"和"classic"两种类型

"moduleResolution": "node",

baseUrl用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响

"baseUrl": "./", 

paths用于设置模块名到基于baseUrl的路径映射

  "paths": {
     "*":["./node_modules/@types", "./typings/*"]
  },

rootDirs可以指定一个路径列表,在构建时编译器会将这个路径中的内容都放到一个文件夹中

"rootDirs": [], 

typeRoots用来指定声明文件或文件夹的路径列表,如果指定了此项,则只有在这里列出的声明文件才会被加载

"typeRoots": [],

types用于指定需要包含的模块,只有在这里列出的模块的声明文件才会被加载

"types": [], 

allowSyntheticDefaultImports用来指定允许从没有默认导出的模块中默认导入

"allowSyntheticDefaultImports": true,

esModuleInterop通过导入内容创建命名空间,实现CommonJS和ES模块之间的互操作性

"esModuleInterop": true, 

不把符号链接解析为真实路径,具体可以了解下webpack和node.js的symlink相关知识

"preserveSymlinks": true,  

sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置,这个值会被写进.map文件里

"sourceRoot": "", 

mapRoot用于指定调试器找到映射文件而非生成文件的位置,指定map文件的根路径,该选项会影响.map文件中的sources属性

"mapRoot": "",

inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中,如果设为true,则map的内容会以//#soureMappingURL=开头,然后接base64字符串的形式插入在js文件底部

"inlineSourceMap": true, 

inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中

"inlineSources": true, 

experimentalDecorators用于指定是否启用实验性的装饰器特性

"experimentalDecorators": true,

emitDecoratorMetadata用于指定是否为装上去提供元数据支持,关于元数据,也是ES6的新标准,可以通过Reflect提供的静态方法获取元数据,如果需要使用Reflect的一些方法,需要引用ES2015.Reflect这个库

"emitDecoratorMetadata": true,

include也可以指定要编译的路径列表

"include":[],

files可以配置一个数组列表

 "files":[],

exclude表示要排除的,不编译的文件,它也可以指定一个列表,规则和include一样,可以是文件可以是文件夹,可以是相对路径或绝对路径,可以使用通配符

"exclude":[]

extends可以通过指定一个其他的tsconfig.json文件路径,来继承这个配置文件里的配置,继承来的文件的配置会覆盖当前文件定义的配置

"extends":""

compileOnSave如果设为true,在我们编辑了项目文件保存的时候,编辑器会根据tsconfig.json的配置更新重新生成文本,不过这个编辑器支持

"compileOnSave":true

一个对象数组,指定要引用的项目

"references":[]

complierOptions 编译器的选项

"compilerOptions":{
//target 用来指定ts被编译为啥版本的js
"target":"ES3"   //最新的为esnext
"module":""   //指定要使用的模块化规范
         //可以先写一些错误的值去判断  
"lib" :[]   //lib指定项目中要使用的库
“outDir”:"./dist"
"outFile":"./dist/app.js"     //将代码合并成一个文件
"allowJs":false  //是否对js文件进行编译,默认是false
//是否检查js代码符合语法规范,默认false
"checkJs":true
//是否移除注释
"removeComments":true,
//不生成编译后的代码
"noEmit":true,
//当有错误的时候不生成编译文件
“noEmitOnError”:true,

}
 

TS入门基础的更多相关文章

  1. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  2. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  3. Markdown入门基础

    // Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...

  4. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  5. C++ STL编程轻松入门基础

    C++ STL编程轻松入门基础 1 初识STL:解答一些疑问 1.1 一个最关心的问题:什么是STL 1.2 追根溯源:STL的历史 1.3 千丝万缕的联系 1.4 STL的不同实现版本 2 牛刀小试 ...

  6. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  7. Linux shell入门基础(六)

    六.Shell脚本编程详解 将上述五部分的内容,串联起来,增加对Shell的了解 01.shell脚本 shell: # #perl #python #php #jsp 不同的脚本执行不同的文本,执行 ...

  8. Linux shell入门基础(一)

    Linux shell入门基础(一): 01.增加删除用户: #useradd byf   userdel byf(主目录未删除)  userdel -r byf   该用户的属性:usermod 用 ...

  9. AngularJS入门基础PPT(附下载链接)

    学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...

随机推荐

  1. IPC机制与线程的操作

    目录 Queue模块 IPC机制(进程间通信) 生产者消费者模型 线程理论 创建线程的两种方式 线程实现TCP服务端的并发 线程join方法 线程数据共享 线程对象属性和方法 守护线程 GIL全局解释 ...

  2. JVM的类加载过程

    每日一句 人到情多情转薄,而今真个不多情. 每日一句 The frog in the well knows nothing of the great ocean. 井底之蛙,不知大海. JVM 的类加 ...

  3. elemetnUI表格分别给列表每一个按钮加loading

    // 获取列表数据的时候--添加按钮loading this.list = this.list.map((item) => { this.$set(item, "dataLoading ...

  4. 线程安全性-原子性之Atomic包

    先了解什么是线程安全性:当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现出正确的行为,那么就称为这个类是线程 ...

  5. python创建分类器小结

    简介:分类是指利用数据的特性将其分成若干类型的过程. 监督学习分类器就是用带标记的训练数据建立一个模型,然后对未知数据进行分类. 一.简单分类器 首先,用numpy创建一些基本的数据,我们创建了8个点 ...

  6. ssh打通

    打通ssh https://www.cnblogs.com/yolanda-lee/p/4975453.html

  7. 下载nltk数据包报错

    安装nltk需要两步:安装nltk和安装nltk_data数据包 安装nltk 安装nltk很简单,可以直接在pycharm环境中安装,flie -> settings-> Python ...

  8. Javaweb_Tomcat配置

    1.基本概念 1.1 前言 web开发: web,网页的意思 静态web html,css 提供给所有人看的数据始终不会发生改变 动态web 淘宝,几乎所有的网站 提供给所有人看的数据始终会发生变化, ...

  9. 关于个人项目(臻美MV【仿抖音App】)滑动切换视频的分析(前端角度)

    我们知道你天天刷抖音的时候可以上滑切换视频,互不影响.那么我们站在前端的角度能否可以实现这种效果呢?这是我的个人项目:臻美MV 下面我是用Vue写的,现在我把它开源. Vue: 初始界面 <te ...

  10. -bash: /usr/local/maven/apache-maven-3.8.1/bin/mvn: 权限不够

    chmod a+x /usr/local/maven/apache-maven-3.8.1/bin/mvn